I've got a jqGrid that when a user edits a row, they need to click a button to apply the changes. This button should create a dialog box, which should trigger an ajax call with the option selected.
However, the dialog box never opens. Firebug will stop at breakpoints within the function that creates it, but never does what it's supposed to.
function confirm_dialog(rowData){
$("#dialog").dialog({
modal:true,
buttons: {
"Yes": function(){
ajax_call(rowData, "yes");
$(this).dialog("close");
},
"No": function(){
ajax_call(rowData, "no");
$(this).dialog("close");
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
}
function ajax_call(rowData, option){
$.ajax({
url: '{{django_base}}',
data: {'data':rowData, 'option':option},
type: 'POST',
error: function(){
window.alert("There was an error!");
},
success: function(){
window.alert("Changes made successfully!");
}
});
}
$(function(){
//...
baseGrid = new BaseGrid("#the-jqGrid", opts);
//...setting grid format
baseGrid.addButton("edit",
{ caption:'Confirm Changes', onClickButton:confirm_dialog() });
}
I've placed a breakpoint at the beginning of confirm_dialog and ajax_call. It will hit the confirm_dialog break during page load, but not when the button is clicked. The break in ajax_call is never reached.
If is this your production code, then you missed a comma:
function ajax_call(rowData, option){
$.ajax({
url: '{{django_base}}',
data: {'data':rowData, 'option':option},
type: 'POST',
error: function(){
window.alert("There was an error!");
}, **<-------missed comma**
success: function(){
window.alert("Changes made successfully!");
}
});
}
EDIT
I made a fiddle http://jsfiddle.net/94cfma4m/ I think everything is OK with the code itself, maybe the rowData source is invalid?
Related
Well long story short, I am trying hide a div inside Ajax success function depending on whether its visible or not. But don't understand why it isn't working. I can set it to hide simply and which works but in the console when I check I find that it keeps on setting the div to display:none even if it is already hidden.
JS
$(document).ready(function() {
$('#loading').show();
setInterval(function () {
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
//$('#loading').hide();
$('#loading:visible').hide();
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
Toggle visibility
$(document).ready(function() {
$('#loading').css('visibility': 'visible');
setInterval(function () {
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
if ($('#loading').css('visibility') == 'visible') {
$('#loading').css('visibility','hidden');
}
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
CSS : Initially loader will be hidden
#loading {
visibility : hidden;
}
So go with visibility property if you want to check the visibility. But if you want to use .hide() or .show() then it depends on display property
Visibility : http://www.w3schools.com/cssref/pr_class_visibility.asp
Display : http://www.w3schools.com/cssref/pr_class_display.asp
Sample Demo : https://jsbin.com/jiluren/11/edit?html,css,js,output
Hope this helps. Thanks !
Your problem might be that you misplaced the call of showing the loading indicator. You call $('#loading').show(); only once, before starting the setInterval iteration. So the first time your #loading gets hidden, it will stay hidden forever. You should call $('#loading').show(); before each ajax call like this.
$(document).ready(function() {
setInterval(function () {
$('#loading').show();
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
//$('#loading').hide();
$('#loading:visible').hide();
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
Also, note that for such a loading indication it's better to hide it in the always callback of the promise returned by $.ajax. That way the loading panel will be hidden also when an error occures, and the success callback is not called. I mean something like thi.
$("#loading").show();
$.ajax({ ... })
.always(function() {
$("#loading").hide();
});
If i understand your requirement , you need to show the loading icon before ajax call and hide it once ajax call completes
In that case there are predefined callback functions avialable
beforeSend: function (xhr) {
$("#loaderforsearch").show()
},
complete: function()
{
$("#loaderforsearch").hide();
},
I tried the following methods:
1) Show/Hide
$('button').ajaxStart(function() {
$(this).hide();
});
$('button').ajaxStop(function() {
$(this).show();
});
2) Visible/Hidden
$('button').ajaxStart(function() {
$(this).css({visibility, 'hidden'});
});
$('button').ajaxStop(function() {
$(this).css({visibility, 'visible'});
});
3) Add/Remove Class
$('button').ajaxStart(function() {
$(this).addClass('invisible');
});
$('button').ajaxStop(function() {
$(this).removeClass('invisible');
});
4) Enable/Disable
$('button').ajaxStart(function() {
$(this).attr('disabled','disabled')
});
$('button').ajaxStop(function() {
$(this).removeAttr('disabled');
});
So far, only the Show/Hide method is responsive enough to be executed under 1s. The rest took between 1-2s, which is noticeably long. However, I would like the button to be displayed but disabled with some noticeable CSS change. Is there a more responsive way to enable and disable the submit button temporarily?
Try this:
$("button").click(function() {
// disable the submit button before the ajax call...
$(this).attr('disabled','disabled');
$.ajax({
url: 'yoururl.html',
data: {},
type: 'post',
success: function(response){
// enable the submit button after ajax call success...
$(this).removeAttr('disabled');
},
error: function(){
// error process here
$(this).removeAttr('disabled');
},
dataType: 'json'
});
});
I have this code
<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
Every time someone click on this button I want a image to load for like 1 sec
so the user knows that something happened..
any kind of help is appreciated
Something like:
var $loader = $('<img src="loader.gif">').appendTo(document.body);
And then
success: function (data) {
setTimeout(function() {
$loader.remove();
data = eval(data);
$this.addClass('productSelected');
},1000);
}
It will show the image for 1sec + the ajax loading time. Although, as a visitor of your site I would probably prefer to skip the 1sec delay...
Add before send like this :
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
SetTimeout(1000, function(){
$("#one_sec_img").hide();
})
}
But, I think your requirement is something normal :
Here, bcoz of the before send, as soon as you click button that triggers ajax, the image will be loaded, and on success, the image can be hidden . This is the usual process, in this case,setTimeout is not needed . But, if your requirement is something like, the image should appear only one sec, you can use set timeout. Otherwise, below code is enough.
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
},
success: function(res){
$("#one_sec_img").hide();
}
<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var html=$(this).html();
$(this).html('loading');//<img src="" />
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
$(".a").html(html);
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
try this.
Use jQuery BlockUI Plugin to show the image, may be it solve your problem.
Try:
$(".a").click( function( ) {
$("#idOfImage").show().delay( 1000 ).hide();
// ajax call
});
else if you only want the image to disappear only after the ajax call
$(".a").click( function( ) {
$("#idOfImage").show();
$.ajax({
// parameters
}).done( function( ) {
$("#idOfImage").hide( );
});
});
So I am opening a
$('#someelement').dialog({ title.......
autoOpen: false,
//......
buttons: { OK: function() {
$(this).dialog('close');}
},
//....
});
During this time a timer is running, if the user clicks "OK" I don't want anything to occur, but if the timer has run down, I would like change the function. I have tried the following unsuccessfully:
jQuery('#SessionTimeoutWarningDialog').dialog('option', 'buttons', {
'OK': function() {
RedirectToLogin;
jQuery(this).dialog('close');
}
});
What am I doing wrong, or how should I be handling this?
I guess I'll answer my own:
//........
$('#someelement').dialog('option', 'buttons', {
'buttonName': function() {
//your new functionality;
}
});
or with the beforeClose event:
$('#someelement').bind('dialogbeforeclose', function() {
//your new functionality;
});
I would like to load some content using AJAX and Shadowbox
Basically I would like the user to goto a page in case javascript is off. So this is what I want to do :-
1) Cancel the click event i.e the User must not go to a different page.
2) Load content using ajax function in jQuery
3) Show the content inside a shadow box
My code works ok until loading content using ajax but the shadowbox is not displayed and the URL is gettin refreshed i guess, everything goes blank.
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "/ajax-post.php?p="+id,
success: function(data){
Shadowbox.open({
content: data,
player: "html",
height: 350,
width: 350
});
}
});
return false;
});
UPDATE 1
tried this code, and as soon as the shadowbox loads, the document gets reloaded and white.
Shadowbox.init({
skipSetup: true,
players: ["html"]
});
// LOAD
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('.post h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id,
success: function(data){
show_box(data);
}
});
return false;
});
});
//shadowbox
function show_box(html) {
Shadowbox.open({
content: html,
player: "html",
height: 350,
width: 350
});
}
UPDATE 2
Okay got the prbolem, the html that I am getting via ajax has some javascript in it and that is the reason for the page reload.
Why is this happening ? Any ideas ?
Since you're not getting any JavaScript errors try debugging by breaking it down:
Ensure that the binding to and overriding of the click event is functioning properly:
$('h2 a').bind('click', function() {
alert('click even fired');
return false;
});
If that works, check the data that your ajax request is returning:
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "ajax-post.php?p="+id,
success: function(data){
alert(data);
}
});
return false;
});
The code looks like it should work, so I'm guessing there's either something wrong elsewhere (in which case the first test will likely fail) or you're getting some really odd data returned.
Need to run
Shadowbox.setup('h2 a');
This will reinitialise and bind it to any ajax loaded content