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
    New Coder
    Join Date
    Aug 2013
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Issue with Google Chrome, dropdown box requires 2 clicks

    Hi, I've created a nice yet complicated form which uses ajax to populate 2 dropdown boxes. The fields use an "onclick" and "onchange" event to do whats needed. When the user selects a company name a section under the dropdown will autofill with the address for that company. Change the company in the dropdown and the address changes without affecting the form.

    The problem is I've put all my hours, many many hours, using firefox. Guess what, go to chrome and I have an issue.

    When I attempt to click the drop down in google chrome it doesn't drop the first time, I need to click it twice. After the second click it drops down and has the correct options.

    In firefox I click it once like it should be and I get what I want. Not sure about IE as my computer doesn't seem to be able to open it, crashes upon opening, spent hours trying to fix that issue to no avail, the hell with IE.

    Here's the code for one of the dropdowns.

    PHP Code:
        <?php
            
    echo "<select id='ClientFromLocationID' style='width:270px' name='ClientFromLocationID' onClick='refreshfromselect()' onchange='showUser(this.value)'><br /><label id='fromlocationprompt'></label>";
            
            echo 
    "</select>";    
        
    ?>
    It's not possible, at least not for me, to join the 2 events together as that's how I tried to build it. The onClick grabs the company names from the database while the onChange populates the form with the address of the selected company.

    This is the code for the onclick, its javascript but simply calls the php file which connects to database and retrieves company names.

    Code:
    function refreshfromselect() {	
    	if(ClientFromLocationID.length == 0)
    	{
    		$(ClientFromLocationID).load('fromlocationajax.php');
    	}
    	else {
    		//do nothing
    	}	
    }

    This is the code for the onChange, its javascript and calls the php file which connects to the database and retrieves the selected company address.

    Code:
    function showUser(str)
    {                
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getshipfromlocation.php?q="+str,true);
    xmlhttp.send();
    
    }
    </script>
    Any ideas how I might solve this issue?
    Last edited by robsworld78; 03-14-2014 at 08:15 AM.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Rendered side has no impact on PHP code, so this problem has nothing to do with PHP. Moving to Javascript forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,455
    Thanks
    23
    Thanked 631 Times in 630 Posts
    I prefer to use onchange in a select. The label tag in your code S/B an <option> tag. Try this:
    PHP Code:
    <?php
    echo "<select
    id='ClientFromLocationID'
    style='width:270px'
    name='ClientFromLocationID'
    onchange='refreshfromselect();showUser(this.value)'>"
    ;

    echo 
    "<option></option>
    <option value='same'>same</option>
    <option value='other'>other</option>
    <option value='else'>else</option>
    </select>"
    ;
    ?>
    Last edited by sunfighter; 03-14-2014 at 02:54 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    robsworld78 (03-14-2014)

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi, I can't use onchange for the populating event as it won't fetch data from the database. Make sense as to start the dropdown is empty so I can't change anything to run the code.

    I tried your example except with onClick however chrome now want's 3 clicks to open the dropdown. Firefox still can handle it with one click although it flashes funny now upon opening.

    That label is for javascript validation to show the user a message. The remaining code for the select is in the php file that gets called.

  • #5
    New Coder
    Join Date
    Aug 2013
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    It appears this happens even when I remove the other event and only run "refreshfromselect()". This is the code in the php file which gets fetched when that function is called.

    This fills the dropdown box with a list of company names.

    PHP Code:
        $sql 'SELECT * FROM `clientfromlocations` WHERE `clientID` = "'.$search.'" AND `FromLocationUnused` = "no"';
        
    $result mysql_query($sql);
            
        echo 
    "<option/>";            
        while (
    $row mysql_fetch_array($result)) {
            echo 
    "<option value='" ;
            echo 
    $row['ClientFromLocationID']; 
            echo 
    "'>" ;
            echo 
    $row['FromCompany'];
            echo 
    "</option>";        
        }        
        echo 
    $result

  • #6
    New Coder
    Join Date
    Aug 2013
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    If I put the php code which fetches the company names in the main file the dropdown is populated with one click as it populates when the form loads, makes sense.

    But this posses a problem as I also have a button on the form which opens a dialog box for the user to add another company and address.

    Example: If the user opened the dropdown box and saw the companies available and selected one it would do its thing. But then say the user decided they wanted another company, they click the "add address" button and the current selection is cleared out. After adding the new address the dropdown list doesn't get populated with the new company because the form wasn't reloaded and can't be.

    Is there a way when the dialog closes I can call the php file which calls the database for the dropdown box?

    Here's the code for a dialog box.

    Code:
    $(function() {
    	$( "#Dialog1" ).dialog({
    		hide:{effect: "slide", duration: 1000},
    		show:{effect: "slide", duration: 1000},
    		autoOpen:false,
    		width:470,
    		title:"Add New Ship From Address",
    		modal:true
    	});
    	$( "#Button1" ).click(function(){
     		$( "#Dialog1" ).dialog("open");
    	});
    	
    });

  • #7
    New Coder
    Join Date
    Aug 2013
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks for your help, I got the issues solved, to much done to explain.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,455
    Thanks
    23
    Thanked 631 Times in 630 Posts
    OK. And I'll bet it took a lot of fixing.
    Remember to validate your code at The W3C Markup Validation Service

    It don't do PHP but Use view page source and submit that.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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