Hi all,

I fetch information from database using ajax , one time using $.ajax() and the other by create  XMLHttpRequest object in the same  page ,

my code looks like this :

HTML code :

1. <button class='orderBtn' >order</button>
2. <!--here some html code-- >
3. <ul id='item-nav'>
4.   <li ><a cate_id='1'>item_1 </a></li>
5. <li ><a cate_id='2'>item_2 </a></li>
6. </ul>
7. <div id="items_container"></div>

_javascript code :

1. $(document).ready(function() {
2. 
   
3. //here some code
4. 
   
5. $("ul#item-nav li").click(function() {
6.             
7.             //here some code
8.             setTimeout(function() {
9.                 showItems(code,id);
10. }, 300);
11.             
12.         });
13. 
    
14. //here i included the order_fn.js file where i used $.ajax()
15. $.getScript("js/order_fn.js"); 
16. 
    
17. })
18. 
    
19. //get data using ajax__2
20. function showItems(str,id) {
22. document.getElementById("items_container").innerHTML = "";
24.     if (str == "") {
25.         document.getElementById("items_container").innerHTML = "";
26.         return;
27.     } else { 
28.         if (window.XMLHttpRequest) {
29.             // code for IE7+, Firefox, Chrome, Opera, Safari
30.             xmlhttp = new XMLHttpRequest();
31.         } else {
32.             // code for IE6, IE5
33.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
34.         }
35.         
36.         xmlhttp.onreadystatechange = function() {
37.             if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
38. 
    
39.                 //by reloading order_fn.js my code works well
40.              $.getScript("js/order_fn.js");
41.                 
42.                 document.getElementById("items_container").innerHTML = xmlhttp.responseText;
43.                 
44.             }
45.         }
46.         
47.         xmlhttp.open("GET","getcateg.php?cate_code="+str+"&cateID="+id,true,function() {
48.                 
49. });
50.         xmlhttp.send();
51.        
52. 
    
53.     }
54.  }

    

  order_fn.js file :

 

1. //get data using ajax__1
2. $('.orderBtn').click(function (){
5. //some code
6. $.ajax({
7.            url: 'file_name.php',
8.            data:formData,
9.            dataType: "json",
10.            type: 'GET',
11.            success: function(data) {
12.             //do something here
13.            }
14.         });
16. });

my code was work well before I expand it with  using XMLHttpRequest.

When i used XMLHttpRequest the click event on .orderBtn button does not work after execute the ajax event using XMLHttpRequest.

so I Dismissed it in a separate file "order_fn.js" file ,because it need to use the instruction 

1. $.getScript("js/order_fn.js");

two time ,one to include the code and the other to reload it after execute the ajax event using XMLHttpRequest.

my question is ,Is this the best way to resolve that problem?

I need your guidance in how to improve my code.

thanks.