Databases
StackOverflow2013
Postsdbo
POWeird Javascript Bug (jQuery) in simple Testpage
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWeird Javascript Bug (jQuery) in simple Testpage
    text
    copied!<p>I'm in the process of writing a Mediawiki extension. I'm actually at a very very early stage ;). You can find the code here (okay, i can only submit one link, so imagine a github url) /eugenkiss/discussion-extension</p> <p>I've got a weird jQuery problem that I just can't resolve even by utilising firebug and trying to debug my code. I've uploaded the current code and an example here: <a href="http://jsfiddle.net/NMpU5/" rel="nofollow noreferrer">http://jsfiddle.net/NMpU5/</a> </p> <p>Try to open a discussion and click on at least two "reply"-links. Then click the cancel button of the first form that appeared. I don't know why, but when you click the cancel button another form is closed instead of the desired one. </p> <p>You can also vary this. For instance, open two forms and close the last openend one. At first it seems to work. But when you try to close the other form (by clicking cancel) it <em>does not</em> disappear. However, the event is triggered as shown by firebug. Sometimes, when I click another reply anchor after that, there will be opened as much forms as I clicked the seemingly not working cancel button of the other form.</p> <p>Well, for my desired extension I could of course limit the existence of opened forms to one - why else would you need two or more opened? But I just want to find the damn bug since I already invested a lot of time in finding it! It's a precious bug for me, you know ;)</p> <p>BTW, I'm using jQuery 1.4.2</p> <p>javascript</p> <pre><code> $(document).ready(function() { // Hide the discussion bodys per default $(".discussion").addClass("closed") .children(".discussion-body").hide(); // Register two custom events for the individual discussion divs // "open" & "close" in order to make the discussion bodys // collapsable and be able to toggle the events by clicking // the "discussion-header-button" anchor $(".discussion") .bind("open", function(e) { if(!$(this).hasClass("opened")) { $(this).children(".discussion-body").slideDown(); $(this).find(".discussion-header-button").html("[-]"); $(this).addClass("opened"); $(this).removeClass("closed"); } }) .bind("close", function(e) { if(!$(this).hasClass("closed")) { $(this).children(".discussion-body").slideUp(); $(this).find(".discussion-header-button").html("[+]"); $(this).addClass("closed"); $(this).removeClass("opened"); } }) .find(".discussion-header-button").click(function(){ relatedDiscussion = $(this).parents(".discussion"); if(relatedDiscussion.hasClass("closed")) { relatedDiscussion.trigger("open"); } else if(relatedDiscussion.hasClass("opened")) { relatedDiscussion.trigger("close"); } }); // Register custom "showForm" & "destroyForm" events on posts // in order to make the "Reply" button work // TODO: Maybe add "preview" & "submit" $(".discussion-body .post") .bind({ showForm: function(){ post = $(this); postBody = post.find(".post-body").first(); postHeader = post.find(".post-header").first(); postBody.append(postCommentFormHtml); replyLink = postHeader.find(".reply"); replyLink.unbind(); form = postBody.find(".post-comment-form"); form.slideDown(); // create actions for the form buttons form.find(".cancel").click(function(){ post.triggerHandler("destroyForm"); }); form.find(".preview").click(function(){ // Hier muss mit Ajax und der Datenbank gespielt // werden um ein preview erstellen zu können }); form.find(".submit").click(function(){ // Hier muss mit Ajax und der Datenbank gespielt // werden um den Post abschicken zu können }); }, destroyForm: function(){ post = $(this); postBody = post.find(".post-body").first(); postHeader = post.find(".post-header").first(); replyLink = postHeader.find(".reply"); replyLink.click(replyAction); form = postBody.find(".post-comment-form"); form.slideUp(function(){ $(this).remove(); }); } }); //$(".discussion-post-comment").click(createPostCommentForm); $(".discussion .reply").click(replyAction); function replyAction(event){ // Note: It is important to use triggerHandler instead of trigger // otherwise the "showForm" event of all parents is triggered // recursively (bubbling) and this is not desired event.preventDefault(); relatedPost = $(this).parents(".post").first(); relatedPost.triggerHandler("showForm"); } }); postCommentFormHtml = "\ &lt;div class='post-comment-form' style='display:none;'&gt;&lt;br&gt;\ &lt;form action='textarea.htm'&gt;\ &lt;textarea name='post' cols='50' rows='8'&gt;&lt;/textarea&gt;\ &lt;br&gt;\ &lt;input class='submit' type='submit' value=' Post '&gt;\ &lt;input class='preview' type='submit' value=' Preview '&gt;\ &lt;input class='cancel'type='reset' value=' Cancel '&gt;\ &lt;/form&gt;\ &lt;/div&gt;";​ </code></pre> <p>Html</p> <pre><code> &lt;div class=&quot;discussion&quot;&gt; &lt;div class=&quot;discussion-header&quot;&gt; &lt;a class=&quot;discussion-header-button&quot;&gt;[+]&lt;/a&gt; Diskussion: 3 Kommentar(e) &lt;a class=&quot;discussion-post-comment&quot;&gt;Post Comment&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;discussion-body&quot;&gt; &lt;div class=&quot;post&quot;&gt; &lt;div class=&quot;post-header&quot;&gt; &lt;span class=&quot;post-header-name&quot;&gt;Eugen&lt;/span&gt; &lt;span class=&quot;post-header-date&quot;&gt;2010-02-25 12:32:30&lt;/span&gt; &lt;a class=&quot;reply&quot; href=&quot;#&quot;&gt;Reply&lt;/a&gt; &lt;a class=&quot;edit&quot; href=&quot;#&quot;&gt;Edit&lt;/a&gt; &lt;a class=&quot;delete&quot; href=&quot;#&quot;&gt;Delete&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;post-body&quot;&gt; Ich denke das sollte anders sein! &lt;/div&gt; &lt;div class=&quot;post&quot;&gt; &lt;div class=&quot;post-header&quot;&gt; &lt;span class=&quot;post-header-name&quot;&gt;Markus&lt;/span&gt; &lt;span class=&quot;post-header-date&quot;&gt;2010-02-25 12:32:31&lt;/span&gt; &lt;a class=&quot;reply&quot; href=&quot;#&quot;&gt;Reply&lt;/a&gt; &lt;a class=&quot;edit&quot; href=&quot;#&quot;&gt;Edit&lt;/a&gt; &lt;a class=&quot;delete&quot; href=&quot;#&quot;&gt;Delete&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;post-body&quot;&gt; Ich denke nicht &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;post&quot;&gt; &lt;div class=&quot;post-header&quot;&gt; &lt;span class=&quot;post-header-name&quot;&gt;Jan&lt;/span&gt; &lt;span class=&quot;post-header-date&quot;&gt;2010-03-25 12:32:30&lt;/span&gt; &lt;a class=&quot;reply&quot; href=&quot;#&quot;&gt;Reply&lt;/a&gt; &lt;a class=&quot;edit&quot; href=&quot;#&quot;&gt;Edit&lt;/a&gt; &lt;a class=&quot;delete&quot; href=&quot;#&quot;&gt;Delete&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;post-body&quot;&gt; Mal was ganz anderes: Denkt ihr das selbe was ich denke? &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Edit: I want to add that changing the id's to classes didn't help. Plus, if that helps you: I discovered (using Firebug) that the "post" (and therefore "postbody") variable (in the "destroyForm" event) is actually pointing at the wrong post and therefore the wrong form is deleted. But it is beyond me why the post variable is pointing at the wrong post in the first place</p> <p>Edit2: changed alls ids to classes <a href="http://jsfiddle.net/NMpU5/1/" rel="nofollow noreferrer">http://jsfiddle.net/NMpU5/1/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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