0

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.



    //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);



<!-- Here's my html -->

<div class="ui-widget">
                                <asp:TextBox ID="txtSearch" placeholder="Enter Keywords..." columns="25" CssClass="homeSearchBox" runat="server"></asp:TextBox>

                                 <asp:Button ID="btnSearch" CssClass="searchButton" runat="server" 
                                Text="Add Keyword" UseSubmitBehavior="False" />
                            </div>

                            <div id="KeywordHolder">
                                <div id="keys">
                                    <!-- <div class='tab'><span>test tab</span><a href='#' class='xclick' />Close</a></div> -->
                                </div>
                                <br class="clear" />  
                                <div class="rightdiv">
                                    <asp:Button ID="btnResults" CssClass="searchButton" runat="server" 
                                    Text="Find Resources" UseSubmitBehavior="False" />
                                </div>                         
                            </div>

Jason
  • 59
  • 1
  • 2
  • 10
  • The 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 ? – pomeh May 09 '12 at 13:23
  • I've updated the post with all jquery and related HTML – Jason May 09 '12 at 13:46

0 Answers0