SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery - Why isn't it working togeder?

    When I write this 2 scripts togeder
    only one of them works...
    What do I need to do to make them both work togeder?

    When I write them seperatly they BOTH work.. but not togeder :\
    Code JavaScript:
    					<script>	
    						function displayValue() {
    						  var singleValues = $("#form2").val();
     
    							$.post("ajax.php", { id: singleValues, count: "3" },
    							function(data){
    								$("#result3").empty();
    								$( "#result3" ).html(data);
    							});
    						}
    						$("#form2").change(displayValue);
    						displayValue();
    					</script>
    					<script>
    						function displayVals() {
    						  var singleValues = $("#form1").val();
     
    							$.post("ajax.php", { id: singleValues, count: "2" },
    							function(data){
    								$("#result2").empty();
    								$( "#result2" ).html(data);
    							});
    						}
    						$("#form1").change(displayVals);
    						displayVals();
    					</script>

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to partially solve it..

    This is what it needs to do..
    I've got 3 dropdown list
    The first one affects the second one
    and the second one affects the third one...

    for example look at this
    "<-- Choose this" means that the next dropdown list is based on this option..

    this is what it needs to do:
    Code HTML4Strict:
    <div id="result1">
    <select id="form1" name="mydropdown1">
    <option value="">- Choose Job -</option>
    <option value="6">Doctor</option> <--- CHOOSE THIS
    <option value="5">Engiener</option>
    </select>
    </div>
     
    <div id="result2">
    <select id="form2" name="mydropdown2">
    <option value="">- Choose 2 -</option>
    <option value="18">Eye doctor</option>
    <option value="15">Orthopedist</option> <--- CHOOSE THIS
    <option value="19">Gynecologist</option>
    </select>
    </div>
     
    <div id="result3">
    <select id="form3" name="mydropdown3">
    <option value="">- Service -</option>
    <option value="10">Legs surgey</option>
    <option value="20">ETC...</option>
    </select>
    </div>

    I managed to made it work only if I am using the first dropdown list
    (with out using the second one)

    for example:
    Choosing " Doctor" will open on the 2nd list
    "Eye Doctor", "Orthopedist".. etc..

    or if I am using the second dropdown list (without using the first one)
    for example:
    Choosing "Orthopedist" will open on the third list "Legs surgey".. etc..

    BUT, if I am choosing some option on the first list
    and then the choosing an option on the second list
    it wont change anything on the third dropdown list.
    why is that happning?


    How can I make it work ?
    my JQuery code is:
    Code JavaScript:
    					<script>
    						jQuery.noConflict();
    						jQuery(document).ready(function($){				
    						$("#form2").change(function () {
    						  var values = $("#form2").val();
     
    							$.post("ajax.php", { id: values, count: "3" },
    							function(data){
    								$("#result3").empty();
    								$( "#result3" ).html(data);
    							});
    						});
     
    						$("#form1").change(function () {
    						  var singleValues = $("#form1").val();
     
    							$.post("ajax.php", { id: singleValues, count: "2" },
    							function(data){
    								$("#result2").empty();
    								$( "#result2" ).html(data);
    							});
    						});
     
    						});
    					</script>

  3. #3
    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 danrevah View Post
    IBUT, if I am choosing some option on the first list
    and then the choosing an option on the second list
    it wont change anything on the third dropdown list.
    why is that happning?
    It's happening because you're destroying the second select, which also removes the event that was attached to it.
    When you then create the second select from the data, no event is attached to that.

    What you need is for jQuery to keep a watch out for that second select, so that when it's added it can automatically reassign the change event to it.
    jQuery's live method will allow you to attach that click event, both now and in the future.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! its working now

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something weird is happaning
    when ever it loads the "Select" list from the ajax.php file
    i dont get the values when I submit the page...
    why can't I get the dropdown list value?

    this is what im doing to recive the list:
    Code PHP:
    if (isset($_POST['cat'.$arr['id']]))
    {
    	$cat = secure($_POST['cat'.$arr['id']]);
    	if ($cat !== "")
    		mysql_query("INSERT INTO jobinfo (user_id,content, cat_id, catlist_id) VALUES ('".$uid."','','".$arr['id']."','".$cat."')");
    }

    this is my code on the main PHP file:
    Code PHP:
    echo '<div id="result'.$arr['id'].'">';
    echo '<select name="cat'.$arr['id'].'" id = "cat'.$arr['id'].'" style="width:180px;">';
    echo '<option value="">- '.$arr['category'].' -</option>';
    $select_cat = mysql_query("SELECT * FROM searchcatslist WHERE cat_id='".$arr['id']."'");
    while ( $arr_cat = mysql_fetch_array($select_cat) )
    {
    	echo '<option value="'.$arr_cat['id'].'">'.$arr_cat['category'].'</option>';
    }
    echo '</select>';
    echo '</div>';
    if ($arr['sortby'] > 0)
    {
    	echo '<script>
    	$("#cat'.$arr['sortby'].'").live("click", function(event){						
    	$("#cat'.$arr['sortby'].'").change(function () {
    	var values = $("#cat'.$arr['sortby'].'").val();
    ';
    echo '$.post("ajax_dlists.php", { id: values, count: "'.$arr['tafpos'].'", multiple: "not" },';
    echo 'function(data){
    $("#result'.$arr['id'].'").empty();
    $( "#result'.$arr['id'].'" ).html(data);
    });
    });
    });
    </script>';
    }

    The ajax_dlists.php:
    Code PHP:
    		$sel = mysql_query ("SELECT * FROM searchcats WHERE tafpos='".$count."'");
    		if ( $arr = mysql_fetch_array($sel) )
    		{
    			if ($multiple == "not")
    				echo '<select id="cat'.$arr['id'].'" name="cat'.$arr['id'].'" style="width:180px; float: left;">';
    			else
    				echo '<select id="cat'.$arr['id'].'" name="cat'.$arr['id'].'" style="width:150px; float: left;">';
     
    			echo '<option value="">- '.$arr['category'].' -</option>';
     
     
    			$query = "SELECT * FROM searchcatslist WHERE sortby = '".$id."' OR ( sortby = '0' AND cat_id='".$arr['id']."' )";
    			$result = mysql_query($query);
     
    			while ($row = mysql_fetch_array($result))
    			{
    				echo '<option value="'.$row['id'].'">'.$row['category'].'</option>';
    			}
    			echo '</select>';


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
  •