I was wondering if it was possible to change another page that's not opened yet, when a user clicks a link from the first page. It's hard to explain, but I'll try to show you what I mean with an example below.
The html is more plex for the actual site, but here is a watered-down version:
Index:
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<div id="container">
<div class="img">
<a href="PRODUCTPAGE.html">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a href="PRODUCTPAGE.html">
<img src="product2.jpg"/></a>
</div>
</body>
Product Page:
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<div id="container">
<div id = "product1">
all of product 1 info and pictures
</div>
<div id = "product2">
all of product 2 info and pictures
</div>
So basically, is it possible just using javascript, no php or anything, when product1 image is clicked to only show the product1 info on the product page and when product2 is clicked only show the info for product 2 on the page. I've been trying to find something similar but as of yet haven't, which leads me to believe I may not be able to do it, but I thought I would ask.
My javascript document doesn't have much in it, because I haven't been able to figure it out, but I have been playing around trying to make their display = none. I haven't been able to get a variable to continue onto the next page, if you know what I mean. Sorry, I only have a basic understanding of Javascript.
I was wondering if it was possible to change another page that's not opened yet, when a user clicks a link from the first page. It's hard to explain, but I'll try to show you what I mean with an example below.
The html is more plex for the actual site, but here is a watered-down version:
Index:
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<div id="container">
<div class="img">
<a href="PRODUCTPAGE.html">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a href="PRODUCTPAGE.html">
<img src="product2.jpg"/></a>
</div>
</body>
Product Page:
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<div id="container">
<div id = "product1">
all of product 1 info and pictures
</div>
<div id = "product2">
all of product 2 info and pictures
</div>
So basically, is it possible just using javascript, no php or anything, when product1 image is clicked to only show the product1 info on the product page and when product2 is clicked only show the info for product 2 on the page. I've been trying to find something similar but as of yet haven't, which leads me to believe I may not be able to do it, but I thought I would ask.
My javascript document doesn't have much in it, because I haven't been able to figure it out, but I have been playing around trying to make their display = none. I haven't been able to get a variable to continue onto the next page, if you know what I mean. Sorry, I only have a basic understanding of Javascript.
Share Improve this question edited May 27, 2012 at 4:23 animuson♦ 54.8k28 gold badges142 silver badges150 bronze badges asked May 27, 2012 at 1:13 user1419638user1419638 352 silver badges4 bronze badges 2- I know you haven't tagged this for jQuery, but is pulling the product info into the current page (as a fragment of the product page) an option? If so, I could show you how in an answer. – Tieson T. Commented May 27, 2012 at 4:31
- Are you refering to another separate window/tab? if so yes you can manipulate it but only if your script has triggered the opening of that page. – Mihai Stancu Commented May 27, 2012 at 4:34
3 Answers
Reset to default 2The technique that you're looking for is a bination of DHTML (Dynamic HTML) and AJAX (Asynchronous JavaScript and XML).
DHTML:
The idea behind DHTML is that when the user requests an HTML page from the server, the server responds with that page, as well as other data that may be needed if a user were to perform certain actions, such as clicking on a product image.
The data that the server returns to the HTML page, upon initial pageload, is generally hidden by default. For instance, the DOM of the page is loaded, but it may have style="display:none" on the elements.
Once a user initiates a certain action, the page uses JavaScript to manipulate the elements on the page that are visible, as well as the ones that may be hidden.
Consider the following page:
<body>
<div id="page1">
<div id="container">
<div class="img">
<a id="product1" onclick="showProduct1();" href="#">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a id="product2" onclick="showProduct2();" href="#">
<img src="product.jpg"/> </a>
</div>
</div>
</div>
<div id="page2" style="display:none">
<div id="product_page_wrapper">
<a href="#" onclick="backToCategories()">back to Product Categories</a>
<div id="productDetails">
<div id="prod1">
...
...
</div>
<div id="prod2">
...
...
</div>
</div
</div>
</div>
</body>
The above page is split up into two sections, one with the id="page1" and the other id="page2". By default, we hide page 2.
When a user clicks on the link for a product, we hide page 1 and show page 2:
document.getElementById("page1").setAttribute("style","display:none");
document.getElementById("page2").setAttribute("style","display:block");
Additionally, depending on which link was clicked, we also unhide the product details for the product that was clicked, and hide the details for the product that wasn't. For example, if product 1 is clicked, we show product 1:
document.getElementById("prod2").setAttribute("style","display:none");
document.getElementById("prod1").setAttribute("style","display:block");
The end result is that only the page2 div is displayed. If the user clicks the "back to Product Categories" link, we reverse the process, hiding page2 and showing page1.
In summary, this type of manipulation can be done pletely on the client-side, without any PHP or server-side code, simply using HTML, JavaScript, and CSS, as pointed out by @Marcel. However, the use of pure DHTML is more of an academic exercise than a practical solution, since the server-side maintains customer data, product data, and everything that would be required in a professional, revenue generating product.
AJAX:
AJAX, on the other hand, is quite similar to DHTML and may even be considered an extension of DHTML. The idea behind AJAX is that -- when the user initiates an action -- the page requests data from the server. When the server responds, the data is handed-off to a callback function that then manipulates the page using the data.
In your particular example, you might use a bination of both DHTML and AJAX to pull off the desired effects. Consider the following page, which uses AJAX to pull in the relevant HTML for the product the user selects:
<head>
<script type="text/javascript" src="external.js"></script>
<script>
function makeRequest(url) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = displayContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function displayContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
//alert(httpRequest.responseText);
document.getElementById("container").innerHTML = httpRequest.responseText;
} else {
alert('There was a problem with the request.');
}
}
</script>
</head>
<body>
<div id="container">
<div class="img">
<a id="product1" onclick="makeRequest('/getproduct?id=1')" href="#">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a id="product2" href="#" onclick="makeRequest('/getproduct?id=2')">
<img src="product2.jpg"/></a>
</div>
</div>
</body>
In the above example, when the user clicks on a link for a product, the server responds with just enough HTML to sufficiently replace the div#container portion of the page:
<span id="product">
<p>Product Name 1</p>
<p>Product details...</p>
</span>
This is injected into the page so that the DOM would then look like this:
<body>
<div id="container">
<span id="product">
<p>Product Name 1</p>
<p>Product details...</p>
</span>
</div>
</body>
Summary:
This question is tagged JavaScript, not jQuery, so the answers are focused on JavaScript, but the techniques described in the DHTML section are utilized in many JavaScript libraries. For example, see jQuery Mobile's Multi-Page Template for a demo of the technique you describe.
You could change the link to add parameter. This way PRODUCTPAGE.html knows which link you clicked.
<a href="PRODUCTPAGE.html?product1"><img src="product1.jpg"/></a>
<a href="PRODUCTPAGE.html?product2"><img src="product2.jpg"/></a>
Inside PRODUCTPAGE.html you could parse the URL using JavaScript and display only specific product's data.
Yes you can hide and show different parts of the DOM via javascript.
Check out this example of a toggle for an idea of what you need to do.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745317497a4622284.html
评论列表（0条）