This error is 9lesson.info site EDITDELETEPAGE template is
So This error is EDIT and DELETE functions have. error name is
e.stopImmediatePropagation is not a function
$(document).ready(function()
{
$(".delete").live('click',function()
{
var id = $(this).attr('id');
var b=$(this).parent().parent();
var dataString = 'id='+ id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete_ajax.php",
data: dataString,
cache: false,
success: function(e)
{
b.hide();
e.stopImmediatePropagation();
}
});
return false;
}
});
how to add add button please help me?
Possibly because you are using .live() to bind your events. From the jQuery documentation:
Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events.
Depending on which version of jQuery you are using, simply changing the live event handler to on (jQuery on) may fix the problem.
Related
I have filters outside of jqGrid that should trigger a grid reload. This entry gave me some good insight into how to implement it, using the postData option: How to filter the jqGrid data NOT using the built in search/filter box
Unfortunately the code snippets are fragments, and I cannot figure out what the overall sequence of calls should be. Here's a condensed view of my current approach:
<script>
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
myGrid.trigger('reloadGrid');
});
});
var url="${servicesUrl}/projects";
var myGrid = $("#projectList").jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
// ...
});
</script>
How should I structure the code so that every click of the Submit button will trigger a grid reload? Once I have that sorted out, I'm sure I'll be able to add the posData part, my problem is mostly with the overall sequence of calls. I'm not sure which calls should be inside of the ready() function, and how to call 'reloadGrid' properly. Any help greatly appreciated.
This is what has worked for me: I set a callback on the beforeRequest event which updates the postData property before each request is made.
Note that you will want to put all your jqGrid init code inside the $(document).ready(function(){}); function, otherwise the your table element may not be in the DOM yet
var url="${servicesUrl}/projects";
$(document).ready(function() {
var $table = $("#projectList");
$table.jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
beforeRequest: function() {
var postData = $table.getGridParam('postData');
//add parameters to postData here
}
// ...
});
$("#submit").click(function(e) {
e.preventDefault();
$table.trigger('reloadGrid');
});
});
I've got a dashboard page, and am using jQuery to update each graph with a single ajax call.
If it run AJAX with async:false then everything works, but it's obviously slow as the calls are made one after another.
When I run async:true, the queries execute but they all output to the same element and overwrite each other.
How can I ensure that the jQuery selector in the success and error functions remain pointed to their original desintation and do not all point to the final box?
My code:
//update sparklines on dashboard page
$(".convobox7").each(function() {
id = $(this).attr('id');
$("#convobox-7-"+id).prepend("<img src='img/ajax_loader.gif'/>");
$.ajaxQueue({
url: '_ajax/getFunnelReport',
type: "POST",
dataType: "json",
async: true,
data: {funnel:$(this).attr('id'), dimension:'date'},
timeout: 50000,
success: function(json) {
var data = json;
if (data.success=='true') {
$("#convobox-7-"+id).html(data.htmlconv+"<br/><small>Past week</small>");
gebo_peity.init();
}
},
error: function(x, t, m) {
$("#convobox-7-"+id).html("");
}
})
});
Note I'm using the ajaxQueue plugin here but the same thing happens without it.
You need to localise id :
var id = $(this).attr('id');
There may be other things to fix but that one is a certainty.
EDIT
Try this :
$(".convobox7").each(function() {
var id = $(this).attr('id');
var $el = $("#convobox-7-"+id).prepend("<img src='img/ajax_loader.gif'/>");
$.ajaxQueue({
url: '_ajax/getFunnelReport',
type: "POST",
dataType: "json",
data: {funnel:id, dimension:'date'},
timeout: 50000,
success: function(data) {
if (data.success == 'true') {
$el.html(data.htmlconv+"<br/><small>Past week</small>");
gebo_peity.init();
}
},
error: function(x, t, m) {
$el.html("");
}
});
});
This has to do with function closures because you declared the variable outside the success/error function. A better approach is to use the $(this) reference in the error/success functions instead of assigning it outside the handlers.
Edit: In the context of the error/success handler for ajaxQueue, I'm not absolutely certain what $(this) refers to, you may need to navigate to a parent element. I didn't see any definitive documentation offhand. This is one of my biggest pet peeves with javascript documentation, $(this) is sometimes not what you would think it'd be and isn't documented :/
silly question, but since you already send the element id to the service, is there a reason it cannot send it back? then you can simply use that as a selector, ensuring that you have the item you need.
I am using .ajaxStart() and .ajaxStop() to show a modal while an ajax request is being made. (between start and stop)
Now I'd like to add a longpoll function that keeps waiting for notifications, similar to the one on the left upper corner of this site.
My problem now lies in disabling this modal only for the longpolling request..
Registering "loading screen" on and off handlers:
$(document).ajaxStart(handleAjaxStart);
$(document).ajaxStop(handleAjaxStop);
My longpoll function:
$.ajax({
timeout: 35000,
url: longPollUrl,
success: function(data){
if(data.queCount) $('#numQueCount').html(data.queCount);
if(data.queAccept) $('#numQueAccept').html(data.queAccept);
},
dataType: 'json',
complete: longpoll
});
I tried:
$().off('ajaxStart');
$().off('ajaxStop');
..and reattaching the handlers after starting the polling, but no joy.
I also tried introducing a global variable into handleAjaxStart() that would return at the first line of the function, but that seems to completely kill the loading screen.
Any ideas how this can be achieved?
I figured it out..
There is an attribute in the options object .ajax() takes called global.
If set to false, it will not trigger the ajaxStart event for the call.
$.ajax({
timeout: 35000,
url: longPollUrl,
success: function(data){
if(data.queCount) $('#numQueCount').html(data.queCount);
if(data.queAccept) $('#numQueAccept').html(data.queAccept);
},
global: false, // this makes sure ajaxStart is not triggered
dataType: 'json',
complete: longpoll
});
After reading all possible solutions, I want to combine answers.
Solution 1: Bind/Unbind
//binding
$(document).bind("ajaxStart.mine", function() {
$('#ajaxProgress').show();
});
$(document).bind("ajaxStop.mine", function() {
$('#ajaxProgress').hide();
});
//Unbinding
$(document).unbind(".mine");
It is a depreciated solution. Before jQuery 1.9, global events of ajax like ajaxStart, ajaxStop, ajaxError etc. can be binded to any element. After jQuery 1.9:
As of jQuery 1.9, all the handlers for the jQuery global Ajax events,
including those added with the .ajaxStart() method, must be attached
to document.
Therefore we cannot bind/unbind these events to custom namespaces.
Solution 2: Set the property global to false
$.ajax({
url: "google.com",
type: "GET",
dataType: "json",
global: false, //This is the key property.
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});
This solution works to disable ajaxStart()/ajaxStop() event(s). However, it also makes disable ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess(). If you don't use these global events, it seems ok, but when it is needed, you have to come back and change your solution for all pages where you set global: false.
Solution 3: Use global variable
var showLoadingEnabled = true;
$(document).ready(function () {
$('#loading')
.hide() // at first, just hide it
.ajaxStart(function () {
if (showLoadingEnabled) {
$(this).show();
}
})
.ajaxStop(function () {
if (showLoadingEnabled) {
$(this).hide();
}
});
});
function justAnotherFunction() {
window.showLoadingEnabled = false;
$.ajax({
url: 'www.google.com',
type: 'GET',
complete: function (data) {
window.showLoadingEnabled = true;
console.log(data);
}
});
}
Global variables should not be used in javascript files. However, this is the simplest solution, I can find.
I prefered the third solution for my project.
Was hoping to use the popup and I am pretty sure I am trying to use it incorrectly. Any ideas on how this should work? Can you use the popup in this manner?
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
data = $.trim(data);
//$("#notification").text(data);
$("#notification").popup(data); }
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "sendmsg.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
I'm assuming you are trying to use the JQM popup widget, first your missing the closing } from your onError function. Second to use the popup widget you can first set the data
$("#myPopupContent").text(data)
Then to display you use the open method
$("#myPopup").popup("open")
I have just started to use slickgrid (++ to the author btw) - running into a few small issues - I want to dynamically update some fields using the in-context editing. Once editing is done I wish to send this to the server which also should validate what was sent. If there is an error I would like to handle the error in a similar way to how the validatr event works? e.g. highlight the cell and not let the user to move away until it is valid, however I do not see how I can do so? any advice on this would be much appreciated!
Code so far...
grid.onCellChange.subscribe(function(e, args) {
var item = args.item;
var column = args.cell;
var row = args.row;
var value = data[args.row][grid.getColumns()[args.cell].field];
var id = args.item.id;
var field = grid.getColumns()[args.cell].field;
var dataString = "id="+id+"&field="+field+"&value="+value;
var status = false;
$.ajax({
type: "POST",
url: "/en/<?php echo $this->controller; ?>/updateattribute/&callback=?'",
data: dataString,
dataType: "json",
success: function(a) {
console.log(data);
if(a.status == true) {
status = true;
} else {
status = false;
}
return false;
}
});
if(!status) {
return false;
}
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
Many thanks
Ajax requests are, by default, asynchronous, which means that
if(!status) {
return false;
}
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
will probably be executed before the success callback. A couple different solutions:
Make the ajax request synchronous (not recommended):
$.ajax({ ... async: false, ...})
Put all of the code that follows the ajax request in the success or complete callback. Something like this (not tested):
grid.onCellChange.subscribe(function(e, args) {
// snip...
$.ajax({
type: "POST",
url: "/en/<?php echo $this->controller; ?>/updateattribute/&callback=?'",
data: dataString,
dataType: "json",
success: function(a) {
console.log(data);
if(a.status) {
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
}
}
});
});
jQuery's deferred object can also provide a clean way to write this.
I would recommend one of two options:
Submit your change to the server for validation. Display a spinner to visually indicate that a background process is running and temporarily disable editing and cell navigation while the validation is going on. When you've received the response, re-enable the editing and navigation or switch the cell back into edit mode and display a validation error.
Same as above, but keep the navigation going, just disable the editing. Add an onBeforeCellEdit event handler to display a gentle message to the user informing them that a cell cannot be edited because the server hasn't responded yet and cancel the edit.