Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This has little to do with ColdFusion specifically, and more to do with a very common Ajax design pattern. You've got most of it right; here's the general idea:</p> <ol> <li><p>User clicks <code>[delete]</code>.</p></li> <li><p>A JavaScript handler function sends the ID of the item to be deleted to your <code>delete_item.cfm</code> handler on the server. <em>Example:</em></p> <pre><code>$('a.deletelink').click( function(e){ e.preventDefault(); $.ajax({ url : '/handlers/delete_item.cfm', data : $(this).data('id'), type : 'post', success : /* see below */ }); }); </code></pre></li> <li><p><strong>On the server, another function retrieves an updated view of the region of the page affected by the change -- now without the deleted item.</strong> <code>delete_item.cfm</code> calls this function and returns the updated view information to the Ajax requester. This could take the form of:</p> <ul> <li>The raw data, perhaps in the form of a JSON string, or...</li> <li>A fully rendered HTML version of the region to be re-drawn.</li> </ul></li> <li><p><strong>In the <code>success</code> handler of the Ajax call, the updated view information is received.</strong> You then:</p> <ul> <li>Loop over the JSON data and build the appropriate HTML in JavaScript, then drop it into your container area (perhaps using a templating engine), or...</li> <li>Drop in the fully rendered HTML as supplied from <code>delete_item.cfm</code>, replacing the older version that originally contained the item you're deleting. </li> </ul> <p><em>Example:</em></p> <pre><code>/* success handler from above */ function(data){ // data is what's returned from delete_item.cfm // Assuming it's fully rendered HTML post-deletion: $('#container_of_your_list') .html( data ) // drop in new data .effect('highlight',{},2000); // visual feedback to user } </code></pre></li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload