CODEWITHSUNDEEP
javascriptjqueryajaxhtml
pTRONICA
pTRONICA

Reputation: 59

jQuery load dynamic content and make it accessible with a url

I have little time studying JavaScript and jQuery and would like to learn how to load dynamic content in a div of the site by a button and the loaded content create a new url to be indexable and could share with friends social networks, etc.

I created a function that is called with the onclick event of a button. The function takes two parameters, the div where to load the content and the path where the content to be loaded is stored:

    function contentLoad(nameDiv, url)

{
     $(name).load(url, function() {

   });
}

button:

 <a href="#" onClick="contentLoad('#div-content','moon/content1.php')">Moon</a>

I do not know if I'll be doing well. The code still being very simple and charge me works perfectly content. But I'd like to load content would generate a new url that was accessible and that the link could be shared. How could I get it?

I think we need to store data loaded into a content with jQuery url when attempting to access, mount everything automatically and show visitors the web with dynamic content already loaded.

See if you can guide me in the process and that steps need to get it. Thanks to all.

Upvotes: 0

Views: 1846

Answers (1)

xxxmatko
xxxmatko

Reputation: 4142

You can use "client routes", using the hash tag in your url, and than some js lib which can handle this routes, for instance you can use director js, here is an example:

$(function() {
	var author = function () { 
        // Load your content using AJAX
        $("#content").html("author");
    };
    var viewBook = function (bookId) {
        $("#content").html("viewBook: bookId is populated: " + bookId);
    };

    var routes = {
        '/author': author,
        '/books/view/:bookId': viewBook
    };

    var router = Router(routes);
	router.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Director/1.2.8/director.js"></script>
<div id="content"></div>
<ul>
    <li><a href="#/author">#/author</a></li>
    <li><a href="#/books/view/1">#/books/view/1</a></li>
</ul>

Upvotes: 2

Related Questions