CODEWITHSUNDEEP
javascriptjqueryslidetoggle
Kyle Klink
Kyle Klink

Reputation: 67

JQuery SlideToggle works locally but not on web server

I built a simple web app that scrapes HTML off a table and creates two divs for each table row: one contains the name of the item, the next contains a bunch of details. I grab the content with Ajax, then build out the divs. Im trying to use slideToggle() to toggle the details div when the name div is clicked on. Everything works locally, but when I deploy to the sever the toggle doesn't want to work.

Here's how I'm building the divs (which works both locally and on the server:

                var beerDiv = '<div class="beer"> \
                                <text class="beerName">' + values[4] + '</text> \
                               </div>';
                var beerDetailsDiv = '<div class="beerDetails"> \
                                        <div class="smallDetailBlockOne"> \
                                            <text class="detailLabel">Price:&nbsp;</text> \
                                            <text class="value">' + values[0] + '</text><br /> \
                                            <text class="detailLabel">Size:&nbsp;</text> \
                                            <text class="value">' + values[1] + '</text> \
                                        </div> \
                                        <div class="smallDetailBlockTwo"> \
                                            <text class="detailLabel">ABV:&nbsp;</text> \
                                            <text class="value">' + values[6] + '</text><br /> \
                                            <text class="detailLabel">Value:&nbsp;</text> \
                                            <text class="value">' + values[3] + '</text> \
                                        </div> \
                                        <div class="rating"> \
                                        <text class="ratingText">' + values[2] + '</text> \
                                        </div> \
                                        <div class="restOfDetails"> \
                                            <text class="detailLabel">Style:&nbsp;</text> \
                                            <text class="value">' + values[5] + '</text><br /> \
                                            <text class="detailLabel">Origin:&nbsp;</text> \
                                            <text class="value">' + values[7] + '</text><br /> \
                                            <text class="detailLabel">Description:&nbsp;</text> \
                                            <text class="description">' + values[8] + '</text> \
                                        </div> \
                                    </div>';
                $("#beerList").append(beerDiv);
                $("#beerList").append(beerDetailsDiv);
                $(".beerDetails").hide();

Here's the code for the toggle:

$(".beer").click(function()
{
    $(this).next(".beerDetails").slideToggle(500);  
});

In the head I have:

<link rel="apple-touch-startup-image" href="beersstartup.png" />
<meta name=”viewport” content =”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/>
<link rel="stylesheet" type="text/css" href="ontapcss.css">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="ontapjs.js"></script>

And then the body: 

    <div id="header">
        <h1 align="center">Tap & Mallet</h1>
    </div>   <!-- end header div -->
    <div id="title">
        <div id="date">
            <br>
            <text id="dateMonth">JUN</text><br>
            <text id="dateDay">22</text>
        </div>   <!-- end date div -->
        <div id="titleImage">
            <img src="croppedbanner.png" />
        </div>   <!-- end titleImage div -->
    </div>   <!-- end title div -->
    <div id="beerList">

        <!-- JAVASCRIPT ENTERS THE BEER DIVS HERE -->

    </div>   <!-- end beerList div -->
    <div id="footer">
        <text id="prefetch" align="center"></text>
    </div>   <!-- end footer div -->

</div>  <!-- end container div -->

I'm pretty new to all of this, so it's been a rough road. If I can get this toggle to work I'll be done!

Thanks in advance for the help, and thanks for all the answers I've found along the way through Google searches that brought me here.

Upvotes: 0

Views: 348

Answers (1)

James
James

Reputation: 1572

It looks like you are using dynamic content. If that is the case you have to use .on() instead of .click(). 

$("#beerlist").on('click','div.beer',function()
{
    $(this).next(".beerDetails").slideToggle(500);  
});

events are attached to elements when the page loads, and dynamic data is not in the DOM at that time. So with .on() you are attaching the event listener to a parent of the element. But the parent has to be hard coded into the page. Then when you click the element, it bubbles the event up the chain until it finds an event listener that matches.

Upvotes: 1

Related Questions