Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It seems you're dying prematurely, so to speak. Would it not make more sense to remove the click event bindings once you're sure the Ajax request has actually been successful?</p> <pre><code>$('.wink-back').live( "click", function( event ) { var uid = $(this).attr("rel"); $.ajax({ type : "POST", cache : false, data : "data[Wink][recipient_id]=" + uid, url : "/winks/sendWink", success : function( data ) { $(this).die( "click" ).addClass("disabled"); var newData = JSON.parse( data ); } }); }); </code></pre> <p>Given that your problem is essentially that you want to prevent multiple Ajax requests once the link has been clicked, jQuery provides a number of global Ajax event handlers that can be enacted for <em>any</em> Ajax action.</p> <p>Regarding your specific problem, you want to disable your clicked link whenever a new Ajax request is started and, assuming it's successful, remove the click event binding for that element.</p> <p>Here's how you'd do it.</p> <p>First, we'll set up two global event listeners for any Ajax request so that we can disable the UI until the action is completed; one for when the Ajax request starts, the other for when it's finished:</p> <pre><code>$('#my-Element-Containing-All-WinkBack-Class-Elements').ajaxStart(function() { // Show an overlay over the whole page or // over your element containing your links with // opacity 0 so that any elements cannot be clicked. }).ajaxStop(function() { // Remove the overlay }); </code></pre> <p>So what we're doing here is listening for any request to start. As soon as one begins, we prevent any further clicks on the page (or other page region - as required) by adding a transparent overlay using CSS along these lines:</p> <pre><code>.page-overlay { z-index: 10000; filter: alpha(opacity=0); /*older IE*/ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE */ -khtml-opacity: 0; /*older Safari*/ opacity: 0; /*supported by current Mozilla, Safari, and Opera*/ position: absolute; top:0; left:0; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle; } </code></pre> <p>Your page gets re-enabled once the request finishes by removing this overlay in the .ajaxStop() method.</p> <p>Your actual click event binding gets handled as I've already suggested.</p>
    singulars
    1. This table or related slice is empty.
    1. PORebind current function after ajax failure?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USPhil.Wheeler
    1. USPhil.Wheeler
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COIn a sense yes, but my goal was to prevent multiple AJAX submissions via the click event. Is there a better way to prevent multiple 'click's?
      singulars
      1. PO
      1. USBarry Chapman
    2. COI'll update my answer.
      singulars
      1. PO
      1. USPhil.Wheeler
    3. COI'm wondering: assuming the Ajax request would take a while: If I scroll the page, couldn't I still click links that were outside the viewport when you initiated the overlay? Also, why would it be good to prevent any user interaction with the page just because an Ajax request is running? The whole point of asynchronicity is that I can go on doing stuff while something happens in the background. For the same effect, I could also just set async = false and have the page freeze while the request runs.
      singulars
      1. PO
      1. USTomalak
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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