Как сменить URL при ajax отправки формы?

Question

[akula22]

Код для отправки формы для добавления заказа

$js = <<<JS
    $('form').on('beforeSubmit', function(){
        var data = $(this).serialize();
        $.ajax({
            url: '/order/default/add-order',
            type: 'POST',
            data: data,
            success: function(response){
                $('#basket').html(response);
            },
            error: function(){
                alert('Error!');
            }
        });
        return false;
    });
JS;
$this->registerJs($js);

отправляется этим нажатием кнопки

<?= Html::a('<i class="glyphicon glyphicon-shopping-cart"></i>', ['/order/default/add-order'], [
                            'class' => 'btn btn-default pull-right',
                            'data-toggle' => 'tooltip',
                            'data-placement' => 'bottom',
                            'title' => 'Добавить заказ в корзину',
                            'data' => [
                                'confirm' => 'Вы уверены?',
                                'data-method' => 'post',
                            ],
                        ]) ?>

так же мне надо удалять заказы и я создал кнопку удаления

<?= Html::a('<i class="glyphicon glyphicon-trash text-danger"></i>', ['/order/default/delete-order', 'id' => $order->id], [
                    'data-toggle' => 'tooltip',
                    'data-placement' => 'bottom',
                    'title' => 'Удалить заказ из корзины',
                    'data' => [
                        'confirm' => 'Вы уверены?',
                        'data-method' => 'get',
                    ],
                ]) ?>

Но при нажатие заказ все равно добавляется, запрос идет на
url: '/order/default/add-order',

Как мне его сменить при удаление на
/order/default/delete-order ?

Answer 1

[Дмитрий]

Добрый день.

<?= Html::a('<i class="glyphicon glyphicon-trash text-danger"></i>', ['/order/default/delete-order', 'id' => $order->id], [
                    'data-toggle' => 'tooltip',
                    'data-placement' => 'bottom',
                    'title' => 'Удалить заказ из корзины',
                    'data' => [
                        'confirm' => 'Вы уверены?',
                        'data-method' => 'get',
                        'delete-url' => Url::to('/order/default/delete-order');
                    ],
                ]) ?>

При отправки ajax считываете значение "data-delete-url" и добавляете в параметры запроса.

$('form').on('beforeSubmit', function(){
        var data = $(this).serialize();
       
        var url = $(selector).attr('data-delete-url');        

        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(response){
                $('#basket').html(response);
            },
            error: function(){
                alert('Error!');
            }
        });
        return false;
    });

Возникнут ошибки - подправляйте под свои требования.
Показал саму идею.

Comments

[akula22]

идею понял, но не понял как JS поймет по какой ссылке кликают, по добавлению или удалению

[Дмитрий]

akula22, определяете по
var url = $(selector).attr('data-delete-url');

[Дмитрий]

akula22, вернее не так.
Вы сейчас целую форму отправляете, а Вам надо ориентироваться на ссылку.
Что-то подобное надо сделать

$('a.ajax-query').on('click', function(e){
   e.preventDefault();
   var url = $(selector).attr('ajax-url'); // здесь будет адрес или на добавление или на удаление.
  $.ajax({
     url: url
     /* остальной код */
  })
})

В ссылку добавляете параметр "data-ajax-url", например. Для одной и для другой, только с разными значениями.

[Дмитрий]

akula22, ссылка будет выглядеть так

<?= Html::a('<i class="glyphicon glyphicon-trash text-danger"></i>', ['/order/default/delete-order', 'id' => $order->id], [
                   'class' => 'ajax-query', // идентификатор ссылки
                    'data-toggle' => 'tooltip',
                    'data-placement' => 'bottom',
                    'title' => 'Удалить заказ из корзины',
                    'data' => [
                        'confirm' => 'Вы уверены?',
                        'data-method' => 'get',
                        'ajax-url' => Url::to('/order/default/delete-order'); // адрес действия в контролере
                    ],
                ]) ?>

[akula22]

slo_nik, не получается, он все равно берет урл только из одного селектора
у меня получается 2 ссылки с одинаковыми классами 'class' => 'ajax-query',
жму на разные, берет из одной

[Дмитрий]

akula22, код покажите.

[akula22]

