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).
Related
I try to insert data using id in my url like this.
absent
present
My route is:
Route::get('/present/{id}', 'UserController#present')->name('present');
Route::get('/absent/{id}', 'UserController#absent')->name('absent');
Route is working. but the page is loading, I try to insert data without loading. I know how to insert data using ajax HTML form way. but how to insert using id use ajax?
If you want to insert data without reloading you have to bind JavaScript functions to the HTML links you specified. This example is different but you can use the same approach to achieve your need.
I propose, that you change your anchor tags to buttons and add a class to them and save their routing endpoints in data attributes:
<button class="action_buttons" data-route="{{route('absent', $User->id)}}">absent</button>
<button class="action_buttons" data-route="{{route('present', $User->id)}}">present</a>
And, then use JQuery event handling to detect when they are clicked and then simply use Ajax to get the related route from the button's data attribute and send a GET request to that route:
$('.action_buttons').on('click', function(){
// Get the route data from the tag.
let route = $(this).data('route');
$.ajax({
url: route,
type: 'GET',
success: function(resp) {
console.log(resp);
}
});
});
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.
This is my current situation and problem. I have 2 dropdowns, when I change selection in first, second populates with data depending what I have chosen (for that it uses ajax of course).
When I submit data to the #Controller, it returns me to the same page, and when I try to do the same action again (choose select option in first dropdown to get valid information in second) no matter what I select I get information from previous request (old one before I was returned to that page). That is: Controller gets wrong information (old one from previous page) that for it it populates second dropdown with that old request info.
Like my ajax call has some caching turned on and uses old info. This is how it looks like in my code
<portlet:resourceURL var="getURL" id="dataurl" escapeXml="false"></portlet:resourceURL>
The scripts:
<script>
var type = $("#pi_selectType option:selected").val();
$.ajax({
method : "POST",
url : "${getURL}",
data : {
info1: "${PO.data1}",
info2 : type
},
dataType : "json",
success : function(data) {
....
});
<script>
I have tried to add parameter in ajax call:
cache: false
but problem remains.
Is there a way to reset Portlet url after ResourceMapping Request, or something like that, because I think that might solve this problem. Any suggestions are welcome.
Use current timestamp as third parameter. I have encountered such problem in the the past and this is how I solved that.
data : {
info1: "${PO.data1}",
info2 : type,
info3 : <current timestamp long>
},
By appending current timestamp as a parameter to the request, it is always treated as a new request.
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)
}