CODEWITHSUNDEEP
javascriptjquery
tclark
tclark

Reputation: 1

How to load separate html page into a div on click?

I am really new to javascript and jquery, but I am trying to create a page that will allow the user to click on a Country name and information for that country will load in a div from a separate html file.

Else where I found this code which works nicely for this, using the .click(function) on the <a> tag:

var $j = jQuery.noConflict();

$j(document).ready(function(){
    $j("a").click(function(){
        $j.ajax({
            url: $j(this).attr("href"),
            success: function(response) {
                $j("#partnerContent").html(response);
            }
        });
        return false;
    });
});

Here is the basic html:

<div id="contentcontain">
    <div class="partnercol1">
        <div class="container">
            <div id="menu" class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">International Sales <span class="caret"></span></button>
                <ul class="dropdown-menu scrollable-menu" role="menu">
                    <li><a href="partners/belgium.html">Belgium</a></li>
                    <li><a href="partners/brunei.html">Brunei</a></li>
                    <li><a href="partners/bulgaria.html">Bulgaria</a></li>
                </ul>
            </div>
      </div>
  </div>
  <div class="partnercol2">
      <div id="partnerContent"></div>
  </div>

However, now every <a> tag on the page (including top and bottom menus) loads their href into the div when clicked. How can I target just the div containing the state menu to work with this function?

Upvotes: 0

Views: 1564

Answers (3)

Marc B
Marc B

Reputation: 360592

You're loading an entire html page, which means you're loading 

<html>...</html>

and then stuffing that in its entirety into your page, that means you'll eventually have 

<html>
    ....
    <html>...</html>
    ...
</html>

which is NOT valid. If you're trying to replace the contents of a single <div> in your page, then either you fetch that entire page into a var and slice out the chunk you want, or have jquery fetch/insert ONLY the part you want, e.g.

$('#div_to_replace').load('source_of_new.html #id_of_element_to_use_for_replacement');

Note the second #... argument in the .load() call. That tells jquery to ignore everything in the page EXCEPT for the specified element/ID. Only that ID's contents will be stuffed into #div_to_replace.

Upvotes: 0

Remi Smirra
Remi Smirra

Reputation: 2539

in your html, put:

<ul class="dropdown-menu scrollable-menu" role="menu">
    <li><a class="menu-item" href="partners/belgium.html">Belgium</a></li>
    <li><a class="menu-item" href="partners/brunei.html">Brunei</a></li>
    <li><a class="menu-item" href="partners/bulgaria.html">Bulgaria</a></li>
</ul>

And in your javascript

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".menu-item").click(function(){
 $j.ajax({
  url: $j(this).attr("href"),
  success: function(response) {
   $j("#partnerContent").html(response);
  }
});
 return false;
});
});

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

Make the selector for the elements you're attaching the events to more restrictive:

// this selects all the anchors below the items with ID menu
$j("#menu a").click(function () {
    ...
});

Upvotes: 2

Related Questions