Develop Reference

ajax modal doesn't fire after setInterval reload

<script>
$(document).ready(function () {
setInterval( function() {
$("#myDiv").load(location.href + " #myDiv");
}, 10000 );
});
</script>
<script>
$.ajax({
type: "GET",
url: "/edit-nurse/" + addmission,
success: function (
) {
console.log(response.addmission\[0\]);
$('#amid').val(response.addmission\[0\].amid);
$('#room_list_id_now').val(response.addmission\[0\].roomid);
$('#patient_fname_changeroom').val(response.addmission\[0\].patient_fname);
$('#patient_lname_changeroom').val(response.addmission\[0\].patient_lname);
$('#patient_id_changeroom').val(response.addmission\[0\].patient_id);
$('#room_list_numbers_changeroom').val(response.addmission\[0\].room_list_numbers);
$('#room_list_status_changeroom').val(response.addmission\[0\].room_list_status);
$('#nursed_warding').val(response.addmission\[0\].nursed_warding);
$('#checkin').val(response.addmission\[0\].checkin);
}
});
});
});
</script>
When I do console.log the data comes but my modal doesn't show up.
help me...
I want the modal to be able to press normally like before the setInterval code runs.

Second jQuery function failing to run

I have created two user-defined functions within the "head" section of an HTML page and I am calling them with a script just before the closing "body" tag. The trouble is that the second function is not working, unless I include an "alert" statement in the first function (which halts the execution until I dismiss the alert).
I am guessing it is caused by the first function not actually finishing completely before the second one starts and by having my alert statement it gives the first function time to finish.
Function one is to build a list of images in DIV tags.
Function two implements FlexSlider to initiate a slideshow of the images.
Calling the below as it is will render a page with all images shown. If I uncomment the alert box and run it again, the screen is rendered with my images, I dismiss the alert box, and then FlexSlider kicks in and starts the slideshow.
Here are the two functions defined in the "head" section.
<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
And here is the code near the closing "body" tag.
<script>
$(document).ready(function() {
buildslider();
runslider();
});
</script>
What am I doing wrong and how do I correct this so it can be done properly?
Thank you in advance.
David.

Return the ajax() returned object from the first function. This is a jQuery "promise" object which will then expose done and fail methods. These methods take a function, so you can just insert your second function into done. See example below:
<script type="text/javascript">
var buildslider = function () {
return $.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
Then run with:
<script>
$(document).ready(function() {
buildslider().done(runslider);
});
</script>
It also makes it easier to handle failures in a more general way:
<script>
$(document).ready(function() {
buildslider().done(runslider).fail(function(){
alert("#%&£ happens!");
});
});
</script>
Using promises is far more flexible than using callbacks, and supports multiple done() functions, so is now the preferred way to do this.
Note: A simpler shortcut for DOM ready is $(function(){ your code here }); or if you want it to have a locally scoped $ use jQuery(function($){ your code here }); which acts as both a DOM ready handler and provides a locally scoped $ to avoid clashes (e.g. with other plugins).

<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "/myImages/homepageslider/PhotoGallery.xml" ) {
runslider();
}
});
</script>
Now Just call the buildslider() only no need to call the runslider() in your document.ready..

try something like this
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
});
}
});
};
final script block
$(document).ready(function() {
buildslider();
});
Note : execute slider code after ajax is successfully completed.

Close jquery dialog from iFrame with external html

I am trying to close a jQuery ui dialog from an iframe with an external html inside.
My code looks like the following:
JS code in my main html to create the dialog when I click on a button:
function createDialog() {
return $("<div id='personal-popup' class='dialog' title='Copia de archivos'></div>")
.html('<iframe style="border: 0px; " src="copy.html" width="100%" height="100%"></iframe>')
.dialog({
resizable: true,
height: 447.59999990463257,
width: 993.5999999046326,
modal: true
});
}
JS code inside the other html (copy.html)
function copiarArchivos() {
$.mobile.loading('show',{
text: "Copiando",
textVisible: true,
theme: "a",
html: ""
});
var result = [];
var allOptions = $("#select-custom-19");
$("#select-custom-19 option:selected").each(function () {
var $this = $(this);
var selText = $this.text();
$this.prop("selected", false);
result.push(selText);
});
allOptions.selectmenu('refresh', true);
$.ajax ({
url: "php/copia.php",
type: "post",
data: {"params": result},
success: function(response) {
$.mobile.loading('hide');
//I want to close the dialog here when the ajax function success
$(window.parent.document).find("#personal-popup").dialog('close');
}
});
}
I have followed the answer to this question: Close jQuery UI Dialog from Iframe, but it didn´t work for me.
--- EDIT ---
The JS function which is going to be called from the iFrame, allocated in the mane html (index.html)
function closeDialog(){
console.log("Im working!!");
document.getElementById("personal-popup").dialog("close");
}
The JS call from the iframe (copy.html)
$.ajax ({
url: "php/copia.php",
type: "post",
data: {"params": result},
success: function(response) {
$.mobile.loading('hide');
window.parent.closeDialog();
}
});

