Jquery, Why last function in script not work? - javascript

please tell me where I am making a mistake in this code, all functions except the last one are being processed, I can not understand why. The first 3 functions correctly submit the form and receive a response, the latter also submits the form, but for some reason the response opens on a new page.
jQuery(document).submit(function(e){
var form = jQuery(e.target);
var id = form.attr("action");
var ret = id.replace('/changepswd/','');
if(form.is("#changepswd")){
e.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
document.getElementById("changepswdbtn" + ret).value = '';
alertTimeout(data,1000);
}
});
}
});
jQuery(document).submit(function(n){
var form = jQuery(n.target);
var id = form.attr("action");
var ret = id.replace('/changeemailpass/','');
if(form.is("#changeemailpass")){
n.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
document.getElementById("changeemailpassbtn" + ret).value = '';
alertTimeout(data,1000);
}
});
}
});
jQuery(document).submit(function(q){
var form = jQuery(q.target);
var id = form.attr("action");
var ret = id.replace('/changename/','');
var btns = document.getElementById("changenamebtn" + ret).value;
if(form.is("#changename")){
q.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
if (data == "Имя Успешно Изменено!"){
document.getElementById("changenamelbl" + ret).innerText = btns;
document.getElementById("changenamebtn" + ret).value = '';
alertTimeout(data,1000);
}
else{
alertTimeout(data,1000);
}
}
});
}
});
jQuery(document).submit(function(o){
var form = jQuery(o.target);
var id = form.attr("action");
var ret = id.replace('/changeemail/','');
var btns = document.getElementById("changeemailbtn" + ret).value;
if(form.is("#changeemail")){
o.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
if (data == "Email Успешно Изменен!"){
document.getElementById("changeemaillbl" + ret).innerText = btns;
document.getElementById("changeemailbtn" + ret).value = '';
alertTimeout(data,1000);
}
else{
alertTimeout(data,1000);
}
}
});
}
});

Related

ajax delete after success text field should be empty

this my j query code for delete request
i want after delete text field will be empty
$(document).on('click','.yes_confirm',function() {
var relf=$(this).attr('data-rel');//alert(relf);
if(relf != ''){
var $that = $(this);
event.preventDefault();
var cotext_id = $('input[id="cotext_id_'+relf+'"]').val();
var object_id = $('input[id="object_id_'+relf+'"]').val();
var object_origen = $('input[id="object_origen_'+relf+'"]').val();
jQuery.ajax({
type: "POST",
url: $.ISA.options.base_url + "contest/admin/delete_note/",
dataType: 'json',
data: { cotext_id: cotext_id, object_id: object_id, object_origen: object_origen },
success: function(data) {
$('.popup_main').css('display','none');
$(this).closest('.del_edit_opt').find('input[name="name"]').val('');
},
});
}
});
this is my text field
" value="">

Ajax inside a While Loop Crashes in Javascript

I want a while loop that iterates if the amount paid is greater than zero. But running the code crashes the browser.
var amount = Number($('#payment1').val());
while (amount > 0){
$.ajax({
type: "POST",
url: baseurl + "collection/getSingleAmort",
data: {'contractid':contractID},
success: function(result){
var data = jQuery.parseJSON(result);
console.log(data);
var amortizationAmount = Number(data['amortization'][i].amortization_amount);
amount = amount -amortizationAmount;
},
error: function (errorThrown){
//toastr.error('Error!', 'Operation Done');
//console.log(errorThrown);
}
});
}
function xyz(amount){
$.ajax({
type: "POST",
url: baseurl + "collection/getSingleAmort",
data: {'contractid':contractID},
success: function(result){
var data = jQuery.parseJSON(result);
console.log(data);
var amortizationAmount = Number(data['amortization'][i].amortization_amount);
amount = amount -amortizationAmount;
if(amount>0)
xyz(amount);
},
error: function (errorThrown){
//toastr.error('Error!', 'Operation Done');
//console.log(errorThrown);
}
});
}
var amount = Number($('#payment1').val());
xyz(amount);
Try something like this. Instead of looping recursion is used.
Add async:false
var amount = Number($('#payment1').val());
while (amount > 0){
$.ajax({
type: "POST",
url: baseurl + "collection/getSingleAmort",
data: {'contractid':contractID},
async:false,
success: function(result){
var data = jQuery.parseJSON(result);
console.log(data);
var amortizationAmount = Number(data['amortization'][i].amortization_amount);
amount = amount -amortizationAmount;
},
error: function (errorThrown){
//toastr.error('Error!', 'Operation Done');
//console.log(errorThrown);
}
});
}

