konapaz
(Konapaz)
December 6, 2013, 10:16am
1
Hi
I have a listbox.
When I select an listbox item I refresh a form that contains an AjaxSubmit button.
The submit button must use different url according to selected item.
The problem:
If the server response html + javascript then all content (javascript+html) will be exist dublicated
If the server response only html (without proccessoutput - see http://www.yiiframework.com/doc/api/1.1/CController#renderPartial-detail ) the AjaxSubmit button javascript will remain the same of the first request
(so the url will remain the same too)
So, which is the best way to refresh the javascript code on AJAX ?
Thanks
Keith
(Kburton)
December 6, 2013, 10:29am
2
I’m not sure quite what you mean. Could you just set up an array of URL’s in the javascript of your first page load, indexed by the dropdown list value? You could change the URL without using the response in that case.
Can you be more specific about the scenarios that you’re trying to capture?
konapaz
(Konapaz)
December 6, 2013, 10:43am
3
Keith:
I’m not sure quite what you mean. Could you just set up an array of URL’s in the javascript of your first page load, indexed by the dropdown list value? You could change the URL without using the response in that case.
Can you be more specific about the scenarios that you’re trying to capture?
Hi Keith
There are thousands listbox items, also the listbox refreshed by another AJAX
So there is no easy way to do that you suggest to me
The code
$this->widget('bootstrap.widgets.TbButton', array(
'buttonType' => 'ajaxSubmit',
'url' => $this->createUrl(...),
'type' => 'primary',
'label' => $model->isNewRecord ? 'Create' : 'Save',
));
generates
jQuery('body').on('click','yw1',function(){jQuery.ajax({'type':'POST','url':'the generated url ','cache':false,'data':jQuery(this).parents("form").serialize()});return false;});
so I cant pass the new url if not refresh the javascript (unless I find a way to pass javascript variable to ‘url’
Keith
(Kburton)
December 6, 2013, 10:47am
4
Rather than using an ajax submit button, can you set your form’s action to the relevant URL? You could then replace the URL easily using the returned data, or replace the whole form if appropriate.
It’s easy enough to create a javascript function to capture form submission and submit over ajax.
konapaz
(Konapaz)
December 6, 2013, 12:28pm
5
Keith:
Rather than using an ajax submit button, can you set your form’s action to the relevant URL? You could then replace the URL easily using the returned data, or replace the whole form if appropriate.
It’s easy enough to create a javascript function to capture form submission and submit over ajax.
No Luck in this way!
If I set the url in form and not in TbButton the submit refresh entire page with partial content.
I think there are cases that there is no easy way to do things using completetly API framework methods.
I found a custom solution with the below steps
‘buttonType’ => ‘link’, ‘url’ => ‘javascript:myfunction()’,
custom myfunction javascript that loaded in the first request
add hidden fields on the form (refreshed by AJAX) that above javascript function pass to the ajax funcion as data parameters
renderPartial without processOutput
In any case thanks a lot Keith
Keith
(Kburton)
December 6, 2013, 12:38pm
6
You’d use javascript to capture the submit event and prevent the page from reloading. Something like this:
$('body').on('submit', '#form-id', function(){
var form = $(this);
var url = form.attr('action');
var params = form.serialize();
$.post(url, params, function(data){
// etc
}, 'html');
return false;
});
That code might not be exactly right, but it should point you in the right direction. Returning false will prevent the standard page reload.
konapaz
(Konapaz)
December 6, 2013, 12:59pm
7
Keith:
You’d use javascript to capture the submit event and prevent the page from reloading. Something like this:
$('body').on('submit', '#form-id', function(){
var form = $(this);
var url = form.attr('action');
var params = form.serialize();
$.post(url, params, function(data){
// etc
}, 'html');
return false;
});
That code might not be exactly right, but it should point you in the right direction. Returning false will prevent the standard page reload.
Bingo Keith!
It just works,
Using ‘buttonType’ => ‘ajaxSubmit’ should be work as AJAX request but it is not happens
your code works preventing the entire page loading, so it is ok
Both of your and my code works perfectly, but your code is more simple.
Thanks by taking a vote
Keith
(Kburton)
December 6, 2013, 1:21pm
8
No probs. Glad I could help.