jquery ajax open a link page into another page

Question

I ve created three fiddles for easy to understand:

index.html - Index Fiddle

helpFiles.html - Help Fiddle

products.html - Products

in Index.html When i click Products read more link it should open helpFiles.html page(initially helpFiles.html contains no data having main div with id "#helpFiles") with Products.html page content should insert into #helpFiles div.

Pls help me out with sample code and sorry for my english.

Seems like your solution may be found here : http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file. Take a look, it talks about using JQuery to perform such a process. — Anwar, Feb 18 '15 at 11:01
i am getting confused like in index.html page ill click any link(read more...) which ll navigate to helpfiles.html. in helpfiles.html how will i know that i click on particular link like products item. do i need to give different ids to index.html items.? with ids how ill navigate. pls help me — UiUx, Feb 18 '15 at 11:10
you could pass the productname through the url and access it in the 2nd page — Nibin, Feb 18 '15 at 11:25
as i am very new to ajax, can u pls prepare answer with code. so that i can mark as accepted — UiUx, Feb 18 '15 at 11:33

Nibin · Accepted Answer · 2015-02-18T12:24:42.693

Try localStorage

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

In your index.html you could replace your

<a href="HelpFiles.html" class="readMore">Read more...</a>

with

<a href="HelpFiles.html?page=products" class="readMore">Read more...</a>

Add this script on the top of this page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".itemContent .readMore").click(function(){
        var imgName = $(this).parent().parent().find("img").attr("src");
        url = $(this).attr("href"); //Gets the url from the anchor tag clicked
        var page = url.split("?page=");
        localStorage.setItem("pageName", page[1]);
        localStorage.setItem("imageName", imgName);
    });
 });
</script>

In your helpfiles.html you have to add the following script on top

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
       var pageName = localStorage.getItem("pageName"); 
       var imagepath =localStorage.getItem("imageName");
       $("#helpFiles").load(pageName+".html"); 
});
</script>

Hope this might give you an idea mate.. :)

FYI

localStorage

load()

that works gr8. and one more small doubt pls help me with this as well. how can i pass index.html page clicked image to helpfiles.html page..? — UiUx, Feb 18 '15 at 11:53
can u pls provide me the code as well pls and provide me the best tutorials as well. — UiUx, Feb 18 '15 at 12:02
and how can i use "imagepath" variable? i tried like this but no hope $("#item-image").load(imagepath); where as #item-image is from products page — UiUx, Feb 18 '15 at 12:36

jquery ajax open a link page into another page

1 Answers1