Перехватывать торт2 postLink () формировать сообщения с помощью jQuery - PullRequest
Новая
       35

Перехватывать торт2 postLink () формировать сообщения с помощью jQuery

5 голосов
/ 17 марта 2012

Кто-нибудь нашел способ перехвата форм Form :: postLink () по умолчанию с Jquery?Я хотел бы, чтобы форма работала без JS (поэтому postLink).Но с включенным JS я хочу перехватить сообщение и вызвать его через AJAX. 

<?php echo $this->Form->postLink('Delete', array('action'=>'delete', $prospect['Prospect']['id']), array('class'=>'postLink', 'escape'=>false), __('Sure you want to delete # %s?', $prospect['Prospect']['id'])); ?>

генерирует: 

<form action="/admin/prospects/delete/4f61ce95-2b6c-4009-9b89-07e852b0caef" name="post_4f648f773923b" id="post_4f648f773923b" style="display:none;" method="post">
    <input type="hidden" name="_method" value="POST"/>
</form>
<a href="#" class="postLink" onclick="if (confirm('Sure you want to delete # 4f61ce95-2b6c-4009-9b89-07e852b0caef?')) { document.post_4f648f773923b.submit(); } event.returnValue = false; return false;">
    Delete
</a>

Основная проблема заключается в том, что js помещается в строку здесь.Поэтому всегда срабатывает, даже если я пытаюсь перехватить событие click (или событие post - попробовал это тоже): 

<script>
$(document).ready(function() {
    $('table.list a.postLink').click(function(e) {
        e.preventDefault();
      alert('Handler for .submit() called.');
      // TODO: do ajax request here and return false
      return false;
    });
});
</script>

Таким образом, в конце форма всегда отправляется нормально и перенаправляет - либо игнорируя любой вызов ajax (перехват формы) или публикацию / перенаправление вне зависимости от только что сделанного вызова ajax (перехват события click).

Я хотел бы удалить эту запись через AJAX и - в случае успеха - просто удалить эту строку таблицы из DOM,Было бы здорово, если бы для него не нужно было изменять все 300+ «кнопок удаления» в приложении.

Если все не удалось, я, вероятно, все равно мог бы переопределить FormHelper (расширить его и присвоить ему псевдоним),Но я надеялся на менее инвазивное решение здесь.

Ответы [ 6 ]

8 голосов
/ 16 мая 2012

Я знаю, что это старый, но для любого из тех, кто ищет:

  • Вам необходимо сначала удалить атрибут 'onclick', добавленный к удалению ссылка.
  • Затем вы добавляете функцию .click к ссылке для удаления
  • Вам нужен URL (который может быть жестко задан или извлечен из формы, которая всегда является элементом prev в cakephp Form-> postLink

Вот код: 


$(function(){

    $('a:contains("Delete")').removeAttr('onclick');

    $('a:contains("Delete")').click(function(e){
        e.preventDefault();
        var form = $(this).prev();
        url = $(form).attr("action");
        $.post(url);
        return false;
    });

});
2 голосов
/ 20 мая 2012

jymboche - что за гений, почему я сам не подумал об этом?

Ну, вот ваш модифицированный ответ: 

$(document).ready(function() {
    $('table.list a.postLink').removeAttr('onclick');

    $('table.list a.postLink').click(function(e) {
        e.preventDefault();
        if (!confirm('<?php echo __('Sure?')?>')) { 
            return false;
        }
        var form = $(this).prev();
        var url = $(form).attr("action");
        var tr = $(this).closest('tr');
        url = url + '.json';
        $.post(url).success(function(res) {
            if (res.error) {
                alert(res.error);
                return false;
            }
            tr.fadeOut(200);
        }).error(function() {
            alert("Error"); 
        })
        return false;
    });
});

Это только для справки в будущем.Я все равно приму ваш ответ, поскольку вы дали мне правильную идею.

1 голос
/ 23 октября 2013

Решение jymboche помогло мне получить рабочий ответ, но он не сработал полностью для меня из-за некоторых установленных плагинов безопасности.

Вот что сработало для меня: 

    $(function(){

    $('a:contains("Delete")').removeAttr('onclick');

    $('a:contains("Delete")').click(function(e){

        e.preventDefault();
        var form = $(this).prev();
        var url = $(form).attr("action");

        $.ajax({
            type: 'POST',
            cache: false,
            url: url,
            data: $(form).serialize(),
            success: function(msg) {
                // do any extra calls you need to refresh the page
            }
        });
        return false;
    });

});
0 голосов
/ 12 сентября 2014

Я перевел предыдущую версию jQuery в Mootools

// Мы начинаем с foreach, чтобы выбрать все кнопки ajax на странице $$ ('. Ajaxbutton'). Each (function (item, index)) {

        //remove onClick
        item.removeProperty('onclick');

        //attach click event
        item.addEvent('click', function(e){
            //stop click (in my case the form is inside another link)
            e.stop();
            var form = item.getPrevious();
            url = form.get('action');

            new Request({
                url: url,//url
                method: 'post',//method
                onSuccess: function(responseText){
                    //This is not required, we are dimming the button on success
                    item.getParents()[0].tween('opacity',0.5)
                }
            }).send();
            return false;
        });

    })
0 голосов
/ 04 июня 2013

Пара вопросов с текущими решениями ...

Прежде всего, метод postLink требует включения Javascript. От Торт Доку : «Создает HTML-ссылку, но получает доступ к URL-адресу, используя метод POST. Требуется включить JavaScript в браузере.»

Если javascript отключен, вы просто получаете точно такой же вывод - скрытую форму и ссылку, которая пытается отправить эту форму с помощью Javascript (но не удается, поскольку JS отключен).

Во-вторых, хотя это будет работать, кажется странным использовать метод postLink, а затем использовать Javacript для точного уничтожения всей магии, которую создает метод postLink.

Если вы хотите не дружественное к javascript решение, все, что вам нужно сделать, это создать обычную форму, которая указывает на метод удаления, и поместить ссылку под ним, например: 

<?php echo $this->Form->create('DefaultAvailability', array('url' array('action' => 'delete', $myRecord['ModelName']['id'])));?>
<?php echo $this->Form->end('Delete (no JS)');?>
<a href='#'>Delete (With JS, use AJAX)</a>

Тогда для случаев, когда нет JavaScript, скройте ссылку ниже, и форма будет работать как обычно.

Для случаев, когда есть javascript, скрыть форму и использовать javascript, чтобы ваша ссылка для удаления инициировала отправку в вашей форме удаления и обрабатывать эту отправку с помощью ajax.

0 голосов
/ 20 марта 2012

Просто идея, еще не проверял: 

<?php echo $this->Form->postLink('Delete', array('action'=>'delete', $prospect['Prospect']['id']), array('class'=>'postLink', 'onclick' => false, 'escape'=>false), __('Sure you want to delete # %s?', $prospect['Prospect']['id'])); ?>
...