I have the following jQuery code that when a hyperlink is clicked, it downloads the file of the hyperlink href. While it is preparing the file, it displays a please wait message.
The href code is:
<a class="fileDownloadCustomRichExperience" href="pdf.php">Report Download</a>
I want to be able to make the code below run using the $( document ).ready(function() { instead of $(document).on("click")
I tried the ready(function) but couldnt get the href to work.
Any suggestions?
Thanks
$(function () {
$(document).on("click", "a.fileDownloadCustomRichExperience", function () {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload($(this).prop('href'), {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
* SOLVED BELOW: *
$(function () {
$( document ).ready(function() {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload('pdf.php', {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
Related
I have got this script to give effects to buttons which i have, it fails after the page is posted back, i have also put the code in a pageLoad method yet it still does not function. any idea how i can go about making this script run once the page has loaded.
$(document).ready(function () {
/*preloader for image loading bar*/
jQuery(function ($) {
function preLoad() {
//alert("script running");
$("#divQuestionMatrix").addClass("hidden");
}
function loaded() {
$("#divQuestionMatrix").removeClass("hidden");
$('div#preLoader').css({ display: 'none' }).remove();
}
preLoad();
window.onload = loaded;
});
/* End of preloader*/
$("#btnPrevious").click(function (e) {
$("#navigation").val("previous");
}
);
$("#btnNext").click(function (e) {
$("#navigation").val("next");
}
);
/* $(".qmatrix").click(function () {
//get id of button
alert($(this).attr('id'));
$("#navigation").val($(this).attr('id'));
}
);*/
$(".qmatrix").hover(function (e) {
//get id of button
//alert($(this).attr('id'));
//get src of image before hover
var origimage = $(this).attr('src');
// alert(origimage);
//$(this).attr({ src: 'images/questionMatrix/100' + $(this).attr('id') + '.png' });
$(this).stop().animate({ "opacity": "0.1" }, "fast")
},
function () {
// $(this).attr({ src: '' + origimage.toString() + '' });
$(this).stop().animate({ "opacity": "1" }, "fast");
}
);
The document.ready event is fired once the page has finished loading.
Inside the handler for the ready event, you're then using the ready event shortcut (passing a function directly to the global jQuery function (which is the same as the global $ function btw) to add another handler function for the ready event.
Inside this second ready handler you're then trying to assign the loaded function to window.onload, which would have already fired by this point.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Put this Latest Jquery Library Just just above to your document.ready() function and try to run your program.
In my app I have 3 pages from the first page I am sending data to server, here I want to show a Loading dialog until the send operation (posting to server) is finished and then go to page two. Doing a below but it's not working
<script type="text/javascript">
$(document).on('pageshow', '#Page2' ,function () {
setTimeout(function () {
$.mobile.changePage('#dialog');
}, 100); // delay above zero
});
</script>
Try2
<script>
$(document).on("pagecreate","#page", function () {
$("#custom-li").on("click", function () {
var orgname = $('input:text[id=name]').val();
loadingStart();
setTimeout(function () {
loadingEnd();
$.mobile.changePage('#page2');
}, 3000);
return false;
});
});
function loadingStart() {
$.mobile.loading('show', {
text: "loading",
textVisible: true
});
}
function loadingEnd() {
$.mobile.loading("hide");
}
</script>
the function is firing but the spinner is missing from the dialog when I run in browser and mobile.
Any help is appreciated.
So is only spinner missing? In this case, maybe you don't have "images/ajax-loader.gif" at html files directory.
I have an iframe on a page. In iframe there are few inputs in a form tag and more can be loaded via ajax.
I'm tring to bind blur or focus event to this inputs but it doesn't work. Other events, such as click works very well.
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find("input").focus(function() { // works but this is only for existing inputs
alert(1);
});
$(this).contents().find("form").on("click", "input", function (e) { // works
alert(1);
});
$(this).contents().find("form").on("focus", "input", function (e) { // doesnt work
alert(1);
});
});
});
});
Thanks in advance.
To select inputs and forms inside the iframe try this:
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find('body').find("input").blur(function() {
alert(1);
});
});
});
});
I am using jquery UI dialog to show comments or other text depending upon what is clicked.
Here is my JSfiddle link Dialog Demo
I have used the code
$('.showComments').each(function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$('.showContractChanges').each(function () {
var panel = $(this).parent().siblings('.divContractChangeDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$(".divCommentDetail, .divContractChangeDetail").dialog({
autoOpen: false,
modal: true,
open: function () {
$(this).parent().siblings('.ui-dialog-titlebar').addClass('ui-state-error');
},
show: {
effect: 'blind',
duration: 1000
},
hide: {
effect: 'explode',
duration: 1000
}
});
and the content is added dynamically on page load. I am trying to use $(document).on('each', '.showComments', function(e) {}); so that it can work with dynamically loaded content, but it doesn't work at all. here is my modified code.
$(document).on('each', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
but this doesn't work at all. Am i doing something wrong.
Thanks for the help.
If the .divContentDetail is added dynamically after page load, it's not the loop you need to change, but the event that you are registering:
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
.on bind event that work on dynamicly added elements. But 'each' is not an event, it's a method.
You should use on like that :
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.
How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>
Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click