Przechowuj ciastko2 postLink() z postów z jQuery

Question

Czy ktoś znalazł sposób na przechwycenie domyślnych formularzy Form :: postLink() za pomocą Jquery? Chciałbym formularza do pracy bez JS (dlatego postLink). Ale przy włączonym JS chcę przechwycić wpis i zadzwonić do niego przez 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'])); ?> 

generuje:

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

Głównym problemem jest to, że js jest umieszczone inline tutaj. Dlatego zawsze wyzwala nawet jeśli próbuję przechwycić zdarzenie click (lub zdarzenie Post - Próbowałem że zbyt):

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

Więc w końcu forma zawsze podnosi normalnie i przekierowuje - albo ignorowania wywołanie ajax (łapanie do przesłania formularza) lub wysłania/przekierowania, niezależnie od wykonanego połączenia ajaxowego (przechwytywanie zdarzenia kliknięcia).

Chciałbym usunąć ten rekord przez AJAX i - jeśli się uda - po prostu usuń ten wiersz tabeli z DOM. Byłoby wspaniale, gdyby nie trzeba było modyfikować wszystkich ponad 300 "przycisków usuwania" w aplikacji dla niego.

Jeśli wszystko zawiedzie, prawdopodobnie mógłbym nadal nadpisać FormHelper (rozszerz go i alias). Miałem jednak nadzieję na mniej inwazyjne rozwiązanie.

Answer 1

wiem, że to jest stary, ale dla każdego z tych poszukiwań:

• trzeba najpierw usunąć atrybut „onclick” dodano do linku usunąć .
• Następnie dodać .Kliknij funkcję do usuwania linku
• potrzebny jest adres URL (który może być ustalony lub pobrane z formularza, który jest zawsze element wstecz w CakePHP form-> postLink

Oto kod:

$(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; 
    }); 

}); 

Answer 2

tylko pomysł, nie testowałem go:

<?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'])); ?> 

Answer 3

jymboche - co za geniusz dlaczego nie zrobił myśleć sobie

Cóż, tutaj jest zmodyfikowany POUFNY? er twoi:

$(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; 
    }); 
}); 

Jest to wyłącznie w przyszłości. Nadal przyjmuję twoją odpowiedź, gdy dałeś mi właściwy pomysł.

Answer 4

kilka problemów z obecnych rozwiązań ...

Przede wszystkim metoda postLink wymaga włączonego Javascript. Od Cake's doco: "Tworzy łącze HTML, ale dostęp do adresu URL za pomocą metody POST. Wymaga włączenia javascript w przeglądarce."

Jeśli javascript jest wyłączony, otrzymujesz dokładnie to samo wyjście - ukryty formularz i link, który próbuje przesłać ten formularz w JavaScript (ale się nie uda, ponieważ JS jest wyłączony).

Po drugie, chociaż zadziała, wydaje się dziwne używanie metody postLink, a następnie użycie Javacript, aby całkowicie cofnąć magię, którą tworzy metoda postLink.

Jeśli chcesz non-javascript rozwiązanie polubowne, wszystko co musisz zrobić, to stworzyć regularny kształt, który wskazuje na metodę usuwania, i umieścić link poniżej to tak:

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

Następnie dla jeśli nie ma javascriptu, ukryj poniższy link, a formularz będzie działał normalnie.

Dla przypadków, gdy jest javascript, ukryj formularz i użyj javascript, aby twój link kasował zgłoszenie w formularzu usuwania i obsłuż go z ajaxem.

Answer 5

Rozwiązanie Jymboche pomogło mi znaleźć odpowiedź, ale nie działało w pełni dla mnie, ze względu na zainstalowane wtyczki bezpieczeństwa.

Oto co pracował dla mnie:

$(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; 
    }); 

}); 

Answer 6

mam przetłumaczone poprzednią wersję jQuery Mootools

// Zaczynamy foreach, aby zaznaczyć wszystkie ajax przyciski na stronie $$ („.ajaxbutton”). each (function (element, 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; 
     }); 

    })