from inside the iframe you can access window.parent.
This means that in your main frame you could have:
window.closeDialog = function(){//Do stuff}
Anf then in your iframe have:
window.parent.closeDialog();

Call a js function inside of modal window

I'm applying some css3 effects using a function it works fine on body page but my problem is how to call that function inside a modal window? created dynamic by Ajax.
this is the function:
$(document).ready(function() {
if (window.PIE) {
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
});

i think what your saying is u want the styling to be on the elements you retrieved through ajax:
$(document).ready(function() {
if (window.PIE) {
go();
}
});
function go(){
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
$.ajax({
url: 'ajax/test.html',
success: function(data) {
//append the data to the body here
go();
}
});

jquery ajaxStart/ajaxStop not working

i have very simple code that i making partial postback by jquery and i use ajaxStart/ajaxStop for doing some work. but it is not working. i just could not understand why it is not working.
here is my code
$("#imgHolder").ajaxStart(function () {
$('div#content').block({
message: '<table><tr><td><img src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
css: { border: '1px solid #a00' }
});
$('#imgHolder').empty();
$("#btnPrint").hide();
});
$("#imgHolder").ajaxStop(function () {
$("#btnPrint").show();
$('div#content').unblock();
});
$(document).ready(function () {
$.ajax({
type: "POST",
url: "UPSLabelFormUK.aspx/ProcessInfo",
data: JSON.stringify(DTO),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.d[0].Message == "SUCCESS") {
//alert(data.d[0].TrackNumber);
///alert(data.d[0].LabelImagePath);
var _images = [data.d[0].LabelImagePath];
$.each(_images, function (e) {
$(new Image()).load(function () {
$('#imgHolder').html("<img src='" + data.d[0].LabelImagePath + "' width='310' height='402' border=0/>");
}).attr('src', this);
});
}
} ,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
});
i just dont not understand why my above ajaxstart/ajaxstop did not work. please help me to understand why was wrong in my code.
but my ajaxstart/ajaxstop started working when i change the code a bit like
$(document).ajaxStart(function () {
$('div#content').block({
message: '<table><tr><td><img src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
css: { border: '1px solid #a00' }
});
$('#imgHolder').empty();
$("#btnPrint").hide();
});
$(document).ajaxStop(function () {
$("#btnPrint").show();
$('div#content').unblock();
});
the only change is $(document).ajaxStop(function () { instaed of
$("#imgHolder").ajaxStart(function () {
so please explain why my above ajaxStart/ajaxStop code did not work. thanks

Given the fact that ajaxStart is only called if there are no other
ajax requests in progress, it makes is useless if you want to use it
as an AJAX loader indicator.
have u tried with ( tell me is it working or not)
jQuery(document).ajaxStart(function(){
alert("it begins");
})

As of jQuery 1.8, the .ajaxStop() method should only be attached to document.
from jquery api web page of "ajaxStop". You can check it here.

Try this:
$("#loading").bind({
ajaxStart: function() { $(this).show(); },
ajaxStop: function() { $(this).hide(); }
});
Essentially binding your loadingAnimationElement to the globally fired ajaxStart and ajaxStop events. Only shows up when you intend it to.
When jQuery is not performing any Ajax requests and a new request is initiated, it fires an ajaxStart event. If other requests begin before this first one ends, those new requests do not cause a new ajaxStart event. The ajaxStop event is triggered when the last pending Ajax request is completed and jQuery is no longer performing any network activity.

This combination works fine. Thanks to user #brroshan
JS of Master page
<script language="JavaScript" type="text/javascript">
$(document).ajaxStart(function () {
$("#loading").show();
});
$(function () {
// Some other code
// The end of this code block
$("#loading").hide();
$("#loading").bind({
ajaxStart: function () { $(this).show(); },
ajaxStop: function () { $(this).hide(); }
});
});
</script>
html of Master page
<div id="loading" class="display: none;">
<h2>Loading...</h2>
</div>

Try this sample code:-
var $loading = $('#div_Loader').hide();
$(document).ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
setTimeout(function () {
$loading.hide();
}, 1000);
});