4

I'm using an ajax method .load to replace a content of a div. The problem is because a library which I'm using doesn't allows me to replace content of a div because some functions still working in the background.

In this case I decided to remove a specific div and then add it again and on the last load a content of a div. For this I created a code:

HTML:

<div id="menu1"> <ol> <li><a href="#"><b>Choose content</b></a> <ul> <li id="link_1"><a href="#">Link 1</a></li> <li id="link_2"><a href="#">Link 2</a></li> </ul> </ol> </div> <div id="container"> <div id="div_content"></div> </div>

JQUERY

<script type="text/javascript"> $(document).ready(function(){ $("#link_1").click(function(){ $("#div_content").remove(); $("#container").append("<div id='div_content'></div>"); $('#div_content').load('content1.html'); }); $("#link_2").click(function(){ $("#div_content").remove(); $("#container").append("<div id='div_content'></div>"); $('#div_content').load('content2.html'); }); }); </script>

With this code everything works well. The thing is in my Menu i will have a big number of links to others contents. Thats why i don't like to have repetitive codes with .remove and .append in every link.

For this I created .class group for objects and I'm using .remove and .append for specific .class, and .load function for specific link id.

<div id="menu1"> <ol> <li><a href="#"><b>Choose content</b></a> <ul class="clear_div1"> <li id="link_1"><a href="#">Link 1</a></li> <li id="link_2"><a href="#">Link 2</a></li> </ul> </ol> </div> <div id="container"> <div id="div_content"></div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".clear_div1").click(function(){ $("#div_content").remove(); $("#container").append("<div id='div_content'></div>"); }); $("#link_1").click(function(){ $('#div_content').load('content1.html'); }); $("#link_2").click(function(){ $('#div_content').load('content2.html'); }); }); </script>

In this code problem is that always .load function is executed before functions .remove and .append. Do You have any idea how to make function .load executed after .remove and .append ?

Improve this question

3 Answers 3

Reset to default
1

Use a combination of data-* attributes, and jQuery's .data method and you can then just use a single callback to do the work.

HTML

<ul> <li class="content_link" data-path="content1.html" id="link_1"><a href="#">Link 1</a></li> <li class="content_link" data-path="content2.html" id="link_2"><a href="#">Link 2</a></li> </ul>

Javascript

$(document).ready(function(){ //Get all the links with class 'content_link' $(".content_link").click(function(){ //Use the data method to get the value of data-path var contentPath = $(this).data("path"); $("#div_content").remove(); $("#container").append("<div id='div_content'></div>"); $('#div_content').load(contentPath); }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is only my opinion, but I think there's no need for fancy stuff like data attributes. Simpler is better for performance and compatibility reasons.
1

Unfortunately, I don't believe you can guarantee the order of the click handles. (See below for an explanation as to why load is always called first.)

My recommendation is to add a data- attribute to solve this, and add a click-event function to dry out this behavior.

$(document).ready(function(){ var resetContainer = function () { var $li = $(this), newPage = $li.data('content'), $content = $("#div_content"), $container = $("#container"); $content.remove(); $container.append("<div id='div_content'></div>"); $content.load(newPage); } $(".loadPage li").on('click' ,resetContainer); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="menu1"> <ol> <li><a href="#"><b>Choose content</b></a> <ul class="loadPage"> <li id="link_1" data-content='content1.html'><a href="#">Link 1</a></li> <li id="link_2" data-content='content2.html'><a href="#">Link 2</a></li> </ul> </ol> </div> <div id="container"> <div id="div_content"></div> </div>

-- Update/Explanation:

On second glance, the reason why the load functionality was happening first was because of event bubbling. When you were clicking, the first element you click was the li (actually the link, but nothing happens with href="#"). The li elements have the .load() functions, so they get called first.

Once all event handling with the li occurs, the browser checks one level up (in your case, the ul with the .clear_div1. The browser will trigger any click event handlers on the ul, and then bubble up the DOM tree (checking for click events along the way) until either it reaches the top or propagation is forced to stop (like event.stopPropagation()).

That said, I still think the code I provided gives you a cleaner more scalable solution to what you intended. Best of luck!

Improve this answer

Comments

0

Avoiding repetition is what functions are for. You can do something like this.

function makeClickHandler(n) { return function () { $("#div_content").remove(); $("#container").append("<div id='div_content'></div>"); $('#div_content').load('content'+n+'.html'); } } $("#link_1").click(makeClickHandler(1)); $("#link_2").click(makeClickHandler(2));

That said, removing the whole element and creating it again is probably not a good idea.

Edit: A personal opinion: JQuery is no substitute for knowing js. I highly recommend checking this and this.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.