slo_nik, вот такой код заработал

$("a[id^=basket_]").on('click', function(e){
        e.preventDefault();
        var data = $(this).serialize();
        if($(this).attr("id") == 'basket_add') {
            url = $("#basket_add").attr('href');
            type = 'post';
        }
        if($(this).attr("id") == 'basket_del') {
             url = $("#basket_del").attr('href');
             type = 'get';
        }

правда добавлять перестал в бд, не пойму где образовалась ошибка, в консоле все чисто

[Дмитрий]

akula22, а где код ссылок и действия в контролере?

[Дмитрий]

akula22, что Вы пытаетесь получить в этом случае?
var data = $(this).serialize();
И при чёт тут значение атрибута href?
url = $("#basket_add").attr('href');

[Дмитрий]

Если это ссылка, то достаточно получить её атрибут href

$('form').on('beforeSubmit', function(e){
       e.preventDefault();

	$.ajax({
		url: $(e.target).attr('href'),
		type: 'POST',
		data: $(this).serialize(),
		success: function(response){
			$('#basket').html(response);
		},
		error: function(){
			alert('Error!');
		}
	});
	return false;
});

[akula22]

Дмитрий, $(e.target).attr('href'), выдает e.target.attr is not a function

если убираю data: $(this).serialize(), открывается чистый лист. т.е не работает
в контроллере идет добавление модели и

if ($model->save()) {
                return $this->renderAjax('@app/modules/order/views/default/basket');
            }

во вьюхе просто

<div id="basket">
 <?php foreach ($orders as $order) : ?>

И когда удалешь там запрос надо уже в GET слать, там с id ссылка ['/order/default/delete-order', 'id' => $order->id]

[Дмитрий]

akula22, Вы показываете какие-то малопонятные куски кода.
Отредактируйте вопрос, покажите код view, action и js, полностью.
И опишите подробно, что и как должно работать.

[akula22]

slo_nik, там просто форма во вьюхе со всякими скрытыми полями

<input type="hidden" name="price" class="price" />
<input type="hidden" name="data" id="data" />

и такое не сработает $("a#basket_add").on('click', function()

надо форму слать
$('form').on('beforeSubmit', function()
но вот как ее послать на два разных экшина не могу сообразить

[Дмитрий]

akula22, опять куски кода и скудное описание...

[akula22]

Весь код очень обьемный, все это делается в виджете от катрика.
Я сделал 2 события, удаление на клик, добавление на отправку формы

$("a#basket_del").on('click', function(e){
    e.preventDefault();
     $.ajax({
            url: $("#basket_del").attr('href'),
            type: 'GET',
            data: $(this).serialize(),
            success: function(response){
                $('#basket').html(response);
            },
            error: function(){
                alert('Error!');
            }
        });
        return false;
    });
    $('form').on('beforeSubmit', function(){
        $.ajax({
            url: '/order/default/add-order',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response){
                $('#basket').html(response);
            },
            error: function(){
                alert('Error!');
            }
        });
        return false;
    });

При первом клике все отлично, а на втором почему то только добавляет , даже если жму удаление

[akula22]

блин я так и не решил эту проблему, второй день бьюсь, уже переделал удаление с GET на POST

<input type="hidden" name="order_id" value="<?= $order->id?>">
                <?= Html::submitButton('del',
                    ['class' =>'btn btn-success basket_del']) ?>

Без проблема работает только почему-то с таким кодом
$('form').on('beforeSubmit', function() {
и вот как тут отследить это кнопка с удалением нажата или кнопка с добавлением, именно после $('form').on('beforeSubmit', function() {

[Дмитрий]

Вы показываете какие-то малопонятные куски кода.
Отредактируйте вопрос, покажите код view, action и js, полностью.
И опишите подробно, что и как должно работать.

akula22, Вы же пишите

Весь код очень обьемный, все это делается в виджете от катрика.

Мало того, что Вы не предоставляете весь код, так и ещё выясняется, что Вы используете виджет от kartik-a. Почему в вопросе Вы об этом ничего не написали.
Где находятся кнопки?
Почему одна ссылка должна отправлять форму, а вторая просто отправлять id на действие контролера?
Как они располагаются?
Ну и так далее...