✏️ Explanatory Question

jQuery Hands-on 5 - AJAX

👁 748 Views
📘 Detailed Answer
748
Total Views
4
Related Qs
0%
Progress
No previous question
No next question
💡

Answer with Explanation

1. jQuery Hands-on 5 - AJAX

Write a function load_des() which can load content for the div tag #item1-des from the URL: "https://gist.githubusercontent.com/frescoplaylab/845 8dd75a120cf0cfbdf45be813d8f03/raw/84784527d760e f1f877f0b4bb02a3a5e12e32f4c/file.html".

Solution

index.html

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">  
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="index.js"></script>
   
</head>

<body onload="load_des()">
    <div class="topnav">
        <a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
        <a href="#" style="float:right; font-size:20px"><i>Sign In</i></a>
        <a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>

    </div>
    <br />
    
    <br />
   
    <div class="product_box" id="item1" onmouseover="hover1()">
        <div class="single_1">
            <div class="container">     
                <img src="img/dummy_product.jpg" />
            </div>
        </div>
        <div class="single_2">
            <div class="prod_desc">                
                <div class="pdt_details_2_col">
                    <span class="brand">Brand</span>
                </div>
                <div class="pdt_details_2_col">
                    <span class="brand">Price</span>               
                </div>
            </div>


        </div>
        <div class="single_3">
            <div class="quantity_sec">
                <label>Quantity</label>
                <br>
               <input placeholder="Quantity" type="number">
            </div>
        </div>
        <div class="single_4">
      
        <input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48"/>            
        </div>        
    </div>
    <div id="item1-des" class="des">
            Some Description 1
    </div>

     <div class="product_box" id="item2" onmouseover="hover2()">
        <div class="single_1">
            <div class="container">
        
                <img src="img/dummy_product.jpg" />
            </div>

        </div>
        <div class="single_2">
            <div class="prod_desc">
                
                <div class="pdt_details_2_col">
                    <span class="brand">Brand</span>                   
                </div>
                <div class="pdt_details_2_col">
                    <span class="brand">Price</span>
                    
                </div>
            </div>


        </div>
        <div class="single_3">
            <div class="quantity_sec">
                <label>Quantity</label>
                <br>
               <input placeholder="Quantity" type="number">
            </div>
        </div>
        <div class="single_4">
        
        <input type="image" id="img2" src="img/orangeCart.png" alt="Submit" width="48" height="48"/>
            
        </div>

    </div>
    <div id="item2-des" class="des">
            Some Description 2
    </div>
    <br />

       <button class="buy" id="buy" onmouseover="big()">BUY</button>

  

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

script.js

 function load_des() {
  $("#item1-des").load("https://gist.githubusercontent.com/frescoplaylab/8458dd75a120cf0cfbdf45be813d8f03/raw/84784527d760ef1f877f0b4bb02a3a5e12e32f4c/file.html");
}; 
No previous question
No next question