Intercept cake2 postLink() modulo post con jQuery

Question

Qualcuno ha trovato un modo per intercettare i moduli Form :: postLink() predefiniti con Jquery? Vorrei che il modulo funzionasse senza JS (quindi il postLink). Ma con JS abilitato voglio intercettare il post e chiamarlo tramite 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'])); ?> 

genera:

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

Il problema principale è che i js è posto in linea qui. Pertanto attiva sempre, anche se cerco di intercettare l'evento click (o l'evento post - provato anche questo):

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

Così, alla fine del modulo invia sempre normalmente e reindirizza - o ignorando qualsiasi chiamata AJAX (cattura la modulo di invio) o pubblicazione/reindirizzamento indipendentemente da una chiamata Ajax appena effettuata (cattura l'evento click).

Vorrei eliminare questo record tramite AJAX e, in caso di successo, rimuovere la riga della tabella dal DOM. Sarebbe bello se non fosse necessario modificare tutti i 300 + "pulsanti di cancellazione" nell'applicazione per questo, però.

Se tutto fallisce, probabilmente potrei comunque sovrascrivere FormHelper (estenderlo e renderlo alias). Ma speravo in una soluzione meno invasiva qui.

Answer 1

So che questo è vecchio, ma per una di queste ricerche:

• È necessario prima rimuovere la 'onclick' attributo aggiunto al collegamento Elimina .
• Poi, si aggiunge una funzione .Click al collegamento Elimina
• è necessario l'URL (che può essere codificato o recuperato dal modulo, che è sempre l'elemento prev in CakePHP form-> postLink

ecco il codice:

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

Solo un'idea, non hanno provato:

<?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 - che genio perché non ha ancora ci penso io

Bene, qui è la risp modificato? di tuo:

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

Questo è solo per riferimento futuro. Accetterò ancora la tua risposta mentre mi hai dato l'idea giusta.

Answer 4

paio di problemi con le attuali soluzioni ...

In primo luogo, il metodo postLink richiede che Javascript sia abilitato. Da Cake's doco: "Crea un collegamento HTML, ma accede all'URL utilizzando il metodo POST, richiede l'attivazione di JavaScript nel browser."

Se javascript è disabilitato, si ottiene esattamente lo stesso risultato: un modulo nascosto e un collegamento che tenta di inviare tale modulo con Javascript (ma non riesce, poiché JS è disattivato).

In secondo luogo, sebbene funzioni, sembra strano utilizzare il metodo postLink e quindi utilizzare Javacript per annullare con precisione tutta la magia creata dal metodo postLink.

Se si desidera una soluzione amichevole non javascript, tutto quello che dovete fare è creare una forma regolare che punta al metodo delete, e mettere un link qui sotto in questo modo:

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

Poi, per casi in cui non ci sono javascript, nascondere il collegamento sottostante e il modulo funzionerà normalmente.

Per i casi in cui è presente javascript, nascondere il modulo e utilizzare javascript per fare in modo che il collegamento di eliminazione inneschi un invio sul modulo di eliminazione e gestisca tale invio con ajax.

Answer 5

La soluzione di jymboche mi ha aiutato a ottenere una risposta funzionante, ma non ha funzionato completamente per me, a causa di alcuni plug-in di torta di sicurezza che ho installato.

Ecco cosa ha funzionato per me:

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

ho tradotto la precedente versione jQuery per Mootools

// Si comincia con foreach, per selezionare tutti i pulsanti Ajax nella pagina $$ ('.ajaxbutton'). each (function (voce, 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; 
     }); 

    })