SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery function in loop

    Hi again!!I am using the following function to show and hide div based on the user selection.The selection box has functionality to add more selection boxes by pressing add tab.But this function works only if I select the value first time.
    Code:
    <script type="text/javascript">
     $(document).ready(function(){
     $("#select1").change(function(){
        if ($(this).val() == "Ground Transportation" ) {
            $("#hide1").slideDown("fast"); 
    
        } else {
            $("#hide1").slideUp("fast");  
    	}
    });
    });
    </script>
    HTML Code:
    <select name="services[]" id="select1" class="form-select">
      <option value="0">Select</option>
      <option value="Air Transportation">Air Transportation</option>
      <option value="Ground Transportation">Ground Transportation</option>
        <option value="Lodging">Lodging</option>
      <option value="Tours">Tours</option>
      <option value="Railway Transportation">Railway Transportation</option>
      <option value="Other">Other</option>
    
    </select>
    Please guide me how can I solve this issue?
    It's easy once you know how...

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    Hi again!!I am using the following function to show and hide div based on the user selection.The selection box has functionality to add more selection boxes by pressing add tab.But this function works only if I select the value first time.
    In a simple test that I have just performed it works every single time for me, which means that there must be something else that's interfering.
    We can determine what that is by taking a look at a test page of yours that exhibits the problem that you're needing to fix.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.Here is part of my code:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function addRow(tableID) {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var colCount = table.rows[0].cells.length;
                for(var i=0; i<colCount; i++) {
                    var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "";
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "select-one":
                                newcell.childNodes[0].selectedIndex = 0;
                                break;
                    }
                }
            }
    		
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     $(document).ready(function(){
     $("#select1").change(function(){
        if ($(this).val() == "Ground Transportation" ) {
            $("#hide1").slideDown("fast"); 
    
        } else {
            $("#hide1").slideUp("fast");  
    	}
    });
    });
    </script><style type="text/css">
    .hide{display:none;}
    </style>
    </head>
    <body>
    <tr>
    <td class="forhead"><input type="button" value="Add Row" onClick="addRow('dataTable')"></td>
    <table id="dataTable">
           <tr>
               <td> <select name="services[]" id="select1" class="form-select">
      					<option value="0">Select</option>
      					<option value="Air Transportation">Air Transportation</option>
      					<option value="Ground Transportation">Ground Transportation</option>
        				<option value="Lodging">Lodging</option>
      					<option value="Tours">Tours</option>
      					<option value="Railway Transportation">Railway Transportation</option>
      					<option value="Other">Other</option>
    				</select>
    </td>
                </tr>
    </table>
    
    	<div class="hide" id="hide1"><!-- this select box will be hidden at first -->
    		Test : <input name="text1" type="text">
        </div>
    
    </form>
    </body>
    </html>
    It's easy once you know how...

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    Ok.Here is part of my code
    A part of what's going wrong is that you are using a unique identifier in the area that is being copied. That no longer makes it unique, which tends to break things.

    Better instead is for you to use a class name to identify that piece instead, such as "selectService". Then you can use something like:

    Code javascript:
    $(document).on('change', '.selectService', function () {
        ...
    });

    Which will allow the function to apply to elements of that same class, even when they are added to the DOM later on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks (again) paul_wilkins. Really didnt know this can be achieved through jquery.
    Code:
    <script type="text/javascript">
    $(document).on('change', '.selectService', function () {
        if ($(this).val() == "Ground Transportation" ) {
            $("#hide1").slideDown("fast"); 
    
        } else {
            $("#hide1").slideUp("fast");  
    	}
    });
    </script>
    works perfect!!
    It's easy once you know how...


Bookmarks

Posting Permissions

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