Home/ Questions/Q 7995041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:17:33+00:00

I was wondering if it was possible to change another page that’s not opened

  • 0

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 complex 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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The technique that you’re looking for is a combination 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 completely 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 combination 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.

    • 0