The following code called when clicked a button and call the insert
_all function that is an ajax function. In success I put an alert but not working the json call liquidations_a_insert_all.jsp is working fine.
$(document).ready(function() {
$('#click1').click(function(event) {
var auditorid = $('input:hidden[id=Wauditorid]').val();
$.ajax({
type: 'GET',
url: 'groupauditors.jsp',
data: {
Woauditorid: auditorid
},
dataType: 'json',
success: function(data) {
$.each(data, function(index, element) {
var currRow = $("#tr0").clone().appendTo($('#items')).attr('id','tr' + (index + 1));
currRow.find('td:eq(0)').html(index + 1);
currRow.find('.subgroupid').html(element.subgroupid);
currRow.find('.auditorid').html(element.auditorid);
insert_all(element.auditorid, "", "");
});
}
});
});
});
that call the insert_all(element.auditorid, "", "");
function insert_all(auditorid, onSuccess, onFail) {
$.ajax({
type: 'GET',
url: 'liquidations_a_insert_all.jsp',
data: {
Wauditorid: auditorid
},
dataType: 'json',
success: function(data) {
alert("insert_all");
//$( 'table tbody tr td:last-child').html(data.inserted);
}
});
}
Any idea?
I hope Using async:false, in Both ajax Function
$(document).ready(function() {
$('#click1').click(function(event) {
var auditorid = $('input:hidden[id=Wauditorid]').val();
$.ajax({
type: 'GET',
url: 'groupauditors.jsp',
data: {
Woauditorid: auditorid
},
async:false,
dataType: 'json',
success: function(data) {
$.each(data, function(index, element) {
var currRow = $("#tr0").clone().appendTo($('#items')).attr('id','tr' + (index + 1));
currRow.find('td:eq(0)').html(index + 1);
currRow.find('.subgroupid').html(element.subgroupid);
currRow.find('.auditorid').html(element.auditorid);
insert_all(element.auditorid, "", "");
});
}
});
});
});
function insert_all(auditorid, onSuccess, onFail) {
$.ajax({
type: 'GET',
url: 'liquidations_a_insert_all.jsp',
data: {
Wauditorid: auditorid
},
async:false,
dataType: 'json',
success: function(data) {
alert("insert_all");
//$( 'table tbody tr td:last-child').html(data.inserted);
}
});
}
Related
I have two ajax json. One for a chat userlist column and the other for the message history of each user.
When clicking on a $('.member_list ul li') element ... the second ajax sends the value of the li as json to the db and on success the appropriate messages get loaded and appended to $('.messaging-history ul').
But when I have previously clicked on a $('.member_list ul li') element ... I get valSessionID multiple times when clicking on $("#messagetest") depending on how often an $('.member_list ul li') element was clicked on.
How can I prevent this so valSessionID alerts only once when clicking on $("#messagetest")? That's my setup:
var valSessionID;
$.ajax({
url: "/chat_userlist.php",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, item) {
$('.member_list ul').append('<li value="'+data[i].id+'"><div><span><span class="messaging-data-username">'+data[i].username+'</span></span></div></li>');
//var valSessionID;
});
//var valSessionID;
...
$(".member_list ul li").click(function() {
valSessionID = $(this).attr('value');
$.ajax({
url: "/chat_messaging.php",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: mergedJSONChat,
success: function (data) {
$.each(data, function (i, item) {
$('.messaging-history ul').append('<li><div class="message my-message">'+data[i].message+'</div></li>');
});
}
});
$("#messagetest").click(function() {
alert(valSessionID);
});
});
}
});
Start by putting your events outside your ajax call like so:
var valSessionID;
$.ajax({
url: "/chat_userlist.php",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, item) {
$('.member_list ul').append('<li value="'+data[i].id+'"><div><span><span class="messaging-data-email">'+data[i].username+'</span></span></div></li>');
//var valSessionID;
});
}
});
$(".member_list ul li").click(function() {
valSessionID = $(this).attr('value');
$.ajax({
url: "/chat_messaging.php",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: mergedJSONChat,
success: function (data) {
$.each(data, function (i, item) {
$('.messaging-history ul').append('<li><div class="message my-message">'+data[i].message+'</div></li>');
});
}
});
});
$("#messagetest").click(function() {
alert(valSessionID);
});
EDIT:
You must use
$(document).on('click', '#element', function() {
//code here
});
for dynamically loaded elements, because
$('#element').on('click'
Will only bind once, so if your element doesn't exist yet it wont work, the $(document) will check all the elements matching every time the event is triggered.
var valSessionID;
$.ajax({
url: "/chat_userlist.php",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, item) {
$('.member_list ul').append('<li value="'+data[i].id+'"><div><span><span class="messaging-data-email">'+data[i].username+'</span></span></div></li>');
//var valSessionID;
});
}
});
$(document).on('click', '.member_list ul li', function() {
valSessionID = $(this).attr('value');
$.ajax({
url: "/chat_messaging.php",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: mergedJSONChat,
success: function (data) {
$.each(data, function (i, item) {
$('.messaging-history ul').append('<li><div class="message my-message">'+data[i].message+'</div></li>');
});
}
});
});
$(document).on('click', '#messagetest', function() {
alert(valSessionID);
});
I have a webservice method that takes the id of an element to determine the source for autocompletes.
In a nutshell, I'm doing this:
$("input[type='text']").autocomplete({
source: function(request, response) {
var id = $(this).attr('id');
var params = {'id': id, 'term': request.term};
var jsonParams = JSON.stringify(params);
$.ajax({
type: "POST",
url: "Page.aspx/GetAutoCompleteList",
data: jsonParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
response(JSON.parse(msg.d));
},
error: function() {
response([]);
}
});
}
});
But id isn't referring to the original selector.
What can I do to get the id of the selected input element? Or what is a better strategy for this?
You'd need to maintain a context of each input element, something like this:
$("input[type='text']").each(function (i, ele) {
ele = $(ele);
ele.autocomplete({
source: function (request, response) {
var id = ele.attr('id');
var params = {'id': id, 'term': request.term};
var jsonParams = JSON.stringify(params);
$.ajax({
type: "POST",
url: "Page.aspx/GetAutoCompleteList",
data: jsonParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// ...
},
error: function () {
// ...
},
async: false
});
}
});
});
Try
$(this.element).prop("id");
this.element[0].id;
$(this.element.get(0)).attr('id');
JSFIDDLE
$("input[type='text']").autocomplete({
source: function(request, response) {
var id = $(this.element).prop("id");
var id2=this.element[0].id;
var id3=$(this.element.get(0)).attr('id');
console.log(id);
console.log(id2);
console.log(id3);
var params = {'id': id, 'term': request.term};
var jsonParams = JSON.stringify(params);
$.ajax({
type: "POST",
url: "Page.aspx/GetAutoCompleteList",
data: jsonParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
response(JSON.parse(msg.d));
},
error: function() {
response([]);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="asd"></input>
I using the mvc controller with ajax. I perfom the task using the jquery confirm box. when i click the "ok" button its needs to the call another ajax and its link to the another controller but its not working
Sample code:
function button_click() {
$.ajax({
type: 'POST',
url: 'url',
data: {data},
dataType: 'json',
success: function (data) {
if (data.success == true) { call(data); }
else { alert(data.data); }
}
});
}
function call(data)
{
var ans = confirm(data)
if(ans)
{
$.ajax({
type: 'POST',
url: '#(Url.Action("StudentList", new { Area = "Mec", Controller = "HOD" }))',, // this url not goes to the controller
data: {data},
dataType: 'json',
success: function (data) {
if (data.success == true) { alert(data.data); }
else { }
}
});
} else { }
}
i have tried your code but it worked for me.the difference is that
you need to pass data in correct format. data:data or data:{ data:data } but not data:{data}
function button_click() {
$.ajax({
type: 'POST',
url: 'Demo/Demo_action',
data: { data: "what you want to pass" },
//dataType: 'json',
//contentType: 'application/json',
success: function (data) {
if (data == "hello") {
call(data);
}
}
});
}
function call(data) {
var ans = confirm(data)
if (ans) {
$.ajax({
type: 'POST',
url: '#(Url.Action("Demo_action2", new { Area = "Mec", Controller = "Home" }))',
//url: 'Home/Demo_action2', // this url not goes to the controller
data: { data: data },
dataType: 'json',
success: function (data) {
alert(data);
}
});
}
else
{ }
}
My code looks like this. The problem is, PHP side does it job and returns right value. But ajax doesn't execute things inside success: function. What am I missing?
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
$(this).removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" + $(this).data("id") + "]").toggleClass("SelectedDiv");
}
}
});
return false;
});
Try to cache $(this) before ajax call
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
thisElem=$(this),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
thisElem.removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" +thisElem.data("id")+ "]").toggleClass("SelectedDiv");
return false;
}
}
});
});
Hi I've got a simple question. I've this code below, i use ajax three times in very similiar ways the only things that change are the data passed and the id of the target. Is there a way to group these instructions in a simple one?
Thx
D.
$('#fld_email').focusout(function() {
var request_email = $(this).val();
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=firstname&email="+request_email,
beforeSend: function(){$('#fld_firstname').addClass('ac_loading');},
success: function(msg){$('#fld_firstname').val(msg);$('#fld_firstname').removeClass('ac_loading'); }
});
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=lastname&email="+request_email,
beforeSend: function(){$('#fld_lastname').addClass('ac_loading');},
success: function(msg){$('#fld_lastname').val(msg);$('#fld_lastname').removeClass('ac_loading');}
});
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=phone&email="+request_email,
beforeSend: function(){$('#fld_phone').addClass('ac_loading');},
success: function(msg){$('#fld_phone').val(msg);$('#fld_phone').removeClass('ac_loading');}
});
}
);
try:
$('#fld_email').focusout(function() {
var request_email = $(this).val();
processAjax("fld=firstname&email="+request_email, '#fld_firstname');
processAjax("fld=lastname&email="+request_email, '#fld_lastname');
processAjax("fld=phone&email="+request_email, '#fld_phone');
});
function processAjax(data, id){
$.ajax({type:"GET",
url: "autocomplete.asp",
data: data,
beforeSend: function(){$(id).addClass('ac_loading');},
success: function(msg){$(id).val(msg).removeClass('ac_loading');}
});
}
Use an object and the for control structure:
var fields = {firstname:1, lastname:1, phone:1};
for (field in fields) {
$.ajax({
type:"GET",
url: "autocomplete.asp",
data: "fld=" + field + "&email=" + request_email,
beforeSend: function() {
$('#fld_'+field).addClass('ac_loading');
},
success: function(msg) {
$('#fld'+field).val(msg);
$('#fld'+field).removeClass('ac_loading');
}
});
}