Databases
StackOverflow2013
Postsdbo
POAjax not working with jquery Flip! plugin
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax not working with jquery Flip! plugin
    primarykey
    data
    text
    <p>I'm trying to use the FLIP! plugin and have it's content loaded by ajax. I'm running into a problem though. It's just not working. </p> <p>I can see the post event happening in firebug but nothing seems to change when I populate the "content" parameter inside the FLIP! plug in. </p> <p>Below is my code which may explain things better.</p> <pre><code>&lt;script type="text/javascript"&gt; function getFlipContent(url,command, target){ $.post(url, {"data": command}, function(response) { console.log(response); //return response; // this is not working replaceHtml(target,response); // workaround but kinda not really }); } function replaceHtml(object,html){ $(object).html(); $(object).html(html); } $(function(){ $(".flipable2").bind("click", function() { var url= $(this).data("url"); var command= $(this).data("command"); var target = $(this).data("target"); //alert(flip); if (target === undefined) { flip = "self"; } if (target == "self") { $($(this)).flip({ direction: 'lr', color: '#ffffff', content: function() { getFlipContent(url, command, target); } }); return false; } else { $(target).flip({ direction: 'lr', color: '#ffffff', content: function() { getFlipContent(url, command, target); } }); return false; } }); }); &lt;/script&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;table width="100%" cellpadding="0px" border="0px" cellspacing="0px"&gt; &lt;tr&gt; &lt;td&gt;&lt;a href="#" class="flipable2 box" data-target="#page" data-url="test.php" data-command="test"&gt;FLIP&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="page" class="box"&gt; BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH&lt;/td&gt; &lt;/div&gt; </code></pre> <p>SO right now I'm using a replachtml function to manually re-write the contents of the target I just "flipped". This sorta works but breaks the animation so I really would rather use the plugin's content parameter... When I do that though it just doesn't do anything. The animation completes but there is no content change. I think perhaps I am missing something. Any help would be welcome.</p> <p>Here is a jsfiddle too: <a href="http://jsfiddle.net/mUhuN/9/" rel="nofollow">http://jsfiddle.net/mUhuN/9/</a> though I wasn't sure how to fake an ajax request.</p> <p>Anyway please help :) </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USTheSnooker
    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. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COmade a change but still not perfect, tried fetching the ajax first and storing it in a hidden div and then using that div as the content. Works.. but the animations still seems a little clunky
      singulars
      1. POAjax not working with jquery Flip! plugin
      1. USTheSnooker
 

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