filter by a key/value from json Array

here is my code, and i would like to only display items which has "assistance" as tag and no the other. I really don't know how can i do that.
function displayall(newid){
$.ajax({
url: "https://cubber.zendesk.com/api/v2/users/"+newid+"/tickets/requested.json",
type: 'GET',
cors: true,
dataType: 'json',
contentType:'application/json',
secure: true,
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(""));
},
success: function (data){
var sortbydate = data.tickets.sort(function(a,b){ return new Date(b.created_at)- new Date(a.created_at); });
for (i = 0; i < data.tickets.length; i++) {
var myticket = data.tickets[i];
var mydate = data.tickets[i].created_at;
var created = moment(mydate).format("MM-DD-YY");
var mytitle = data.tickets[i].subject;
var description = data.tickets[i].description;
var status = data.tickets[i].status;
var ticketid = data.tickets[i].id;
var tag = data.tickets[i].tags[0];
$("#mylist").append('<li class="row col-md-12 listing" id="newlist" value="'+ticketid+'" onclick="ticketcontent('+ticketid+","+newid+')">'+ '<span class="class_'+status+' otherClasses">' + status + '</span>'+'<div class="identifiant fixed col-md-2">'+" #"+ ticketid +'</div>'+'<div class="identifiant col-md-2">'+tag+'</div>'+'<div class="identifiant col-md-4">'+mytitle +'</div>'+'<div class="identifiant datefixed col-md-2">'+created+'</div>'+'</li>');
}
}
})
}
and if i do console.log(data.ticket[i]) this is what i get:
What you're looking for is:
var filteredTickets = data.tickets.filter(function(ticket) {
return ticket.tags.indexOf('assistance') >= 0;
});
Try using data.tickets.filter():
data.tickets = data.tickets.filter(function(ticket){
return ticket.tags[0] === 'assistance';
});

dynamic select box duplicating results

I'm trying to build mutiple select boxes that dymaically populate then next select box based on the option selected.
it seems to be working but the 3rd select box has duplicate results and i can't see why
here is the JS
$(document).ready(function() {
$('.selectchange').one('change', function() {
var x = $(this).children(":selected").attr("value");
console.log(x)
$.ajax({
type: "POST",
data: "id=" + x,
url: "../complaints/index.php/complaint/get_complaint_sub_types",
dataType: "json",
success: function(data) {
var x = $(this).children(":selected").attr("id");
$.each(data, function(id, value) {
var opt = $('<option />');
opt.val(value.id);
opt.text(value.name);
$('.selectchange1').append(opt);
$('.selectchange2').one('click', function(event) {
var y = $(this).children(":selected").attr("value");
$.ajax({
type: "POST",
data: "id=" + y,
url: "../complaints/index.php/complaint/get_complaint_description",
dataType: "json",
success: function(data1) {
if (data1 != " ") {
var z = $(this).children(":selected").attr("id");
console.log(z);
$.each(data1, function(id, value) {
var opt = $('<option />');
opt.val(value.id);
opt.text(value.name);
$('.selectchange2').append(opt);
})
};
}
})
});
});
}
});
});
})
here is the jsfiddle http://jsfiddle.net/7mg3ume5/2/

moving data to $.ajax's out?

I want to move "data" variable to out of success function for other operation.
$("a[class=note]").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
alert(data);
}
});
});
For example php have Global pharase..
global var(which is the worse solution, but this is what you asked for):
$("a.note").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
window.data = data;
alert(data);
}
});
});
global variable are dangerous, Maybe variable outside the success scope is enough?
Var outside the success callback:
$("a.note").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
var dataFromServer = null;
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
dataFromServer = data;
alert(data);
}
});
});
Last option is to have a hidden input that will store the data;
success: function(data)
{
$('#hiddenFieldId').val(data);
alert(data);
}
Things to notice:
I changed your selector from a[class=note] to a.note which is better.
success is a callback which means it will not be fired until the response reach the client, until then your global\outside var\hidden input value will be null. if you don't want the ajax to be asynchronous you can define it in the options like this:
$.ajax({
async: false, // <---
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
dataFromServer = data;
alert(data);
}
});
$("a[class=note]").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
window.data = data;
}
});
});
Of course you can't use it until the callback fires.
Define var data = null; above all your code, that would be global variable. After that, rename argument for process function and in function body window.data = response;.
EDIT
You can define function to trigger data changes, for example:
var data = null;
function setGlobal(v) {
window.data = v;
alert(window.data);
}
$("a[class=note]").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data){
setGlobal(data);
}
});
});
Try it...

Categories