Develop Reference

Calling a javascript function from a link generated from a ajax call

I have a javascript function.
I'm making a AJAX call, and in that recieved content there is a link that I want to call the javascript function with.
MyJavascriptFunction(bla){
alert (bla);
}
Result from ajax = "Click
Do I have to do anything special with the result from AJAX to get this to work or should it just work.
I have tried it like this but with no success with clicking the link.
The AJAX call:
function doSearch() {
var form = $('form');
$.ajax({
url: "doSearch.php",
type: "GET",
data: form.serialize(),
success: function(result){
document.getElementById("result").innerHTML=result;
}
});
}
In the php I'm printing out
Click

First of all, try it. But yes you have to do something with the AJAX result. It has to be put somewhere in the DOM or the user won't be able to click on it.
Plus, make sure that the javascript function is a top level. I would suggest you use event handlers instead though.

Change your <a> tag to:
Click

You are mixing jQuery and DOM. that is not pretty
try this - assuming you do not have more than one link in the html
success: function(result){
$("#result").html(result).find("a").on("click",function() {
MyJavascriptFunction(bla);
return false;
};
}

How can one trigger a function onchange of a div?

Here's a question which has proved very difficult to find an answer online for.
Let's say a user runs an ajax function onclick to fill the contents of a div.
But, what if the ajax output is php, and for that onclick, i want other divs on the page to change in a manner that is dependent on the contents of div1?
This means I need to wait for div1 to actually change so i can use the ajax output of the php calculations to adjust div2 accordingly.
After some testing i've found out that i cant add a call to a second ajax function at the end of the first because it seems to run before the div content from the first ajax call actually changes.
So how can i trigger an ajax call onchange of the contents of a div?

All ajax calls take a callback to run when the call completes, put your logic in there.

You could use Jquery
$('#div1').change(function(){
doAjax( $(this).html() );
});
Or in the callback of the ajax
$.ajax({
url: 'http://yoururl.com',
type: 'post',
data: { key: value },
success: function( data ){
doAjax( data );
}
});

If you are aware of jquery, this is what you should try:
$.ajax({
traditional: true,
type: "post",
url: '<your_url>',
beforeSend: function () {
//your logic to perform operation before ajax request
},
data: {
//data to send
},
success: function(response) {
//your logic to perform operation after ajax request
//here make another ajax request
}
});

How to Select Text in an Element (akin to highlighting with your mouse) on newly created ajax content?

I'm using the selectText function from here https://stackoverflow.com/a/987376/784637
However when I called this function immediately after an ajax request on the newly created element:
selectText('some-newly-added-element')
I get the following error in firebug
NS_ERROR_DOM_NOT_OBJECT_ERR: Parameter is not an object
[Break On This Error]
range.selectNodeContents(text);
Note that I am able to call this function after the ajax request on the same element like so
$('#container').on('click', '#some-newly-added-element', function(){
selectText('some-newly-added-element');
});
Is there a way to call this function immediately after the ajax request is done?

Re: Is there a way to call this function immediately after the ajax request is done?
Do you mean after success of the ajax success. or http://api.jquery.com/jQuery.ajax/
or This should help: Execute function after all ajax .load() requests are finished
Hope this fits the cause :)
Sample
$.ajax({
url: this.html_url,
cache: false,
success: function(html){
doSomething();
return true;
}
});

use complete callback which will trigger after ajax call
$.ajax({
complete: function(){
selectText('some-newly-added-element');
}
});
Documentation for ajax event: http://docs.jquery.com/Ajax_Events

Can ajax call on return add new javascript function to the page?

I have a jQuery ajax call that returns html of a table. Now I need to let user to do some javascript action on the table.
Can the return ajax response contain the javascript code or do I have to load the javascript code in the page on the first load of the page?
The user has the option of triggering the 'new' javascript. It doesn't have to triggered on ajax call.

To answer the actual question, the return response can contain the script. Simplest is to place it after the html, as the ready event has already fired in page it is being loaded into

You can use the success (or other event) callbacks provided with jQuery .ajax() to perform this JS action. Something like this:
$.ajax({
success: function(){
// Perform JS action
}
}
The jQuery API lists all such event callbacks available for AJAX calls. Check this for more info.

The returned ajax response can contain javascript code as a string. Then you can eval(response).

If you want to request a script with ajax that will be run when retrieved, then you can use jQuery's getScript() method to retrieve it and then execute it.
Per the jQuery doc, getScript() is a shorthand for:
$.ajax({
url: url,
dataType: "script",
success: success
});
Which shows that jQuery's ajax command will handle a returned script for you automatically if you set the data type appropriately.

You can make your request a variable and extend upon it after the set up.
// Make the request to the server
var dataID = $("#WhatINeedForAParameter").val();
var request = $.ajax({
url: "PageOrControllerOrWebApi/MethodName",
type: "POST",
data: { id : dataID },
dataType: "json"
});
// When the request is done process
// what you need done
request.done(function(msg) {
alert('You got this ' + msg);
});
// If the request failed you can
// see what the problem was and
// handle the situation accordingly
request.fail(function(jqXHR, textStatus) {
alert( "Your request failed: " + textStatus );
});

you can do it using success callback i think this can be a way please try
$.ajax({
.....,
.....,
success:
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#tableID").append( script );
});
i hope it should help.

Trying to read var before jsonp request is done

I'm trying to create a variable from the result of a jsonp request, and the use this variable later in the script. But it seems like the part where the variable is used is triggered before the jsonp request is done.
function onSuccess(data) {
var result = data['result'];
console.log(result);
}
function onError(data) {
alert(data);
}
$.ajax({
url:"http://suneeriksen.unboxer.org/",
cache: false,
dataType: 'jsonp',
jsonp: 'callback',
timeout: 5000,
success: onSuccess,
error: onError
});
var gallery,
el,
i,
page,
dots = document.querySelectorAll('#nav li'),
slides = result //this is where I try to fetch the variable
];
I've tried to figure out how this could be done. I've tried to put the jsonp request in a function and done like this:
var slides = jsonpResult();
Any clue what to do?
EDIT:
I also have functions using the gallery variable
gallery.onFlip(function () {
//Doing stuff
}
And I can't put all of these in the onSuccess function.

Bind it for onSuccess - don't call the function that uses it until onSuccess occurs.
You could also force your request to be synchronous (no code will execute until your ajax has run) but I highly recommend you don't.

There are two ways:
Make the AJAX call not A(synchronous) by setting async: true at the ajax call options (please note that this approach is now deprecated).
or:
do call whatever code that uses the slides variable from inside the success callback (and do the assigning there as well, if you need it for future use).