Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts

    querySelectorAll question : How to target specific Div

    I have PHP displaying on a page where I would like to toggle (display) a certain Div for every row displayed from the PHP Database.

    As of right now, my cashInvoiceList selects all divs that have the class .showInvoice. And then my for statement gives each of those divs a different identifier along with the Click Event Listener.

    However, at the moment it obviously just toggles the first .invoiceContainer. I am assuming I need to make invoiceCashContainer a querySelectorAll however I do not know how to make it toggle the div I want it to toggle, it just toggles the top one. If I do querySelectorAll then none of the invoiceContainer are defined.

    Here is the javascript:

    Code:
    var cashInvoiceList, invoiceContainer;
    
    function init() {
    	cashInvoiceList = document.querySelectorAll(".showInvoice");
    	
    	invoiceCashContainer = document.querySelector(".invoiceContainer");
    	
    	
    for (i=0; i<cashInvoiceList.length; i++){	
    	cashInvoiceList[i].addEventListener("click", toggleCash, false);
    }
    	
    
    	function toggleCash() {
    		TweenMax.to(invoiceCashContainer, 1, {alpha: 1});
    		invoiceCashContainer.classList.toggle("invoiceCashContainer")
    		console.log("Toggling Cash Container Div");
    	}	
    }
    window.addEventListener("load", init, false);
    Here is the PHP

    Code:
    <div id="allCashInvoices">
    <?php
    while($row = mysql_fetch_array($CashResults)){
    echo"
    <div class=\"showInvoice\">
    	<h1> Customer Name : ".$row['cash_7']."  | Date : ".$row['cash_date']." | Invoice # : ".$row['cash_13']." </h1> 
    </div>
    
    <div class=\"invoiceContainer invoiceCashContainer\">
    	<div class=\"invoiceHeader\">
        	<h1>Elite Roadside</h1>
            <h1 class=\"right\">INVOICE</h1>
        </div>
    	
        <div class=\"headerLeft\">
        	<p>685747 Hwy 2</p>
            <p>Woodstock, Ontario N4S 7V9</p>
        </div>
        
        <div class=\"headerMiddle\">
        	<a href=\"http://www.eliteroadside.ca\">www.eliteroadside.ca</a>
            <p>Telephone: (519) 686-20000
        </div>
        
        <div class=\"headerRight\">
        	<p>INVOICE NUMBER | ".$row['cash_13']."</p>
            <p>INVOICE DATE | ".$row['cash_date']."</p>
        </div>
        
        <div class=\"headerLeft2\">
       	  <p class=\"bold\">SOLD TO:</p>
          <p class=\"bold\">".$row['cash_7']."</p>
          <p class=\"bold\">".$row['cash_8']."</p>
        </div>
        
      <div class=\"headerRight2\">
        	<img src=\"images/logo.png\" alt=\"Elite Roadside Logo\">
        </div>
        
      <div class=\"headerLeft3\">
        	<p>Sales Tax Rate: <span class=\"tax\">13.00%</span></p>
        </div>
        
        <div class=\"invoiceForm\">
        <table class=\"invoice\">
      <tr>
        <td class=\"quantity headerT\">Quantity</td>
        <td class=\"desc headerT\">Description</td>
        <td class=\"unit headerT\">Unit Price</td>
        <td class=\"amount headerT\">Amount</td>
      </tr>
    </table>
          <table class=\"invoiceData\">
            <tr>
            	<td class=\"quantity\"><input type=\"text\" id=\"quantity\" name=\"quantity\" class=\"invoiceQty\"></td>
                <td class=\"desc\"><textarea type=\"text\" class=\"invoiceDesc\"></textarea></td>
                <td class=\"unit\"><br>$ ".$row['cash_10']."</td>
                <td class=\"amount\">$ ".$row['cash_12']."</td>
             </tr>
            </table>
      </div>
        
        
    <div class=\"invoiceBottomLeft\">
        	<p><strong>DIRECT ALL INQUIRIES TO:</strong></p>
            <p>Amar Bedi</p>
            <p>519-686-2000</p>
            <p>Email: amar@eliteroadside.ca</p>
        </div>
        
      <div class=\"invoiceBottomMiddle\">
        	<p><strong>MAKE ALL CHECKS PAYABLE TO:</strong></p>
            <p>ELITE ROADSIDE</p>
            <p>685747 Highway 2</p>
          <p>Woodstock, ON N4S 7V9</p>
            <p><a href=\"http://www.eliteroadside.ca\">www.eliteroadside.ca</a></p>
        </div>
        
        <div class=\"invoiceTotal\">
        	<p class=\"total\">SUBTOTAL : $".$row['cash_10']."</p>
            <p class=\"total\">TAX :  0.13% </p>
            <p class=\"total\">TOTAL : $".$row['cash_12']."</p>
        </div>
        
        <div class=\"thankYou\">
                	<h1>THANK YOU FOR YOUR BUSINESS!</h1>
                </div>
    </div>
    			";
    }
    
    ?>
    
    </div>

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,253
    Thanks
    12
    Thanked 341 Times in 337 Posts
    it looks like you want to toggle the div next to the clicked div. you can simply use .nextElementSibling from the current div.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    you can put the two parts in a common container, and bind clicks to it instead of the more-specific element.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    As what Dormilich said. But you need to pass the appropriate invoiceCashContainer to the toggleCash handler.
    Code:
    function init() {
        var cashInvoiceList = document.querySelectorAll(".showInvoice");    
    
        for (var i=0; i < cashInvoiceList.length; i++) {
            cashInvoiceList[i].addEventListener("click", function() {
                toggleCash(this.nextElementSibling); 
            }, false);
        }
    
    
        function toggleCash(invoiceCashContainer) {
            TweenMax.to(invoiceCashContainer, 1, {
                alpha: 1
            });
            invoiceCashContainer.classList.toggle("invoiceCashContainer")
            console.log("Toggling Cash Container Div");
        }
    }
    window.addEventListener("load", init, false);
    Actually, you can optimize your code by using event delegation. This is done by attaching the event to the parent container once instead of attaching it multiple times to all the target elements.
    Code:
    function init() {
        document.getElementById('allCashInvoices').addEventListener('click', function(e) {
            if (e.target.classList.contains('showInvoice')) {
                  toggleCash(e.target.nextElementSibling); 
            }     
        }, false);
    
        function toggleCash(invoiceCashContainer) {
            TweenMax.to(invoiceCashContainer, 1, {
                alpha: 1
            });
            invoiceCashContainer.classList.toggle("invoiceCashContainer");
            console.log("Toggling Cash Container Div");
        }
    }
    window.addEventListener("load", init, false);

  • Users who have thanked glenngv for this post:

    7daytheory (03-05-2014)

  • #5
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    As what Dormilich said. But you need to pass the appropriate invoiceCashContainer to the toggleCash handler.
    Code:
    function init() {
        var cashInvoiceList = document.querySelectorAll(".showInvoice");    
    
        for (var i=0; i < cashInvoiceList.length; i++) {
            cashInvoiceList[i].addEventListener("click", function() {
                toggleCash(this.nextElementSibling); 
            }, false);
        }
    
    
        function toggleCash(invoiceCashContainer) {
            TweenMax.to(invoiceCashContainer, 1, {
                alpha: 1
            });
            invoiceCashContainer.classList.toggle("invoiceCashContainer")
            console.log("Toggling Cash Container Div");
        }
    }
    window.addEventListener("load", init, false);
    Actually, you can optimize your code by using event delegation. This is done by attaching the event to the parent container once instead of attaching it multiple times to all the target elements.
    Code:
    function init() {
        document.getElementById('allCashInvoices').addEventListener('click', function(e) {
            if (e.target.classList.contains('showInvoice')) {
                  toggleCash(e.target.nextElementSibling); 
            }     
        }, false);
    
        function toggleCash(invoiceCashContainer) {
            TweenMax.to(invoiceCashContainer, 1, {
                alpha: 1
            });
            invoiceCashContainer.classList.toggle("invoiceCashContainer");
            console.log("Toggling Cash Container Div");
        }
    }
    window.addEventListener("load", init, false);
    Thanks for the help everyone! Will be trying your suggestions now.

  • #6
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Doesn't seem to be working.

    I understand what I should be doing.

    toggleCash(this.nextElementSibling);

    Is calling the function toggleCash and it's sending the next div as a variable through to the toggleCash function so it knows what exact div to toggle right?

    I'm getting the console.log Display in my console so it's running that function. But it's not toggling invoiceCashContinare

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Did you check if the expected div object is being passed to toggleCash?

  • Users who have thanked glenngv for this post:

    7daytheory (03-05-2014)

  • #8
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Ya so it was sending through the wrong div that I wanted to toggle. So I removed one of the container divs that was unnecessary and it works great! Thanks for all the help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •