CODEWITHSUNDEEP
javascriptjqueryajax
Chris
Chris

Reputation: 18876

Rebind Menu Js after Ajax

I am building an online URL auction tool. Below is the results page after a user enters a URL to purchase. When this results page is called 2 other results pages are being created, but they take a while so what I’m trying to do is setup the menu bar to read ‘Loading’ on both buttons and the href to #. I then use setInterval to poll every 2 secs, checking if the second file has been created. Once it has, the success callback reloads the buttons to active hrefs and labels them [‘Find Out Whois’ ,and ‘Appraisal’] rather than 'Loading'.

Question: How can I rebind the menu bar js so that it works after the ajax call? Ive being reading SO on this exact topic but failing at using .live(), .on(), display() , and more… 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Domain Auctions R US</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
        <style>
            body{
                background-repeat:no-repeat;
                background-color:#fff;
            }

            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:12px;
            }
            span.reference a{
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                text-shadow:1px 1px 1px #000;
                margin-right:30px;
            }
            span.reference a:hover{
                color:#ddd;
            }
            ul.sdt_menu{
                margin-left:auto;
                margin-right:auto;
                margin-top:0px;
            }

        </style>
    </head>
<body>
<br/><br/><br/><br/>
        <div class="content" id="content">
            <ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="#"><!-- When the other two results pages are ready, this needs to be a real link -->
                        <img src="../images/googleMap.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Loading</span>
                            <span class="sdt_descr">Page not yet available</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="worth.html">
                        <img src="../images/pawnShop.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Loading</span>
                            <span class="sdt_descr">Page not yet available</span>
                        </span>
                    </a>
                </li>   
            </ul>
        </div>

        <h1>The URL you are searching for is currenly TAKEN.</h1>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#sdt_menu > li').bind('mouseenter',function(){ //LINE SWITCH 1
                    var $elem = $(this);
                    $elem.find('img')
                         .stop(true)
                         .animate({
                            'width':'170px',
                            'height':'170px',
                            'left':'0px'
                         },400,'easeOutBack')
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'140px'},500,'easeOutBack')
                         .andSelf()
                         .find('.sdt_active')
                         .stop(true)
                         .animate({'height':'170px'},300,function(){
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                            $sub_menu.show().animate({'left':left},200);
                        }   
                    });
                }).bind('mouseleave',function(){ //LINE SWITCH 2
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');

                    $elem.find('.sdt_active')
                         .stop(true)
                         .animate({'height':'0px'},300)
                         .andSelf().find('img')
                         .stop(true)
                         .animate({
                            'width':'0px',
                            'height':'0px',
                            'left':'85px'},400)
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'25px'},500);
                });
            });

                var myVar=setInterval(function(){ajax_request()},2000);
                  function ajax_request() {
                  $.ajax({
                  type: "GET",
                  url: "http://exampleServer/urlID/4b49d2/index.html",
                  dataType: "script",
                  success: function() {
                  $('#conn').load("ajax-loader.html");


                  clearInterval(myVar);
                  },
                  error: function() {
                    alert("error");
                  }
                });
                }
        </script>

</body>
</html>

ajax-loader.html

<ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="../map.html">
                        <img src="../images/googleMap.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Find out Whois</span>
                            <span class="sdt_descr">Map of Who Owns Domain</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="worth.html">
                        <img src="../images/pawnShop.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Appraisal</span>
                            <span class="sdt_descr">Real Time Value of Domain</span>
                        </span>
                    </a>
                </li>   
            </ul>

Upvotes: 0

Views: 458

Answers (2)

Ja͢ck
Ja͢ck

Reputation: 173522

That should be simple enough, using .on() instead of .bind():

$('#content')
    .on('mouseenter', '.sdt_menu > li', function() {
    })
    .on('mouseleave', '.sdt_menu > li', function() {
    })

Note that .bind() and .on() work differently and a simple rename doesn't work.

Upvotes: 1

pierdevara
pierdevara

Reputation: 406

You can use delegate to bind an event to all current and future elements:

http://api.jquery.com/delegate/

Upvotes: 0

Related Questions