ajax didn't call after success another js function - javascript

I am trying to make a ajax post. I just want to learn how can i call some function after ajax success.
I want to call the following function after ajax success:
function col() {
var $container = $(".post-users-body");
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: ".collectionPostWrap",
itemSelector: ".collectionPostWrap"
});
});
}
The ajax post is this:
$("body").on("click","#update_button",function() {
var updateval = $("#update").val();
var dataString = 'update=' + updateval ;
$.ajax({
type: "POST",
url: "requests/post.php",
data: dataString,
cache: false,
success: function(html) {
$(".post-users-body").prepend(html);
col();
}
});
return false;
});
So the ajax post is working fine but it is not calling the col(); function.
What i am doing wrong here. Anyone can tell me ?

ajax returns a promise object. use that and do some function chaining.
<script>
(function(){
function col(){
alert("col called");
}
$.ajax({
type:"GET",
url:"http://localhost:5850/api/someservice"}
).done(function(){
debugger;
col();
});
})()
</script>

Related

How to invoke a method from ajax success function?

I've a jQuery with ajax using to fetch some data from a servlet
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url:'ServiceToFetchDocType',
type:'post',
cache:false,
success: function(response){
//some data fetched from ServiceToFetchDocType
//Need to invoke another method here
}
});
</script>
Is it possible to invoke another method inside the success function and get some value?
I've very new to jQuery and ajax, any kind of help is appreciated.
$(document).ready(function() {
$.ajax({
url: 'ServiceToFetchDocType',
type: 'post',
cache: false,
success: function(response) {
/* invoke your function*/
yourFunction();
}
});
});
you can do something like this
var invokeAfterSuccess = function() {
}
var successFunction = function(response) {
/* do something here */
invokeAfterSuccess()
}
$.ajax({
url:'ServiceToFetchDocType',
type:'post',
cache:false,
success: successFunction
})
/*--------------- OR -------------*/
$.ajax({
url:'ServiceToFetchDocType',
type:'post',
cache:false
}).done(successFunction)
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url:'ServiceToFetchDocType',
type:'post',
cache:false,
success: function(response){
Myfunction(); //this is how you can call function
}
});
Myfunction(){
alert("hiii")
}
}
</script>
// thats how it will work
[success: function (data) {
TypeOfReportDropdown.closest("form").find("div\[id$='MonitoringChemicalData'\]")\[0\].innerHTML = data;
var hours = $("#UptimeHourYear").val();
var emissions = round(parseFloat(($("#AverageMassLoadOut").val() * hours) / 1000), 1);
$("#Emissions").val(emissions);
$("#TotalEmissions").val(emissions);
$(this).delay(3000).queue(function () {
var emissieTotal = 0;
var totalHAP = 0;
$('\[data-emissie\]').each(function () {
emissieTotal += Number($(this).data('emissie'));
var hap = $(this).data('hap');
if (hap == "True") {
totalHAP += Number($(this).data('emissie'));
}
});
var emissieFinalTotal = round(emissieTotal, 3);
$('#TotalEmissionForOnlineInstruments').html(emissieFinalTotal);
var totalHAPFinal = round(totalHAP, 3);
$('#TotalHAPForOnlineInstruments').html(totalHAPFinal);
});
}][1]

Using "Bind" for simple ajax up/down vote function

I have a simple ajax up/down vote function.
I would like to rebind this "voteClickEvent" on success of ajax call for the opposite vote. Must I put this in a seperate function in the success call? Or can I do this more elegantly?
var voteClickEvent = function() {
var upOrDown = $(this).attr('id');
var that = $(this);
$.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {upOrDown: upOrDown, action: "updateVote"},
dataType: "json",
success: function(data) {
console.log(data.output);
that.unbind("click");
that.css("cursor", "default");
if (data.output == "up") {
$("#down").bind("click", voteClickEvent);
} else {
$("#up").bind("click", voteClickEvent);
}
}
});
return false;
}
$("#up, #down").bind("click", voteClickEvent);

