0

My page layout has two main divs. One on the left and the other on the right. I tried reloading only the DIV on the left after submitting form via ajax.

$(".left-content").load('left.php');

left.php contains HTML for the left DIV. After refreshing, it does load the html and the div looks fine but not working. Any of the jQuery functions or anchor links are not working.

So I tried the following:

Previously was:

$("#slider").mousemove( function(e){
        $("#valBox").html($(this).val());
});

Added now, to detect newly added DOM elements:

$('body').on('mousemove', '#slider', function() {
    $("#valBox").html($(this).val());
});

previously was, for popup box:

<a href="#browse-search-popup" class="browse-search-popup-link"><span  id="searchLink" style='color:#fff;text-decoration:underline;font-weight:bold !important;' class='text-center'>browse courses</span></a>

Added now, for newly added DOM elements

if(window.location.href.indexOf("#browse-search-popup") != -1)
{
    $('.browse-search-popup-link').click();
}

Can someone explain what's the possibility for this to happen where no functions is working. Could it be possible duplicate ID? But when a DIV is reloaded isn't replaced with content specified 'left.php' where there's no chance for duplicate ID to occur?

master page (left-content) div

<div class="small-12 medium-12 large-12 left-content hide-for-small hide-for-medium columns">

                <div class="small-6 medium-6 large-8 columns titleBox hide-for-small hide-for-medium">
                <p>Find Tutors</p>
                </div>

                <br/><br/><br/><br/>
                <form name="form" id="search_tutor" method="post" action="#" class="hide-for-small">
                <!-- class => which item to select in autocomplete eg: class="1"-->

                 <input id="subject" type="text" name="subject" value="" placeholder="Subject" class="1 text-center"/ style="width:200px;margin:0 auto;" required>
                 <input  type="hidden" name="try" value="" />
      <div class="small-12 medium-12 large-12 text-center columns" style="padding:10px 0;">
                <span id="searchLink">or </span><a href="#browse-search-popup" class="browse-search-popup-link"><span  id="searchLink" style='color:#fff;text-decoration:underline;font-weight:bold !important;' class='text-center'>browse courses</span></a>
       </div>

                <!-- <div class="ui-widget2">-->
                <input id="location_input" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>
                <input  type="hidden" name="lat" value="" />
                <input  type="hidden" name="lon" value="" />
                <br/><br/>
                 <div class="small-12 medium-12 large-12 text-center columns">
                <input name="rate" type="range" min="10" max="300" step="10" value="100" id="slider"/>
                </div>
                <br/><br/>
                <div class="text-center">Within <span>RM</span><span id="valBox">100</span></div><br/>

                 <div class="small-12 medium-12 large-12 text-center columns">
                 <input name="distance" type="range" min="5" max="300" step="5" value="40" id="slider2"/><br/><br/>
                 </div>
                <div class="text-center">Within <span id="valBox2">40</span><span>km</span></div><br/>



                <div class="small-12 medium-12 large-9 large-centered text-center columns">
                     <a href="#more-popup" class="more-popup-link"><div class="moreBox">More Options&nbsp;<img src="<?php echo $path;?>/img/nav-icon.png" style="width:25px;"></div></a>
                </div>

                <!--more option starts-->
                <div id="div1"></div><!-- style="height:100px;display:none;"-->
                <div id="div2"></div>
                <div id="div3"></div>
                <!--<div id="capturePers">
                </div>
                <div id="captureTuit">
                </div>
                <div id="captureAvail2">
                </div>-->
                <!--more option ends-->

                <div class="text-center">
                <input type="submit"  class="text-center"name="submit" value="Search" id="search"></div><br/>
                </form>
                </div>

left.php

