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();
}
});
Related
There is a form in the popup window that sends data to Ajax. After a successful form, a message about successful submission with the .form-message--success class appears below. I would like that when this class appears in 5 seconds, the window close button with the id #close_pop a is clicked.
Is this possible when a class is added dynamically to the DOM?
I tried something like this, but it doesn't work(
jQuery(document).ready(function($) {
$('.jet-form-message--success').on(function(){
setTimeout(function(){
$('#close_pop a').click();
}, 2000);
});
});
<script>
$(function() {
$("#user-form").on("submit", function(event) {
event.preventDefault();
$.ajax({
url: "form.php",
method: "POST",
data: $( this ).serialize(),
success: function(data) {
alert('form send success');
setTimeout(function(){
$('#close_pop a').click();
}, 2000);
},
error: function(xr) {
alert("error "+xhr.status+' '+xhr.statusText);
}
});
});
});
</script>
So, i want to show a pop up when deleting a row from my table, so this is my action link :
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
#Html.ActionLink("Delete", "Delete", new { id=item.cin },new { #class = "delete-logo" ,#pkNo=item.cin})
<div id="confirmDialog" title="Warning"></div>
my script :
<script type="text/javascript">
$(document).ready(function () {
buttonizeALL();
setLinks();
});
function buttonizeALL()
{
$(".delete-logo").button();
}
function setLinks()
{
//delete person
$(document).ready(function () {
$(".delete-logo").live("click", function (e) {
e.preventDefault();
var pkNo = $(this).attr("pkNo");
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
var rowNo = '#row-' + pkNo;
var url = '/Subscribers/Delete/' + pkNo;
$.ajax({
type: "Delete",
url: url,
data: {},
cache: false,
dataType: "json",
success: function () {
$(rowNo).animate({ opacity: 0.0 }, 400, function () {
$(rowNo).remove();
});
},
error: function (jqXHR, exception) {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
});
} //end setLinks
my problem is the pop up doesn't work, and when i used my script without the pop up it works, so please if some one have any idea i will be very appreciated.
Here is your example tidied up a little in a jsFiddle i.e. I've moved the setLinks() code into the document.ready() function.
$(document).ready(function () {
buttonizeALL();
setLinks(); // removed this
});
Also I've replaced the ActionLink with the anchor tag it will render.
This is using Jquery 1.8.3 and jQuery UI 1.9.2. The pop-up seams to work fine.
first off, don't use "live" command anymore. Thats been deprecated in lieu of the "on" command. Also there is no need to use the $(document).ready within the setLinks function. Since its a standalone function (not self executing) its only put into memory until its called when you call it in the doc.ready function.
This function only runs once. How can I get it to run multiple times?
I have tried using live() as was suggested in another SO question, but that made no difference to the program.
$(function() {
$('#chooseTeam').live('change', (function() {
$.getJSON($SCRIPT_ROOT + '/_get_info', {
selectedDeck: $('#chooseTeam').val()
}, function(data) {
/* Do something */
});
}
return false;
}));
});
Did you tried with document ready instead of $function()
$(document).ready(function() {
$('#chooseTeam').live('change', (function() {
$.getJSON($SCRIPT_ROOT + '/_get_info', {
selectedDeck: $('#chooseTeam').val()
}, function(data) {
/* Do something */
});
}
return false;
}));
});
Regards
I would like to add a progress animation to a function so that it displays at the begining of the function and then disappears at the end of it.
Something like:
<script type="text/javascript">
function myfunction() {
//Display progress animation here
$('input[type=submit]#submit').click();
etc...
//Hide the progress animation here
}
?>
UPDATE:
Here is my current Ajax code:
<script type="text/javascript">
function myfunction() {
$("#ajax-form").submit(function(){
$.post("submit.php",
$("#ajax-form").serialize(),
function(data){
mysubmitForm();
}
);
return false;
});
}
</script>
What anix said:
<div class="loader">Loading...</div>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'the url',
data: {},
success: function() {
$('.loader').fadeOut();
}
});
});
</script>
Update:
<script type="text/javascript">
function myfunction() {
$("#ajax-form").submit(function(){
//show loader here
$.post("submit.php", $("#ajax-form").serialize(),
function(data){
mysubmitForm();
//and hide it here
}
);
return false;
});
}
if you are using something like $.ajax() then you can have a div with progress image visible befor ajax call and make ot invisible on the sucess event of ajax call
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);
});