How to load html in div while clicking a href or button using jquery?

Question

I have tried to load html in a div by clicking the links.I managed to do it.But i have another requirements that i need minimal jquery code and when i click each link appropriate html in the div.

html of my code:

<div class="tac templateIcons">
                    <a href="#" data-id="1" id="template1">
                        <img src="assets/img/template1-01.png" alt="template 1" />
                    </a>
                    <a href="#" data-id="2"  id="template2">
                        <img src="assets/img/template1-02.png" alt="template 2" />
                    </a>
                    <a href="#" data-id="3"  id="template3">
                        <img src="assets/img/template1-03.png" alt="template 3" />
                    </a>
                </div>
                <div class="contentParent">
                    <div id="contentDiv">

                    </div>
                </div>

Javascript code

    $(function(){
     $("#template1").click(function(){
        $("#contentDiv").load("template2.html");
      }); 
      $("#template2").click(function(){
        $("#contentDiv").load("template2.html");
      }); 
      $("#template3").click(function(){
        $("#contentDiv").load("template3.html");
      }); 
    });

The above code is working for me, but the issues is if i have 20 a hrefs or pages i have to write 20 js functions .

I need to avoid it by doing a smart dynamic js solution.

I wrote js code based on the data attribute as follows:

html code:

<div class="tac templateIcons">
                    <a href="#" data-id="1" data-name="1" id="hidediv">
                        <img src="assets/img/template1-01.png" alt="template 1" />
                    </a>
                    <a href="#" data-id="2" data-name="1" id="hidediv">
                        <img src="assets/img/template1-02.png" alt="template 2" />
                    </a>
                    <a href="#" data-id="3" data-name="1" id="hidediv">
                        <img src="assets/img/template1-03.png" alt="template 3" />
                    </a>
                </div>
                <div class="contentParent">
                    <div id="contentDiv" class="contentDivStyle">

                    </div>
                </div>

JS code:

$(function(){
    $("#hidediv").click(function(){

      $(this).attr("data-id");
      $page = "template" + $(this).attr("data-id") + ".html";
      console.log("log message:" + $page);
      $("#contentDiv").load($page);
    }); 

    });

But the thing is i used same id for the all the a hrefs and it will take only the first one. How can i make it dynamic even if i add 30 a hrefs and use a single piece of js code?

Could you please help me?

score 2 · Answer 1 · answered Aug 28 '17 at 20:19

Use classes instead of ID (unique identifier)

HTML:

<div class="tac templateIcons">
    <a href="#" data-id="1" class="template" data-load="template1.html">
        <img src="assets/img/template1-01.png" alt="template 1" />
    </a>
    <a href="#" data-id="2"  class="template" data-load="template2.html">
        <img src="assets/img/template1-02.png" alt="template 2" />
    </a>
    <a href="#" data-id="3"  class="template" data-load="template3.html">
        <img src="assets/img/template1-03.png" alt="template 3" />
    </a>
</div>
<div class="contentParent">
    <div id="contentDiv">

    </div>
</div>

jQuery:

$(".template").click(function(){
    var template = $(this).data("load");
    $("#contentDiv").load(template);
});

score 0 · Answer 2 · answered Aug 28 '17 at 20:18

0

You can not use the same id more than once on a page. Change it to class.

answered Aug 28 '17 at 20:18

Jaycbrf4

144
1
13

score 0 · Answer 3 · answered Aug 28 '17 at 20:19

You need to use a class to mark your anchors instead.

<a href="#" data-id="1" data-name="1" class="hidediv">
    <img src="assets/img/template1-01.png" alt="template 1" />
</a>
<a href="#" data-id="2" data-name="1" class="hidediv">
    <img src="assets/img/template1-02.png" alt="template 2" />
</a>

etc. Then the jquery is just as easy:

$(function(){
  $(".hidediv").click(function(){

    var currentId = $(this).data("id");
    $page = "template" + currentId  + ".html";
    console.log("log message:" + $page);
    $("#contentDiv").load($page);
  }); 

});

Notice the class selector $('.class') and the jquery function data() to get the data attribute.

score 0 · Answer 4 · answered Aug 28 '17 at 20:20

If you want to write one function called from multiple tags, you have to give all these tags the same class.

<div class= "tac templateIcons">
                        <a href="#" data-id="1" class"loadHTML" box="1"  id="template1">
                            <img src="assets/img/template1-01.png" alt="template 1" />
                        </a>
                        <a href="#" data-id="2"  class"loadHTML" box="2"   id="template2">
                            <img src="assets/img/template1-02.png" alt="template 2" />
                        </a>
                        <a href="#" data-id="3"  class"loadHTML" box="3"   id="template3">
                            <img src="assets/img/template1-03.png" alt="template 3" />
                        </a>
                    </div>
                    <div class="contentParent">
                        <div id="contentDiv">

                        </div>
                    </div>

And than you need just one function:

 $(".loadHTML").click(function(){
            var box = $(this).attr("box"); 
            $("#template" + box).load("template"+box+".html");
          });

score 0 · Answer 5 · answered Aug 28 '17 at 20:21

To get an index of an element with respect to its parent use .index() without any parameters. Also use a class for the click event instead of ID.

DEMO:

$(function() {
  $(".templater").click(function() {
    $page = "template" + ($(this).index() + 1) + ".html";
    console.log("log message:" + $page);
    $("#contentDiv").load($page);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tac templateIcons">
  <a href="#" id="template1" class="templater">
    <img src="assets/img/template1-01.png" alt="template 1" />
  </a>
  <a href="#" id="template2" class="templater">
    <img src="assets/img/template1-02.png" alt="template 2" />
  </a>
  <a href="#" id="template3" class="templater">
    <img src="assets/img/template1-03.png" alt="template 3" />
  </a>
</div>
<div class="contentParent">
  <div id="contentDiv">

  </div>
</div>

References:

Determining child's index in its parent

How to load html in div while clicking a href or button using jquery?

5 Answers5