Prevent Ajax form from being submitted twice? - ajax

Hello looking for some help with my form here.
How would I prevent " $(document).on('submit'..." getting triggered again when submitting it with " $(active_form)[0].submit();"?
Thanks!
$(document).on('submit', active_form, function(e) {
e.preventDefault();
active_form = $('div.account-address-form.visible form');
var vat_input = $('div.account-address-form.visible form input.vat_reg_no');
var but_prim = $('div.account-address-form.visible form .button-primary');
if (vat_input.val()) {
var url = "/apps/vat-check/";
var number = vat_input.val();
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
data: {
number: number
},
beforeSend: function() {
but_prim.prop('disabled', true);
but_prim.css('opacity', '.4');
},
success: function(data) {
var result = data.result;
if (result) {
$.ajax({
type: "GET",
dataType: "jsonp",
url: "/apps/customer-vat/",
data: {
email: "{{ customer.email }}",
vat_no: number,
update: true
},
success: function(data) {
$(active_form)[0].submit();
$(active_form).off("submit").submit();

$(document).on('submit', active_form, function(e) {
e.preventDefault();
if(!active_form.attr('validated'))
{
active_form = $('div.account-address-form.visible form');
var vat_input = $('div.account-address-form.visible form input.vat_reg_no');
var but_prim = $('div.account-address-form.visible form .button-primary');
if (vat_input.val()) {
var url = "/apps/vat-check/";
var number = vat_input.val();
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
data: {
number: number
},
beforeSend: function() {
// disabling button
but_prim.prop('disabled', true);
// set button
but_prim.css('opacity', '.4');
},
success: function(data) {
active_form.attr('validated',true);
var result = data.result;
if (result) {
$.ajax({
type: "GET",
dataType: "jsonp",
url: "/apps/customer-vat/",
data: {
email: "{{ customer.email }}",
vat_no: number,
update: true
},
success: function(data) {
active_form.attr('validated',true);
$(active_form)[0].submit();

Related

jsgrid returns blank line after update

After giving an update via ajax in jsgrid the line returns blank
controller: {
loadData: function(filter) {
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/app/Play/",
dataType: "json"
}).done(function(response) {
data.resolve(response);
});
return data.promise();
},
updateItem: function(item) {
return $.ajax({
type: "POST",
url: "/app/Play/change.php",
data: item,
});
},
}
In the return of the url update: /app/Play/change.php
I return the updated record data in a normal json, same as the initial json used in the load
Resolved:
controller: {
loadData: function(filter) {
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/app/Jogos/app/",
data: filter, // <--Insert line, this is a problem
dataType: "json"
}).done(function(response) {
data.resolve(response);
});
return data.promise();
},
updateItem: function(item) {
return $.ajax({
type: "POST",
url: "/app/Jogos/app/change.php",
data: item
});
},
},

$.ajax() to $.getJSON()

I would like to ask if there is a method to parse data from $.ajax() to $.getJSON() please?
This is the $.ajax() example:
var apiUrl = 'https://api.com/url_here';
var apiKey = 1234567890;
var apiSecret = 0987654321;
var data = {};
$.ajax({
url: apiUrl,
headers: {
"Authorization": "Basic " + btoa(apiKey+ ":" + apiSecret)
},
data: data,
dataType: 'json',
type: 'GET',
success: function(data) {
console.log(data);
},
error: function(data) {
console.log(data);
}
});
And this is what I have in my $.getJSON(), where I have a struggle in calling the headers for authentication:
$.getJSON(apiUrl, function(json){
console.log(JSON.stringify(json));
});
Thanks a lot! xxx

using success event ofjquery / ajax to fill and set dropdownlist value

i have a Ajax request to Fill an edit form like..
function FillLiveDetail(event, LiveID)
{
$.ajax
({
type: "POST",
url: MyUrl + '/GetLiveDetail',
data: '{LiveID: "' + LiveID + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data)
{
var LiveDetail = data.d;
$('#ClassName').val(LiveDetail[0].Title);
$('#ClassDesc').val(LiveDetail[0].Desc);
$('#SearchKey').val(LiveDetail[0].Keys);
$('#Date').val(LiveDetail[0].Date);
$('#Hour').val(LiveDetail[0].Hours);
$('#Minute').val(LiveDetail[0].Minuts);
$('#AM_PM').val(LiveDetail[0].AmPm);
$('#Duration').val(LiveDetail[0].Duration);
$('#rdbLivePrivacy).prop('checked',true);
CategoryList(event, 'MyddlCategory');
$('#MyddlCategory').val(LiveDetail[0].CategoryID);
}
});
}
function CategoryList(event, ddl_Category_ID)
{
var ddl_Category = $('#'+ddl_Category_ID);
event = event || window.event || e.srcElement;
event.preventDefault();
$.ajax
({
type: "POST",
url: ServiceUrl +'/FillAllCategories',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data)
{
var MyCategoryList = data.d;
$(ddl_Category).html('<option value="0" selected="selected">All Category</option>');
for(var m=0; m<MyCategoryList.length; m++)
{
var row = ['<option value="'+MyCategoryList[m].CategoryID+'">'+MyCategoryList[m].CategoryName+'</option>'].join('\n');
$(ddl_Category).append(row);
}
}
});
}
My problem is, I can not change the definition of my function CategoryList() because i used it at many places in my project...
In this context the success: event of CategoryList() function Fire when success: event of FillLiveDetail() function completes that is why i am unable to set the value of MyddlCategory...
please suggest me any thing that may work..
Close the selector quote in this line $('#rdbLivePrivacy').prop('checked',true);
Try setting async property of ajax call to false
$.ajax
({
type: "POST",
async: false,
url: ServiceUrl +'/FillAllCategories',
...

$.ajax within jquery plugin not updating variable

Fiddle: http://jsfiddle.net/gpTpK/
The issue I am having is that the title variable is not updated/changed when the $.ajax is executed, I know that the ajax call is working as I have tried replacing the line
title = $(xml).find("title").text();
with
console.log($(xml).find("title").text());
and sure enough it does return the title however when using the orginal line the variable title doesn't change
I have tried and it does work putting the ajax call outside (function($){})(jQuery);
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
blogID: "",
postID: "",
done: null
};
var options = $.extend(defaults, options);
var title;
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
success: function(xml) {
title = $(xml).find("title").text();
}
});
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
};
})(jQuery);
I have tried the below and i have also tried wrapping the ajax in a function such as getTitle(){ajax code here with return title;}
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
blogID: "",
postID: "",
done: null
};
var options = $.extend(defaults, options);
var title;
getAjax();
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
function getAjax() {
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
async: false,
success: function(xml) {
title = $(xml).find("title").text();
}
});
}
};
})(jQuery);
sorry, I have spent ages trying to figure it (I didn't ask out of laziness :P), regardless here's the solution for those interested :)
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
done: null
};
var options = $.extend(defaults, options);
var title;
var sorf;
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
success: function(xml) {
title = $(xml).find("title").text();
sorf = 1;
},
error: function(){
sorf = 0;
},
complete: function() {
returnvals(sorf);
}
});
function returnvals(sorf) {
if(sorf){
//success
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
}else{// failure}
}
};
})(jQuery);

jquery tooltip Getting undefined value

I am getting value through post method when i am add it into variable it is showing the same value but when i accessing the value from the outside. it showing me undefined.
var Trends =this.$elm.data('title.poshytip');
var value;
var path = window.location.pathname;
var name = path.substring(path.lastIndexOf('/') + 1);
var dataToSend='{ID:"'+Trends+'"}';
$.ajax({
type: "POST",
url: "UnitedStatesTrends.aspx/serverside",
data: dataToSend,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function( data )
{
value = data.d;
},
error: function() {
alert('error');
}
})
//here
alert(value);
// here i am getting value=undefined in alert but my value is 'UnitedStates'
this.$inner.append(
typeof content == 'function' ?
content.call(this.$elm[0], function(newContent) {
self.update(newContent);
}) :
//here i am setting the value to tooltip
content == '[title]' ? value : content
);
Well I think, you are forgetting to put a semicolan ; after this
$.ajax({
type: "POST",
url: "UnitedStatesTrends.aspx/serverside",
data: dataToSend,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function( data )
{
value = data.d;
},
error: function() {
alert('error');
}
});

Resources