Databases
StackOverflow2013
Postsdbo
POSlidetoggle a div after all dynamic data removed from it, jquery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSlidetoggle a div after all dynamic data removed from it, jquery
    primarykey
    data
    text
    <p>I have an application where the users add keywords to a div. They have the ability to add/remove keywords as long as they want. When they add the first keyword a div uses slideToggle to open the div and reveal the first keyword. These keywords get added into an array. I use the livequery plug-in to remove the keyword divs when they click on an x graphic. The issue I'm having is when the last keyword is removed (based on an array length of 0) I want the div to use slideToggle again to close the div. This isn't working with my current code. </p> <pre><code> //Here's my jquery $(document).ready(function () { //number of keywords var numkw = 0; //keyword array var keywords = []; //ouput of array var output = ""; //hide the div that holds the keywords $("div#KeywordHolder").hide(); //When the Add keyword button clicked $("#nihSearch_btnSearch").click(function () { //value of textbox var currentkeyword = $("#nihSearch_txtSearch").val(); //if numkw is 0 slide open the keyword holder if (keywords.length == 0) { keywords.push(currentkeyword); //slide open keywordHolder $("div#KeywordHolder").slideToggle("slow", function () { $("div#KeywordHolder").delay(2000, function () { //add first tab to keys div and fade it in $("div#keys").append("" + currentkeyword + " "); var lastid = $("div#keys .tab:last").attr("id"); $("div#keys").fadeIn(1000); }); }); } //otherwise add the tab and keyword to the array else { keywords.push(currentkeyword); $("div.tab:last").after("" + currentkeyword + " ", function () { $(this).fadeIn(1000); }); var lastid = $("div#keys .tab:last").attr("id"); } }); //When get resources button clicked show current array values $("#nihSearch_btnResults").click(function () { output = ""; //as a test output all array values into a message box $.each(keywords, function (i, l) { output += l + " "; }); alert(output); }); //Tab x clicked $('#keys', 'body') .find('a.xclick') .livequery('click', function () { //gets the id of the tab clicked on var getid = $(this).parent().attr("id"); //gets the number of the tab from the id value var numid = parseInt(getid.replace(/\D/g, ''), 10); $(this).parent("div").remove(); keywords.splice((numid - 1), 1); alert("Length: " + keywords.length); if (keywords.length == 0) { alert("In the if statement"); $("div#KeywordHolder").slideToggle("slow"); } return false; }); }); //code for autocomplete textbox $(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $(".homeSearchBox").autocomplete({ source: availableTags }); }); // code for drop down (function ($) { $(function () { $('#combolist').combobox(); }); })(jQuery); </code></pre> <p><pre><code></p> <pre><code>&lt;!-- Here's my html --&gt; &lt;div class="ui-widget"&gt; &lt;asp:TextBox ID="txtSearch" placeholder="Enter Keywords..." columns="25" CssClass="homeSearchBox" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;asp:Button ID="btnSearch" CssClass="searchButton" runat="server" Text="Add Keyword" UseSubmitBehavior="False" /&gt; &lt;/div&gt; &lt;div id="KeywordHolder"&gt; &lt;div id="keys"&gt; &lt;!-- &lt;div class='tab'&gt;&lt;span&gt;test tab&lt;/span&gt;&lt;a href='#' class='xclick' /&gt;Close&lt;/a&gt;&lt;/div&gt; --&gt; &lt;/div&gt; &lt;br class="clear" /&gt; &lt;div class="rightdiv"&gt; &lt;asp:Button ID="btnResults" CssClass="searchButton" runat="server" Text="Find Resources" UseSubmitBehavior="False" /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></pre></code></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJason
    1. USJason
    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. COThe livequery plugin is not maintained anymore since February 2010, you should look to the native `on` method (jQuery 1.7+) or the `delegate` one (jQuery 1.4+), they are better, maintained, and directly in the core of jQuery :) Also, can you put your initial HTML code too, and the other part of the Javascript code ?
      singulars
      1. POSlidetoggle a div after all dynamic data removed from it, jquery
      1. USpomeh
    2. COI've updated the post with all jquery and related HTML
      singulars
      1. POSlidetoggle a div after all dynamic data removed from it, jquery
      1. USJason
 

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