I attempting to load page content on a jQuery Mobile site via an AJAX call to the desktop version of the same site, which is generating the content for each page as a JSON object. I have confirmed that the JSON objects are good (i.e.: if you place the URLs into the browser, a good JSON object displays). The section of each JSON object that I am attempting to display is identified as "content" in the object itself.
On the jQuery Mobile page, I am placing a function to call the relevant JSON object and replace the content of that page with the JSON content. The function is as follows:
function processJSON(url, id){
$.ajax({
url: url,
data: null,
success: $(id).html(response.content),
dataType: 'json',
});//ends ajax
};//ends processJSON
The arguments for the function are as follows: "url" is a variable set equal to the URL of the appropriate JSON object, and "id" is the id of the div the content of which I want to replace with the JSON content. This page is living on the same server as the desktop version of the site, on an "m." subdomain.
When I place this on a test server, I receive an error in the console stating "Uncaught ReferenceError: response is not defined." Does this mean that the function is not receiving any JSON response, or that it cannot identify the "content" section of the JSON object? How do I correct this?
Thanks for your assistance.
from jquery.ajax doucumentation
success Type: Function( PlainObject data, String textStatus, jqXHR
jqXHR ) A function to be called if the request succeeds. The function
gets passed three arguments: The data returned from the server,
formatted according to the dataType parameter; a string describing the
status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object.
success: function(response)
{
$(id).html(response.content)
}
Related
I have an ajax code with parameter like this
var data = {
attr1: 'attr1',
attr2: 'attr2',
}
jQuery.ajax({
type: 'GET',
url: '/report/preview.html',
data: data,
dataType: 'html',
success: function(result){
jQuery('#report-body').html(result);
},
error: function(xhr,a, b){
console.error(xhr.responseText);
}
});
The function generates url - /report/preview.html?attr1=attr1&attr2=attr2.
I have a display table in jsp which does a full reload every page navigation. My problem is that it also append the parameter i set in ajax call to the url in browser.
The url of display table action is /report/reportHome.html. after the ajax call, when i navigate to another table page, the url becomes /report/reportHome.html?attr1=attr1&attr2=attr2. It appended the ajax param to its parameter. How can i remove these parameters? thanks.
Use a form and POST the information.
Use Path variable Ex: /report/attr1/attr2/preview.html
Use Session
Use some encode/decode
I have resolved my problem! The problem happens because the 'requestURI' attribute of the generated display table of the ajax call adds any tag generated parameters to its value. That is why the request param in the ajax call are being appended automatically as query string in the 'requestURI' attribute of the generated table.
I have resolved this by adding the ajax parameters in the 'excludedParams' attribute of the generated table so they won't be added as query string
So it does not matter what type of request the ajax uses(get or post).
This is the script i use for the drop down in the echo table
The echo table
Try passing your data object as text
JAVASCRIPT
$.ajax({
type: "POST",
url: "data.php",
data: JSON.stringify(data1) // use JSON.stringify();
});
Also a note is to make sure your html is echo'd or rendered out before you attempt to bind a javascript function to it. Other wise you will get an error indicating no such html element found.
I have an Ajax which call to an action in a controler.
The controller render:
render template:"changePassword", model:[user: user, passwordError: passwordError]
The passwordError is boolean.
In case the passwordError is true I have to perform function in the js.file.
How can I check in the success's Ajax the value of the passwordError?
The code of the Ajax:
$.ajax({
url: changePassword,
type: "post",
data: {
password: $('#password').val(), npassword: $('#npassword').val()
},
success: function(data,textStatus){
$('#changePassSuceess').modal()
}
});
If you dont need to render a template, you can return a json as #Eylen mentioned and then access the flag from json. If you must render a template then you can have a hidden field in your template with value set to the flag passwordError and then you can get the value of flag from this hidden field in your javascript code
See this question for how to find hidden element in jquery ajax response html
If you don't need to show the template that you are returning, then you can change your return from the controller to something like the following
return [passwordChanged:true] as JSON
Ans then in your ajax call you will have access to the JSON object in the data attribute.
console.log(data.passwordChanged);
Maybe you have to tell also in the ajax call that the return type is json.
In my project i am using springMVC+Hibernet .When EndUser click his/her profile Link i want to show his/her Information .For that i am using ajax in spring MVC .Now my controller return data in the form JSON object but i don't know How to update the object in my view Page.In That Object i have more than 25 fields any one help me how to update JSON object data to my jsp lables(FirstName,LastName.....)
MY code like this
$.ajax({
type: "GET",
url: "AjaxActionController?",
dataType: "json",
success: function(data){
alert(data);
var firstName = data.getFristName();
}
}
NOW i want to Update this data into my view layer
One "simple" way to do it is to set an id on the html element you want the data in and use jQuery to set it. This will get less and less "simple" as your application grows.
html:
<div id="firstName"/>
javascript:
success:function(data){
var firstName = data.getFirstName();
$('#firstName').text(firstName);
}
If you want something more manageable for a large app, the concept is called "data binding". Try a javascript databinding framework, such as Knockout, Ember/Backbone, Angular, Epoxy/Backbone. jQuery can do it too, with some work.
Below is the code snippet which is hitting the url on server and getting the html response.I can see
the response inside firefox debugger but it does not display in div tag.
$.ajax({
url: url,
dataType: 'html',
data: '',
type: 'POST',
success: function(data) {
//in firefox debugger i can see complete html response inside data
$('#displayContent').html(data); // but here, it does not
// append the html inside div displayContent. Instead it makes
// the current page blank
}
});
I don't get what mistake I'm making here Can I not directly assign the ajax html response to an selector(div tag in my case) with $('#displayContent').html(data)?
Instead of using html() method use append i.e.
$('#displayContent').append(data);
Or if you want to assign whole content direct to your element use load method
$(function(){
$('#displayContent').load(url);
});
If you've got a form tag on your page, and you're trying to submit it asynchronously with jQuery, your function will need to return false, to prevent the browser from handling the form.
Example:
$("form").submit(function () {
$.ajax(...);
return false;
});