I have a page with has a heading say :
<div class="something"><? some php code ?></div>
In that page I also have an ajax doing a job like:
<script>
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loader").show();
}).ajaxStop(function () {
$("#loader").hide();
});
});
$('#link').on('click', function(e) {
e.preventDefault;
var href = this.getAttribute('href');
$.ajax({
url: href,
success: function(text) {
alert("Added Succesfully");
}
});
return false;
});
</script>
Now in the success in ajax i also want to refresh the div i mentioned. Only refresh as it is attached to PHP which will fetch data from an external API. Is this possible ?
You could put your php code in an external file and reload your div by calling JQuery load method:
$("#something").load("mycode.php");
I hope it helps you.
link
$.ajax({
dataType: "json",
url: "http://www.omdbapi.com/?i=tt0111161",
success: function (data) {
console.log(data);
$("#movie-data").append(JSON.stringify(data));
With the append function you can insert the data from the ajax call into a div. explanation and example
The append() method inserts specified content at the end of the selected elements.
Tip: To insert content at the beginning of the selected elements, use the prepend() method.
Or maybe this answer can fix your issue
or you can take a look at the jquery load function
Load data from the server and place the returned HTML into the matched element.
This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.
Related
$(document).ready(function () {
$("#livesearch").on("keyup",function(){
var search_term = $(this).val();
$.ajax({
url:"ajax-live-search.php",
type:"POST",
data: {livesearch:search_term},
success: function (data) {
$("#show-search").html(data);
}
});
});
});
My other Js files are not run on jquery ajax function i want to load my MAIN js file to this ajax function how to do it
There is no problem with the code. It is a jQuery code that is used to perform an AJAX call when the keyup event is triggered on an element with the ID of "livesearch". The AJAX call sends the value of the element to the "ajax-live-search.php" file and the response is then displayed in an element with the ID of "show-search".
I need to add a < script > tag with external src and with data-*="" parameters inside a < form >. It is ok if you just add it in page. But if I do it after an ajax request, script reports it can't find data- parameters, and it is outside needed html elements.
I read that jQuery on .append() somehow rearranges < script > tags, and put them in the end (outside needed elements), and looses data- attributes.
Is there any other way to append a script after ajax request with needed data- parameters?
I tried
$('<script>').attr(/*all data params*/)
but it does not work.
Please help
You need to make sure you get the result from your Ajax request in the right place. As this is an asynchronous operation, it might be that you're data parameters are not populated at all.
The following code sends a request when you click the button and gets the result in the callback function :
function callback(data) {
// Got result from AJAX, play with DOM + jQuery here
console.log("callback called, data : ", data);
$("#callbackResultId").html(JSON.stringify(data));
}
$(document).ready(function(e) {
$("#textAjaxButtonId").click(function(){
$.ajax({
url: '/echo/json',
type: 'POST',
dataType: "json",
data: {
json: JSON.stringify({
'attr': 'value'
})
},
success: function(data, status, xhr){
callback(data);
}
});
})
});
http://jsfiddle.net/uemaft67/
The callback function is the place where you would get your Ajax response, and therefore build the DOM nodes along with the needed attributes.
Hope this helps!
In my HTML page , I have the following div:
<div id="notification"></div>
An ajax call add some attribute to that div after receiving successful response.This is what the ajax success does:
$("form").on("submit", function (e) {
e.preventDefault();
$.ajax({
dataType: 'json',
type: "POST",
url: "/dummy/url",
data: {Redacted},
success: function (data) {
$('#notification').attr({'data-status': data['status'], 'data-message': data['message']});
$('#notification').click();
$('#notification').removeAttr("data-status data-message");
}
});
});
The problem is the attributes of #notification does not go away after using removeAttr. I mean it removes the attributes from the page, but remains as cached. Thats why I am getting same data-message on every click though the server returns different data-message.
For example:
In my first ajax call, server returned:
{"status":"success","message":"Invitation sent"}
In this case the #notification triggers and shows me data-message="Invitation Sent". But in my second call server returned:
{"status":"danger","message":"Invitation sending failed"}
But #notification shows data-message="Invitation Sent" again.
Any suggestion for me on this? How can I remove the cached data? Or is there any alternative of what I am doing up there?
Instead of using attribute, use data(). If you had already used data() to read the attribute it is going to be cached as a property of the element.
success: function (data) {
var elementData = {
status: data['status'],
message: data['message']
}
$('#notification').data(elementData);
$('#notification').click();
// not sure why it needs to be removed here
// if it does use `removeData()
}
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;
};
}
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.