I am using jConfirm dialog for confirmation in jqgrid. All i want is when the gridComplete triggers it should popup a jConfirm dialog with Ok and cancel buttons when i hit ok it should setSeletion of Rows in jqgrid. My code is as follows:
// My ajax call in gridComplete function in jqgrid
function listSelectedUsers(data) {
$.ajax({
cache: false,
async: true,
type: "POST",
url: urlPath,
data: { countryID: countryID},
dataType: "json",
success: function(data){
jConfirm(data, 'JqGrid Popup', function(confirmation) {
if (confirmation) {
}
});
},
error: function(data) {
}
});
}
//jqgrid code
// on gridComplete function call, does not show up jConfirm dialog popup.
gridComplete: function() {
listSelectedUsers(data);
},
Please suggest me the solution ASAP.
Thanks in advance.
Related
I have links like following.
Deneme Müşteri 2
Deneme Müşteri 2
I want to use jquery ajax post like this:
$(".customer_details").click(function () {
$.ajax({
url: $(this).attr("href"),
type: 'POST',
beforeSend: function () {
},
complete: function () {
},
success: function (result) {
$("#customer_operations_container").html(result);
},
error: function (result) {
alert("Hata!");
}
}); //end ajax
});
Or this:
$(".customer_details").click(function () {
$("#customer_operations_container").load($(this).attr("href"));
});
And Action Method
public ActionResult _EditCustomer(int CustomerId)
{
// get customer from db by customer id.
return PartialView(customer);
}
But I cant do what I wanted. When I click to link, PartialView does not load. It is opening as a new page without its parent. I tried prevent.Default but result is the same.
How can I load the partialView to into a div?
Note: If I use link like this <a href="#"> it works.
Thanks.
Maybe the problem is with the actionresult, try with Content to see if that changes anything.
public ActionResult _EditCustomer(int CustomerId)
{
// get customer from db by customer id.
return Content(customer.ToString());
}
Try one of these...
$(".customer_details").click(function (e) {
e.preventDefault()
$.ajax({
url: $(this).attr("href"),
//I think you want a GET here? Right?
type: 'GET',
beforeSend: function () {
},
complete: function () {
},
success: function (result) {
$("#customer_operations_container").html(result);
},
error: function (result) {
alert("Hata!");
}
}); //end ajax
});
Or
$(".customer_details").click(function (e) {
e.preventDefault();
$("#customer_operations_container").load($(this).attr("href"));
});
Or
$(".customer_details").click(function (e) {
e.preventDefault();
$.get($(this).attr("href"), function(data) {
$("#customer_operations_container").html(data);
});
});
If none of this works, check if there's any js errors
The problem is when you click on the link you already start navigation to it. So just use e.preventDefault() or return false from the click method to prevent the default behavior
$(".customer_details").click(function (e) {
e.preventDefault();
...
}
This should help you out:
$.ajax({
url: $(this).attr("href"),
type: 'POST',
beforeSend: function () {
},
complete: function () {
},
success: function (result) {
$("#customer_operations_container").html(result);
},
error: function (result) {
alert("Hata!");
}
}); //end ajax
return false;
The only thing you where missing is the prevention of A tag working. By returning false your custom event is called and the default event is not executed.
Try this
$(function(){
$(".customer_details").click(function (e) {
e.preventDefault();
});
});
Using ready event
Demo: http://jsfiddle.net/hdqDZ/
I do ajax post on my mvc app when dropdown change.
$(function () {
$('#meters').change(function () {
var analizor_id = $(this).val();
if (analizor_id && analizor_id != '') {
$.ajax({
url: '#Url.Action("AnalizorInfoPartial", "Enerji")',
type: 'GET',
cache: false,
data: { analizor_id: analizor_id },
success: function (result) {
$('#TableAnalizorInfo').html(result);
}
});
}
});
});
DropDown
#Html.DropDownList("sno", new SelectList(Model, "sno", "AnalizorAdi"), "-- Analizör Seçiniz --", new { id = "meters" })
Can I show a loading image or anything else during ajax process? (between begin - finish event) and Code example?
EDIT
Can I use like this?
success: function (result) {
$('#TableAnalizorInfo').html(result);
}
begin:function(){
//show image
}
complete:function(){
//hide image
}
Thanks.
Of course, the events you are looking for are beforeSend and complete:
if (analizor_id && analizor_id != '') {
$.ajax({
url: '#Url.Action("AnalizorInfoPartial", "Enerji")',
type: 'GET',
cache: false,
beforeSend: function() {
// Show your spinner
},
complete: function() {
// Hide your spinner
},
data: { analizor_id: analizor_id },
success: function (result) {
$('#TableAnalizorInfo').html(result);
}
});
}
or you could do it globally for all AJAX requests on the page using global AJAX event handlers:
$(document).ajaxSend(function() {
// Show your spinner
}).ajaxComplete(function() {
// Hide your spinner
});
I am using Jquery ui tabs with asp.net webforms and I'm loading the content with ajax. I actually have two problems
I don't know how to load the content for the first tab load. Right now I use the tabsselect to load content via ajax.
$('#contentHolder').bind( "tabsselect", function(event, ui) {
// run ajax request
});
The build in spinner control only seems to work when I use actual paths for the href. But since I have to use pagemethods I need to use an id instead.
One
Two
Three
// ajax request to pagemethod
$.ajax...
Updated Code
// tab initializaztion
var $tabs = $('#followersTable').tabs({ spinner: 'Loading...' });
$tabs.bind("tabsselect", function(event, ui) {
//LoadTabContent(ui.index);
var request = {
'controlName': 'FollowersTab'
};
$(this).tabs({
ajaxOptions: {
type: "POST",
url: "ajax/Followers.aspx/LoadTabContent",
data: $.toJSON(request),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$(container).html(data.d);
},
error: function () {
}
}
})
});
For your first question:
$("your-tabs-selector-here").tabs( "load" , 0 ); this will force your tab first tab to be loaded via ajax.
If I didn't get it wrong; you could use [WebMethod] for your page methods and you can combine your page methods with UI Tabs ajaxOptions. You can play with ajaxOptions for return type and/or method name ..etc
$( "your-tabs-selector-here" ).tabs({
ajaxOptions: {
type: "POST",
url: "Default.aspx/PageMethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}
});
I am invoking a jquery modal dialog in which I have a save button. The save button in turn makes an ajax call and on success an alert box is displayed "Data Saved ! " with an OK button.So far good.
Now after the "Data Saved" alert box is closed, I want to automatically close the previously invoked modal dialog also.Has anyone done anything similar to this ?
$( "#addFriendButton").click(function() {
$( "#addNewFriend" ).dialog({
title: 'Add a new friend.',
height:'auto',
width:'auto',
modal: true
});
});
//end addFriendButton
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
}
});
});
function displayOKAlertBox(message){
$("#alertMsg").html(message);
$( "#alertbox" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
Try the following:
$("#alertbox").dialog({
modal: true,
buttons: {
Ok: function() {
$('.ui-dialog').dialog('close');
}
}
});
Try the following
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
$( "#alertbox" ).dialog("close");
}
});
});
I think that would do it, but maybe I'm mistaken !
I have following code.I show user a fancybox and they click Submit on Form I close fancybox and show them processing on page and do an AJAX post using JQuery. But some how fancybox gets stays open until AJAX form post is completed.Which creates confusion for user .
function BeginProcess(){
$.fancybox.close();
$("#imgProcess").attr("src", "/admin/images/loading_animation.gif");
$('#imgProcess').show();
PostAJAXForm();
}
function PostForm(FormData){
$.ajax({
type: "POST",
url: "process_image.jsp",
data: FormData,
contentType: "application/x-www-form-urlencoded",
async: false,
success: function(response) {
response = $.trim(response);
$('#imgProcess').delay(10000).hide();
return response;
},
error: function(xhr, ajaxOptions, thrownError) {
alert("There was an error. Please undo image and perform action again. " );
$('#lblProcess').delay(5000).hide();
return;
}
});
}
Here's a snippet:
var params = $(this).serialize();
var self = this;
$.ajax({
type: 'POST',
url: self.action,
data: params,
beforeSend: function(){
alert('Closing');
$.fancybox.close();
},
success: function(data){
alert('Finished processing form');
return false;
},
dataType: 'json'
});
Sorry if something is messed up or left out from that snippet - but you should get the idea.
You need to add $.fancybox.close() in Jquery' Ajax's beforeSend function.
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/ajaxSend/
This should help you out too
http://snipplr.com/view/47979/close-a-fancybox-when-you-submit-a-form-with-ajax