Jump to content
Larry Ullman's Book Forums

What'S The Possible Way To Select Class Or Id From Ajax Response


Recommended Posts

I have been making a menu to select primary category and ajax returns the subcategory. when I picks an option in subcategory category, the ajax then return the products under the subcategory. So far  so good those steps do works.

 

My next step is to click a specific product that is returned by Ajax response and have it calling ajax again to update its newsletter setting in the product DB. The problem here is that I am not able to select the product.  Each product_sku have a <p>tag with a class "add_small". So I want to know any possible solution to deal this situation. 

 

thanks.

// Not able to select add_small class which comes from ajax response
if(document.getElementsByClassName("add_small")){
      var add_product = document.getElementsByClassName("add_small");
      for(var a = 0; a < add_product.length; a++){
           add_product[a].onclick = function(){
           alert(this.value);
          }
      }
  }

Link to comment
Share on other sites

full codes on the problematic page

           window.addEventListener('load', ajax_init, false);
            function ajax_init(){
                // btn to close modal window
                if(utility.$('close_window_btn')){
                    utility.$('close_window_btn').onclick = close_window;
                }
                // btn for open modal window
                if(utility.$('add_product_modal')){
                    utility.$('add_product_modal').onclick = open_window;
                }
                
                
                var ajax = getXMLHttpRequestObject();
                if(ajax){
                    // selecting primary category
                    if(utility.$('primary_cat_modal')){
                        utility.$('primary_cat_modal').onchange = function(){
                            // get the value from select tag
                            var parent_id = utility.$('primary_cat_modal').value;
                            //alert(document.getElementsByTagName("option")[parent_id].value);
                            ajax.open('get', 'sub_cat_ajax.php?pid=' + encodeURIComponent(parent_id));
                            //alert(parent_id);
                            ajax.onreadystatechange = function(){
                                handleResponse(ajax);
                            }
                            ajax.send(null);
                            return false;
                        }
                    } // End of check DOM
                    // selecting subcategory
                    if(utility.$('sub_category_modal')){
                        utility.$('sub_category_modal').onchange = function(){
                            var category_id = utility.$('sub_category_modal').value;
                            ajax.open('get', 'get_products_ajax.php?cid=' + encodeURIComponent(category_id));
                            ajax.onreadystatechange = function(){
                                handleResponse_product(ajax);
                            }
                            ajax.send(null);
                            return false;
                        }
                    }
                    
                    // add products
                    if(document.getElementsByClassName("add_small")){
                        var add_product = document.getElementsByClassName("add_small");
                        for(var a = 0; a < add_product.length; a++){
                            add_product[a].onclick = function(){
                               alert(this.value);
                            }
                        }
                    }


                } // End of ajax IF
            } // And of initAjax function
            
            function handleResponse(ajax){
                if(ajax.readyState == 4){
                    if((ajax.status == 200) || (ajax.status == 304)){
                        var sub_cat = utility.$('sub_category_modal');
                        //alert(ajax.responseText);
                        sub_cat.innerHTML = ajax.responseText;
                    }
                }
            }
            
            function handleResponse_product(ajax){
                if(ajax.readyState == 4){
                    if((ajax.status == 200) || (ajax.status == 304)){
                        var products = utility.$('content_area');
                        products.innerHTML = ajax.responseText;
                    }
                }
            }
            
            function close_window(){
                var close_win = utility.$('add_product');
                close_win.style.visibility = "hidden";
            }
            
            function open_window(){
                var open_win = utility.$('add_product');
                open_win.style.visibility = 'visible';
            }
Link to comment
Share on other sites

You absolutely can use document.getElementsByClassName to select all the DOM elements that have a particular class name.

Of course, the one caveat is that the getElementsByClassName method is not supported in IE8 and below. Details:

http://caniuse.com/getelementsbyclassname

 

You also have the option of using document.querySelectorAll, which is more flexible than document.getElementsByClassName, and it's supported in IE8 (but not IE7 and below):

http://caniuse.com/queryselector

 

And lastly, if you have to support IE8 and below, then you can use the code on the following page as a polyfill for old browsers:

http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie

 

In short, you should be able to use the document.getElementsByClassName method fine, so if you're having issues, likely, there is an error somewhere else if your code. If you run your code in Chrome, what kind of errors (if any) are being output to the console?

Link to comment
Share on other sites

hi HartleySan.  Thanks for helping out !

 

Sorry my explaination might not be clear enough. 

 

Here is html code in the problem area, 

<div id="content_area">
</div>

Before a category is selected, the target area is empty.

 

After I selected a category, ajax responses fill in the empty content_area with product data.

<div id="content_area">
<table cellspacing="3" cellpadding="3" align="left">
<tbody>
<tr class="product_row">
<td>
<table class="p_frame">
<tbody>
<tr>
<td>
<img width="80px" src="images/product/resized/DiamondGRP_110x110.jpg">
</td>
<td>
<p class="add_small">DM100</p>
<p>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<td>
</tr>
<tr class="product_row">
<tr class="product_row">
</tbody>
</table>
<p id="test">get this value</p>
</div>
</div>

Then inside the javascript init function, I add document.getElementsByClassName( ) trying to select the product_sku (<p class="add_small">). I am not able to select it. I tried to select different id or class from same ajax response content, all of them failed. If I select a html element that is not a return from ajax response, that would work. 

 

I think that the problem is when init function runs on window just loaded, the <p class="add_small"> does not exists. It only exist later when I choose a category.  Therefore, getElementsByClassName( ) returns false. Is that the case? Any possible solutions? 

 

thanks again.

Link to comment
Share on other sites

Okay, I understand your problem now.

Also, your assumption is 100% correct. The init function is only executed on page load, and since the element(s) you're searching for do not exist in the DOM at that time, you will not get what you want.

 

What you need to do is search for the element(s) you want after the Ajax response is received and the DOM is populated with the tabular data (or whatever data you're waiting for).

Try moving the getElementsByClassName method call to somewhere after the Ajax-fetched data is placed in the DOM, and you should be fine.

 

Please let us know if you have any issues.

Thank you.

  • Upvote 1
Link to comment
Share on other sites

HartleySan,

 

Finally I made the script work after reading your post. Thank you! It really helps a lot. 

 

All I do is move the product class selector inside the ajax.onreadystatechange() of the category block, so that when the category on change, the getElementsByClassName is able to capture the element I am looking for. 

                    if(utility.$('sub_category_modal')){
                        utility.$('sub_category_modal').onchange = function(){
                            var category_id = utility.$('sub_category_modal').value;
                            ajax.open('get', 'get_products_ajax.php?cid=' + encodeURIComponent(category_id));
                            ajax.onreadystatechange = function(){
                                handleResponse_product(ajax);
                                
                                // add products
                                if(document.getElementsByClassName("add_small")){
                                    var add_product = document.getElementsByClassName("add_small");
                                    for(var a = 0; a < add_product.length; a++){
                                        add_product[a].onclick = function(){
                                           var product_sku = this.parentNode.childNodes[1].textContent;
                                           ajax.open('get', 'update_newsletter_ajax.php?sku=' + encodeURIComponent(product_sku));
                                           ajax.onreadystatechange = function(){
                                               handleResponse_update_newsletter(ajax);
                                           }
                                           ajax.send(null);
                                           return false;
                  
                                        }
                                    }
                                }
                            }
                            ajax.send(null);
                            return false;
                        }
                    }
Link to comment
Share on other sites

 Share

×
×
  • Create New...