Liferay #ResourceURL caching parameters on ajax call - ajax

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.

Related

Do I sent two requests to the ActionResult?

I have an ASP.net MVC project and depending on the filter options chosen by the user I am sending different ajax requests to the same actionresult, for example:
$(document).on("click", "#filter_reset_button", function () {
var url = "/Admin/Index";
ajaxRequest({
url: url,
type: "get",
data: { reset: true },
successCallback: function () {
window.location.href = url;
}
});
});
Other listeners sent different data, something like:
data: { page: 2, filterUpdate: true }
and so on. The Index ActionResult returns different lists of items, depending on different options chosen in the data and the code works completely fine.
A colleage of mine told me, that my code is actually sending two get requests to the AR everytime, so its not efficient. Is that true? And if its the case, how can I refactor it. to make it just one request? If I let window.location.href = url part out, the site actually doesnt load the server response.
Yes you are doing 2 request in button click. First in Ajax Get, Second in Success Call Back.
But Why are you calling window.location.href = url; success call back. ?
If you want update the page after click, you can do partial updates to page. Check this post.
That is correct 2 request called.
First request when you call AJAX get to Action Index in Admin Controller.
Second request when you set window.location.href = url, it will same as you enter /Admin/Index in browser.
In this case you only need window.location.href = '/admin/index?reset=true' in click function
You can see the post here at this post
Actually on success callback you must change your code accordingly to the above post

Ajax query string param are being added to standard get request

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).

Prestashop: How to submit data from adminpanel template to Admin Controller?

I'm trying to make a custom page in the adminpanel of Prestashop where the shopowner can fill in his upcoming events that will appear in a column in the header.tpl page. The templates and controller are working so far, with a structure based on an answer here at Stack Overflow:
How to create a new page in prestashop admin panel?
Now I have made in the content.tpl (with the added custom JavaScript and CSS files) the form with the input fields. The next step is to send it to the controller to save it in the database. But I'm stuck this part. I can't find how I can nicely submit the form to the controller. First I tried it with an Ajax function but I couldn't find the right way. Also without Ajax no success.
$.ajax({
type: 'POST',
headers: { "cache-control": "no-cache" },
url: baseUri + '?rand=' + new Date().getTime(),
async: true,
cache: false,
dataType : "json",
data:{
processEvents: true,
ajax: 'true',
controller: 'AdminEvents',
token: static_token
},
//success: function(jsonData){
//}
});
This is an example of an Ajax function that I tried. My questions:
How does other tpl or js files receive the baseUri, where is that
variable set?
What is the function of the ?rand date and time in that line? A kind
of security token?
What is the url of the controller? Also the url when I use
I guess the processEvents : true and Ajax : true is for security
reasons and to check if the form is submitted by Ajax or not?
Why is it necessary to send the controller name?
Where does the token come from?
Questions about the controller:
Which (Prestashop default functions) can or do need to use? For
example:
if (Tools::isSubmit('name')){
etc.
if (Tools::getValue('create_account')){
etc.
Can I use that functions anywhere or maybe only in an Init function?
A lot of questions, feel free to answer only a part of it, I just need a good push in the right direction, searching and reading in the online documentation and on the internet doesn't brought me the solution and brainwashed me a little.
EDIT:
I made a little progress by myself:
Where does the token come from?
What is the url of the controller? Also the url when I use
With the tools getAdminTokenLite and the controller name I generated the controller url:
$token = '?controller=AdminEvents&token='.Tools::getAdminTokenLite('AdminEvents');
The url to post to is the token plus the domain, admin directory and index.php.
With the tool getValue I get the POST data like in PHP with $_POST["name"].
Tools::getValue('event_name')
So its working but I guess it can be better with other Presta default tools.
I know that it's very late to answer you, but for sure it will help other mates with same problem.
Here is an example about how to implement ajax calls in Prestashop 1.6 on Admin panel using ANY Controller from BackOffice (if you want also, you can use ajax.php controller, but I'm using for this AdminImportController() )
tpl part:
$('#mybtn').click(function(e) {
var data = $('#datalist').val();
// Ajax call with secure token
$.post( "{$current|escape:'html':'UTF-8'}&token= {$token|escape:'html':'UTF-8'}",
{ ajax: true, action: "MyFunction", mydata: data } );
  });
And in admin controller side:
public function ajaxProcessMyFunction()
{
// Get param
$mydata = (int)Tools::getValue('mydata');
$answer = 0;
if( $mydata > 0 ) {
$this->importProfList = Db::getInstance()->executeS(
"SELECT * FROM .... LIMIT 1"
);
...
$answer = $someOperationResult;
}
// Response
die(Tools::jsonEncode(array(
'answer' => htmlspecialchars($answer)
)));
}
Tested and working like a charm.
Regards

What else can I pass to the `form` property of Ext.Ajax.request?

Normally one posts an ExtJS form to the backend using form.submit({...}). I want to make my form submission synchronous now, so I'm switching to using Ext.Ajax.request({async: false, ...}). The form property of Ext.Ajax.request() usually looks like so:
Ext.Ajax.request({
url: 'formsubmit',
form: 'formid',
method:'POST',
success: function(response, opts) {
alert("successfull");
},
failure:function(res,opt) {
alert("request failed");
}
});
I'm dealing with a bunch of anonymous forms right now. Is there any way around this?
Given a var form = {xtype: 'form', items: [...]}
I've tried replacing 'formid' with form.getEl(), form.getForm(), and form.getForm().getFieldValues() which all don't work.
There's no other way around this other than assigning a generated id to each of my anonymous forms, is there.
Thanks for any input
It looks like you could just do this as an alternative to the form attribute:
var form = this.down('form');
Ext.Ajax.request({
url: 'test.xyz',
params: form.getValues()
// etc...
});
getValues gives you the name/value pairs you need for your submission.
It looks like the ExtJS forms do not actually use form elements in the markup. When the submit function is called on an ExtJS form, an HTML form element is crafted as part of the process, and that's the form that is used for the submission.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.action.Submit-method-buildForm
Ideally, you could modify the options that are used in the Ajax request called within the doSubmit function. Since you can't, you might want to consider overriding Ext.form.action.Submit such that you can, then calling the form.submit() function you mentioned in your question.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.action.Submit-method-doSubmit

query string to url with Ajax

I want to update my url, based on some checkboxes...
I now have an url that looks like www.mywebsite.com/index.php?city=Amsterdam
The city parameter I use to get data from mysql and display that on my page. On the page I also have some checkboxes. I want to update the url if a user clicks on a checkbox, refresh the page, and use the new url to make a new query to the database.
On http://api.jquery.com/serialize/ I found something I liked ;) The example on the bottom shows what I want. Only this example displays the result. Can someone help me to get that result in the url ?
So after clicking on some checkboxes I would like to have an url that looks like www.mywebsite.com/index.php?city=Amsterdam&single=Single2&multiple=Multiple3&radio=radio1
I know PHP, but my knowledge of jquery and ajax is 0 ;) I used google to search, but after some hours I still didn't find anything use-full. Is there someone who can help me ?
try this
$.ajax({
url:"www.mywebsite.com/index.php"; // path to your url
type: "get", //post or get
data:$('#yourFormID').serialize(),
success:function(){ //function called when ajax is completed
alert('done');
}
});
If you need to refresh the page with a new url, you need to serialize the form when user click on a checkbox and update the url (updating url will refresh page, if you don't want to refresh page, you will have to user pushstate functionality or a hash in the url).
Try this:
var $form = $('form');
$('#my-checkbox').on('click', function() {
window.location.search = '?' + $form.serialize();
});

Resources