Refresh Url Submit Button


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 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 ?


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',



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’

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

  1. ‘buttonType’ => ‘link’, ‘url’ => ‘javascript:myfunction()’,

  2. custom myfunction javascript that loaded in the first request

  3. add hidden fields on the form (refreshed by AJAX) that above javascript function pass to the ajax funcion as data parameters

  4. renderPartial without processOutput

In any case thanks a lot 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 ;)

No probs. Glad I could help. :)