<div class="small-6 medium-6 large-8 columns titleBox hide-for-small hide-for-medium">
                <p>Find Tutors</p>
                </div>

                <br/><br/><br/><br/>
                <form name="form" id="search_tutor" method="post" action="#" class="hide-for-small">
                <!-- class => which item to select in autocomplete eg: class="1"-->

                 <input id="subject" type="text" name="subject" value="" placeholder="Subject" class="1 text-center"/ style="width:200px;margin:0 auto;" required>
                 <input  type="hidden" name="try" value="" />
      <div class="small-12 medium-12 large-12 text-center columns" style="padding:10px 0;">
                <span id="searchLink">or </span><a href="#browse-search-popup" class="browse-search-popup-link"><span  id="searchLink" style='color:#fff;text-decoration:underline;font-weight:bold !important;' class='text-center'>browse courses</span></a>
       </div>

                <!-- <div class="ui-widget2">-->
                <input id="location_input" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>
                <input  type="hidden" name="lat" value="" />
                <input  type="hidden" name="lon" value="" />
                <br/><br/>
                 <div class="small-12 medium-12 large-12 text-center columns">
                <input name="rate" type="range" min="10" max="300" step="10" value="100" id="slider"/>
                </div>
                <br/><br/>
                <div class="text-center">Within <span>RM</span><span id="valBox">100</span></div><br/>

                 <div class="small-12 medium-12 large-12 text-center columns">
                 <input name="distance" type="range" min="5" max="300" step="5" value="40" id="slider2"/><br/><br/>
                 </div>
                <div class="text-center">Within <span id="valBox2">40</span><span>km</span></div><br/>



                <div class="small-12 medium-12 large-9 large-centered text-center columns">
                     <a href="#more-popup" class="more-popup-link"><div class="moreBox">More Options&nbsp;<img src="<?php echo $path;?>/img/nav-icon.png" style="width:25px;"></div></a>
                </div>

                <!--more option starts-->
                <div id="div1"></div><!-- style="height:100px;display:none;"-->
                <div id="div2"></div>
                <div id="div3"></div>
                <!--<div id="capturePers">
                </div>
                <div id="captureTuit">
                </div>
                <div id="captureAvail2">
                </div>-->
                <!--more option ends-->

                <div class="text-center">
                <input type="submit"  class="text-center"name="submit" value="Search" id="search"></div><br/>
                </form>
                </div>
              </div><!--end row-->
112233
  • 2,206
  • 2
  • 23
  • 71
  • 3
    Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – MinusFour Jan 04 '16 at 03:09
  • @MinusFour, that was to do with dynamically added item and looping but my question is on div reloading problem – 112233 Jan 04 '16 at 03:11
  • look into using `hashchange` event. The mousemove code should work...does it? – charlietfl Jan 04 '16 at 03:11
  • @charlietfl, but why would this problem happen first of all, any idea? – 112233 Jan 04 '16 at 03:12
  • Not exactly clear which part is causing issues or where you have the `if()` statement. If that `if()` is only in page load code then it won;t run when `load()` runs – charlietfl Jan 04 '16 at 03:12
  • Where is the jquery script located? Is it on `left.php` or in its master page? – choz Jan 04 '16 at 03:18
  • @choz, in the footer (master page). In left.php on the HTML for the div contained – 112233 Jan 04 '16 at 03:20
  • 1
    Sounds a bit unclear. Can show put the layout of the master page (HTML) and the layout int `left.php`? I repeated reading through the questions and comments but find it hard to visualize things. – TaoPR Jan 04 '16 at 03:29
  • @TaoP.R., added them in my post above – 112233 Jan 04 '16 at 03:44

1 Answers1

1

Every time you load new content you need to hook up the jQuery event handlers again.

javascript events are like function callbacks that you subscribe to on specific instances, or elements.

When you load new content you essentially destroy the elements that were previously contained within your div, and create a bunch of new ones. These new ones may have the same name and id of the destroyed ones, but they are entirely new elements in the DOM. You must establish new event handlers because the event handlers you previously created were attached to objects that no longer exist.

Sam Axe
  • 31,472
  • 7
  • 52
  • 80