CODEWITHSUNDEEP
jqueryhtml
user1463905
user1463905

Reputation: 11

load content into div using usual jquery and deeplinking

I'm not a programmer, I am primarily a designer, so I've got some difficulties in developing certain things.

I've got a doubt on how to use deep link and asual jquery (or other plugin more suitable) in the following scenario.

The nav structure is more or like:

<ul>
<li><a href="/pt/empresa/historia" title="História">História</a></li>
<li><a href="/pt/empresa/historia/missao" title="Missão">Missão</a></li>
<li><a href="/pt/empresa/historia/universo" title="Universo">Universo</a></li>
<li><a href="/pt/empresa/historia/numeros" title="números">números</a></li>
</ul>

and the div

<div id="content-mask">
<div id="content-container">
</div>
</div>

I want to load into content-container the content of the content-container in the page of the clicked link.

Upvotes: 1

Views: 705

Answers (4)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

Edited:

As OP Stated in his comment below:

how can I make it deeplink? So that the if I enter in the addressbar, for instance, www.site.com/pt/empresa/historia, it would load the content in the div of the associated file?

Solution:

$("ul li a").click(function(e){           

    // Include your domain address in a URL string with anchor's href
    var url = "http://www.your-website-address.com/" + $(this).attr('href')

    $('#content-container').html("Loading Please Wait");
    $('#content-container').load(url);    
    e.preventDefault();

});

Additional Notes:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

A WORKING DEMO

OLD:

Use jQuery .load() function to achieve this. 

$("ul li a").click(function(e){           
    $('#content-container').html("Loading Please Wait");
    $('#content-container').load(this.href);    
    e.preventDefault(); 
})​;

WORKING DEMO

Upvotes: 0

mgraph
mgraph

Reputation: 15338

first add id tag to ul:

<ul id="myList">

then:

$("ul#myList li a").click(function(){
   $.ajax({
      url : $(this).attr("href"),
      success:function(data){
         $("#content-container").html($(data).find("#content-container").html());
      }
   })
  return false;
})

Upvotes: 2

Ram
Ram

Reputation: 144669

You can use the load method:

Load data from the server and place the returned HTML into the matched element.

$(document).ready(function(){
    $('ul li a').click(function(e){
       e.preventDefault() // prevents the default action of the click event
       $('.content-container').load(this.href) // loads the content based on the value of href attribute 
       // or $('.content-container').load(this.href + " .content-container") in case that I have misunderstood your question
    })
})

Please note that you should have only one element with class of content-container otherwise you have duplicate contents.

Upvotes: 2

Argyle Ghost
Argyle Ghost

Reputation: 151

Have you thought about using a span tag like so: (You can also use a div tag as well if you needed, same kind of code.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    The values stored were 
    <span></span>
    and
    <span></span>
  </div>
<script>var div = $("div")[0];
    jQuery.data(div, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(div, "test").first);
    $("span:last").text(jQuery.data(div, "test").last);</script>

</body>
</html>

Upvotes: 0

Related Questions