Develop Reference

Execute JavaScript in a modal window

I have the following JS code:
<script type="text/javascript">
$(document).ready(function () {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
</script>
This populate a dropdownlist with the value Select, the thing is, this dropdownlist appears in a form that it's called once the user clicks a button and then a modal windows opens, with the form in it.
But since it is mark as
$(document).ready
This JS won't execute with the modal, since the document is already 'ready'. How can I achieve this?
Thanks in advance!
Regards,

You can easily achieve this using bootstrap modal events. You can use following code snippet to achieve your objective:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
});
For reference Please check bootstrap modal events.

A useful way to load and execute javascript after the page is loaded, like modal window show ups, is to use ajax getScript function, which Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request through a pre-defined function in main page.
function loadJS(lnk){
$.getScript(lnk);
}
it can be a general way to load any script in a fully loaded page.

One solution is to use jQuery event.on
from this blog post https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html
I will quote the author, because I think it's a very neat explanation.
We can’t register a listener to an element that doesn’t exists.
A work around is to register the listener to an element that will
always exist in the page context. The #modal-book is the closest
element. It is a little bit more complex what happen, but long story
short, the HTML events propagate to the parents elements until it
reaches the end of the document.
More here: https://api.jquery.com/on/

Try something like this:
$('#idofselectelement').change(function() {
//grab the selected option and then do what you want with it.
});

jQuery document.ready doesn't fire after script called in code behind ScriptManager.RegisterStartupScript

I have a filtered list of items using https://mixitup.kunkalabs.com/
see screen for example
The user then selects to add another action - this uses fancybox as a popup and shows the user the next image:
Once the user has added the data, the pages does a partial post back using an update panel. the code then calls a js function from the code behind to close the popup and then call the mixitup function to reinitialize the list as it now has a new item in it, but it doesn't work.
Here's the code behind that calls the js
ScriptManager.RegisterStartupScript(Me, [GetType](), "Load", "ReloadData();", True)
and here is the js that will be called:
function ReloadData() {
parent.jQuery.fancybox.close();
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
}
The fancybox closes but the mixitup never gets fired as it it never passes the docment.ready test meaning its not loaded so cant run the jQuery, but I am unsure why?

$(document).ready() fires after the document is finished rendering. So, if you already rendered your page and are now interacting with it, that ready statement no longer has any relevance, until you reload the page. So, don't put that inside a function.
Just call your mixItUp code inside the function block.
function ReloadData() {
parent.jQuery.fancybox.close();
$('#Container').mixItUp({layout: {display: 'block'}});
}
As a suggestion: if you're already using jQuery, don't bother with update panels. Just do your ajax calls through $.ajax.

You should place the following code outside the ReloadData() function.
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
document ready function should always be kept at the top level. Also please check if there is any JS error while loading page.

lightbox is not working in updatepanel c#

A $ function (which is a DOM ready function) will be only be executed when the page loads for the first time. Any further AJAX call (which is a partial loading/rendering) will not fire DOM ready function. Which is the reason, I were not able to get it working.
In you case, this function binds my anchor link (button) with the lighbox behavior the first time the page loads. so, it works. The next time when I refresh the update panel (which is a partial render) the button is not bound to lightbox again. Unless this binding is achieved it will not show up.
it work fine first time when page is loaded.
<script type="text/javascript">
$('body').flipLightBox();
</script>

If you need to call Javascript/jQuery function in an UpdatePanel you need place them inside the pageLoad() function:
<script type="text/javascript">
function pageLoad() {
$('body').flipLightBox();
}
</script>
This will call it on every update of the UpdatePanel.

JQuery Mobile do X to every div with given class

I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?

I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo

Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});

Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.

Detect first page load with jQuery?

I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks

You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.

An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.

I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.

The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});