jQuery ajax working in chrome but not in IE 9

Following jQuery snippet works in chrome but not in IE-9
What am I missing.
First Alert shows in both IE and Chrome but Second one works only in Chrome.
getBeaconXML: function ()
{
var myself = this;
var beaconUrl = this.beaconXMLUrl;
alert("Url : " + beaconUrl);
$.ajax({
async: false,
url: beaconUrl,
dataType: "xml"
})
.done(function (data) {
alert("Reach done");
myself.bXML = data;
myself.parseBeaconId();
myself.parseUseKey();
myself.parseBeacons();
});
},
http://api.jquery.com/jQuery.ajax/
In the documentation there is no method done. Try success or complete depending on the task.
try this..
getBeaconXML: function ()
{
var myself = this;
var beaconUrl = this.beaconXMLUrl;
alert("Url : " + beaconUrl);
$.ajax(
{
async: false,
url: beaconUrl,
dataType: "xml",
success: function(data)
{
alert("Reach done");
myself.bXML = data;
myself.parseBeaconId();
myself.parseUseKey();
myself.parseBeacons();
}
});
},

Can we have two or more function call in jquery-ajax success

I have request to webservice and getback xml result as output , In sucess function can i have a two or more function call
function searchLocationNear() {
// Get the radius using jQuery
var radius = $("#radiusSelect").val();
// Make Ajax call using jQuery
$.ajax({
type: "POST",
data: "keyword1=&streetname=&lat=&lng=&radius=" + radius,
url: "WebService1.asmx/GetList",
success: function (response) {
var xml = GXml.parse(response.xml);
....
.....
var marker=createmarker(...........);
var sidebar cretesidebar(.........);
},
error: function (response) {
alert(response);
}
});
}
function createmarker(..........)
{}
function createsidebar(....)
{
}
Yes you can. Don't forget the assignment symbol var sidebar = cretesidebar(...);

Javascript when to show results

This is my Javascript below I want to show records on load and also show new records when added to the database
showrecords(); displays the records in the database where abouts can I put this in my code where it will work correctly.
$(document).ready(function()
{
//showrecords()
function showrecords()
{
$.ajax({
type: "POST",
url: "demo_show.php",
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
$("#flash").hide();
}
});
}
$(".comment_button").click(function() {
var element = $(this);
var test = $("#content").val();
var dataString = 'content='+ test;
if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400)
.html('<img src="http://tiggin.com/ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "demo_insert.php",
data: dataString,
cache: false,
success: function(html){
// $("#display").after(html);
document.getElementById('content').value='';
$("#flash").hide();
//Function for showing records
//showrecords();
}
});
}
return false;
});
});
Though polluting the global namespace is not recommended. Here is what I would recommend for your code. Move the showRecords() out of Document ready function and refactor the update ajax code to another function 'updateRecords()'. Have only the event bindings inside the document ready function.
You could return the entire comments as response to POST 'demo_insert.php' service and call 'showRecords()' in the update service success callback.
i've pasted below (untested) code that i think should get the job done. in order to call functions you've got to define them in an accessible area, whether in the "global" (can be called from anywhere) namespace as i've done below, or as part of an another object.
you also need to make sure your functions are defined before you try to call them, as everything works in a top down manner.
function showrecords() {
$.ajax({
type: "POST",
url: "demo_show.php",
cache: false,
success: function (html) {
$("#display").after(html);
$('content').val('');
$("#flash").hide();
}
});
}
function addComment() {
var test = $("#content").val();
var dataString = 'content=' + test;
if (test == '') {
alert("Please Enter Some Text");
}
else {
$("#flash").show();
$("#flash").fadeIn(400)
.html('<img src="http://tiggin.com/ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "demo_insert.php",
data: dataString,
cache: false,
success: function (html) {
//$("#display").after(html);
$('content').val('');
$("#flash").hide();
//Function for showing records
showrecords();
}
});
}
}
$(document).ready(function () {
showrecords()
$(".comment_button").click(function () {
addComment();
return false;
});
});

Categories

Resources