SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 50

Thread: option

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    option

    Hi i need some help,how to do this in jquery.in the <select> how can i load the data to the select element that was queried in the database...



    for example

    Code:
    <select>
      <opption></option>
    
    </select>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Dynamically creating a <select> element and adding a few <options> to it isn't too hard.
    But it would help to know what form is the data in.
    How are you fetching it from the database?

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Dynamically creating a <select> element and adding a few <options> to it isn't too hard.
    But it would help to know what form is the data in.
    How are you fetching it from the database?
    Hi thank you for the reply,Okay i just tried to alert first so that i can see what is the data returned but it fails to alert

    this how i query my string to other page
    Code:
     $(function(){ 
      $.ajax
    	({
    	   type: "POST",
    	  data: "id="+myid,
    	  url: "members.php",
    	 	
    	  success: function(r)
    	  {
                  var id = r.empid;
    	     $('#emp').val(r.empname);
                 mydropdown(id);
    
    	 }
      });
    });
    
    
     function  mydropdown(id){
                  
                  $.getJSON('toselectdropdown.php','empid = id',getEmpId);
    
                    function getEmpId(e){
                       alert (e.emp);
                    }
    
     }
    toselectdropdown.php
    Code:
      <?php 
       if(isset($_POST['empid'])){
    
             $empid = $_POST['empid'];
    
    
              $sql = mysql_query("select * from myemployee where emp_id  = $empid");
    
              if(!$sql){
                  die("Failed".mysql_error());
              }
    
            while($row = mysql_fetch_array($sql,MYSQL_BOTH)){
    
                   $empaddr= $row['emp_addr'];
    
                  $emp_data = array('emp'=>$empaddr);
    
                echo json_encode($emp_data);
    
            }
    
    
    
    
        }
    
    
        }
     ?>
    but it will not alert.I hope you can help me on this.

    Thank you in advance.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Try changing this:

    Code JavaScript:
    $.getJSON('toselectdropdown.php','empid = id',getEmpId);
     
    function getEmpId(e){
      alert (e.emp);
    }

    Into this:

    Code JavaScript:
    $.getJSON('toselectdropdown.php','empid = id', function(e){
      alert(e.emp);
    });

    Does that help?

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    Try changing this:

    Code JavaScript:
    $.getJSON('toselectdropdown.php','empid = id',getEmpId);
     
    function getEmpId(e){
      alert (e.emp);
    }

    Into this:

    Code JavaScript:
    $.getJSON('toselectdropdown.php','empid = id', function(e){
      alert(e.emp);
    });

    Does that help?
    Hi pullo, Thank you for the reply, It did not alert.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The syntax of the first part looks fine to me.

    What we need to check now, is what is being returned from the initial ajax call.

    Can you change this:

    Code JavaScript:
    success: function(r)
    {
      var id = r.empid;
      $('#emp').val(r.empname);
      mydropdown(id);
    }

    to this:

    Code JavaScript:
    success: function(r)
    {
      console.log(r);
    }

    and post the results.

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    The syntax of the first part looks fine to me.

    What we need to check now, is what is being returned from the initial ajax call.

    Can you change this:

    Code JavaScript:
    success: function(r)
    {
      var id = r.empid;
      $('#emp').val(r.empname);
      mydropdown(id);
    }

    to this:

    Code JavaScript:
    success: function(r)
    {
      console.log(r);
    }

    and post the results.
    Hi pullo, sorry for the late reply...I tried to put the code but i could not see where is the output of the console.log?
    where i can see the output that the ajax initial returned?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    If you test this in Chrome, press F12, click on the console tab and reload the page.
    Then you will see the output of console.log()
    Which browser are you using out of interest?

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you test this in Chrome, press F12, click on the console tab and reload the page.
    Then you will see the output of console.log()
    Which browser are you using out of interest?
    Hi, i am using FF

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    The syntax of the first part looks fine to me.

    What we need to check now, is what is being returned from the initial ajax call.

    Can you change this:

    Code JavaScript:
    success: function(r)
    {
      var id = r.empid;
      $('#emp').val(r.empname);
      mydropdown(id);
    }

    to this:

    Code JavaScript:
    success: function(r)
    {
      console.log(r);
    }

    and post the results.
    this is the output
    Object { empid=

    "0001"

    , empname=

    "Christina"

    }

  11. #11
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you test this in Chrome, press F12, click on the console tab and reload the page.
    Then you will see the output of console.log()
    Which browser are you using out of interest?
    I also tried this

    Code:
    
    function  mydropdown(id){
                  
                  $.getJSON('toselectdropdown.php','empid = id',function(e){
    
                  
                       console.log(e);
                    });
    
     }
    the params is

    empid id
    the result of log is null

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    OK, and what happens if you change:

    Code JavaScript:
    success: function(r)
    {
      var id = r.empid;
      $('#emp').val(r.empname);
      mydropdown(id);
    }

    to

    Code JavaScript:
    success: function(r)
    {
      var id = r.empid;
      console.log(id);
    }

    Presumably the output will be "undefined".

  13. #13
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    OK, and what happens if you change:

    Code JavaScript:
    success: function(r)
    {
      var id = r.empid;
      $('#emp').val(r.empname);
      mydropdown(id);
    }

    to

    Code JavaScript:
    success: function(r)
    {
      var id = r.empid;
      console.log(id);
    }

    Presumably the output will be "undefined".
    i get 0001,

    but if i use this
    function mydropdown(id){

    $.getJSON('toselectdropdown.php','empid = id',function(e){


    console.log(e);
    });

    }
    there is no output.

    I think the reason why i cannot display is because empid = id,instead of 0001,the display is "id".
    can you please see the getJSON function if that is correct especiall y in the empid= id,

    Thank you in advance.

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    You always come on line the minute I step away from the PC

    What happens if you try this:

    Code JavaScript:
    function  mydropdown(id){
      $.getJSON('toselectdropdown.php', {empid : id}, function(e){
        console.log(e);
      });
    }

  15. #15
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    You always come on line the minute I step away from the PC

    What happens if you try this:

    Code JavaScript:
    function  mydropdown(id){
      $.getJSON('toselectdropdown.php', {empid : id}, function(e){
        console.log(e);
      });
    }

    Hi,

    I get syntax error: missing: after the property id

    {empid : id}
    I also tried this by surrounding the curly braces into single quote,it runs but still i get null because the id cannot get 0001 value.it will display always like this {id= cls}
    Code:
    function  mydropdown(id){
      $.getJSON('toselectdropdown.php', '{empid : id}', function(e){
        console.log(e);
      });

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Typo. That should be empid: (no space)

  17. #17
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Typo. That should be empid: (no space)
    Okay i remove now the space but the result of the console is still null,it cannot get the real value which is 0001,
    the value of the id is still id,.how can get the exact value ?

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi, I'll have to have a look at this later, as I'm away from the PC right now.
    I'm sure we'll be able to get to the bottom of it.

    In the meantime, could you please post a typical response from toselectdropdown.php, i.e. What you would hope to get back from a sucessful call.

  19. #19
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi, I'll have to have a look at this later, as I'm away from the PC right now.
    I'm sure we'll be able to get to the bottom of it.

    In the meantime, could you please post a typical response from toselectdropdown.php, i.e. What you would hope to get back from a sucessful call.

    hi here it is.

    Code:
     if(isset($_POST['id'])){
    
           
    
    
              $consql = mysql_query("select * from employee ");
    
            
    
            while($row = mysql_fetch_array($consql,MYSQL_BOTH)){
    
                   $empaddress= $row['emp_address'];
                  
    
                $data = array('empaddress'=>$empaddres);
              
                echo json_encode($data);
    
    
            }
    
    }

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    So I'm just having a play around with this.

    Let's summarize:

    Code JavaScript:
    $.ajax
    ({
      type: "POST",
      data: "id="+myid,
      url: "members.php",
     
      success: function(r)
      {
        var id = r.empid;
        $('#emp').val(r.empname);
        mydropdown(id);
      }
    });

    This works as expected.
    r contains:
    Code:
    Object { empid="0001", empname="Christina"}
    Code JavaScript:
    function  mydropdown(id){
      $.getJSON('toselectdropdown.php','empid = id',getEmpId);
      function getEmpId(e){
        alert (e.emp);
      }
    }

    This is where the problems start.

    What is the reason you are using getJSON?
    Does it have any advantage over $.ajax?

    I can make your script work when toselectdropdown.php echos a JSON string and I pass the id as before ({empid: id}).
    i.e. if I place this in the code:

    PHP Code:
    echo json_encode(array("empid"=>"0001""empname"=>"Christina")); 
    it works, but if I change it to this:

    PHP Code:
    $empid $_POST['id'];
    echo 
    json_encode(array("empid"=>$empid,"empname"=>"Christina")); 
    it dies silently.

    Can you therefore do this:

    Code JavaScript:
    function  mydropdown(id){
      $.ajax
      ({
        type: "POST",
        url: "toselectdropdown.php",
        data: { "id": id },
        dataType: "json",
        success:function(r)
        {
          console.log(r.id);
        }
      });
    }

    On my setup, this worked fine, but as there are DB queries etc involved, it is quite hard to replicate everything.

  21. #21
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    So I'm just having a play around with this.

    Let's summarize:

    Code JavaScript:
    $.ajax
    ({
      type: "POST",
      data: "id="+myid,
      url: "members.php",
     
      success: function(r)
      {
        var id = r.empid;
        $('#emp').val(r.empname);
        mydropdown(id);
      }
    });

    This works as expected.
    r contains:
    Code:
    Object { empid="0001", empname="Christina"}
    Code JavaScript:
    function  mydropdown(id){
      $.getJSON('toselectdropdown.php','empid = id',getEmpId);
      function getEmpId(e){
        alert (e.emp);
      }
    }

    This is where the problems start.

    What is the reason you are using getJSON?
    Does it have any advantage over $.ajax?

    I can make your script work when toselectdropdown.php echos a JSON string and I pass the id as before ({empid: id}).
    i.e. if I place this in the code:

    PHP Code:
    echo json_encode(array("empid"=>"0001""empname"=>"Christina")); 
    it works, but if I change it to this:

    PHP Code:
    $empid $_POST['id'];
    echo 
    json_encode(array("empid"=>$empid,"empname"=>"Christina")); 
    it dies silently.

    Can you therefore do this:

    Code JavaScript:
    function  mydropdown(id){
      $.ajax
      ({
        type: "POST",
        url: "toselectdropdown.php",
        data: { "id": id },
        dataType: "json",
        success:function(r)
        {
          console.log(r.id);
        }
      });
    }

    On my setup, this worked fine, but as there are DB queries etc involved, it is quite hard to replicate everything.
    Hi, pullo, Jackpot , it will display now the value,,..and now how can i display this in the dropdownlist ?

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    The rest is simple.

    Presuming that a successful call to toselectdropdown.php returns the following JSON object:

    Code:
    Object {1: "Option one", 2: "Option two", 3: "Option three"}
    You can turn this into a <select> menu with the following code:

    Code JavaScript:
    function  mydropdown(id){
      $.ajax
      ({
        type: "POST",
        url: "toselectdropdown.php",
        data: { "id": id },
        dataType: "json",
        success:function(data)
        {
          console.log(data);
          var items = [];
          $.each(data, function(key, val) {
            items.push('<option value="' + key + '">' + val + '</option>');
          });
          $('<select/>', {
            'class': 'my-new-select',
            html: items.join('')
          }).appendTo('body');
        }
      });
    }

    Hope that helps you.

  23. #23
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    The rest is simple.

    Presuming that a successful call to toselectdropdown.php returns the following JSON object:

    Code:
    Object {1: "Option one", 2: "Option two", 3: "Option three"}
    You can turn this into a <select> menu with the following code:

    Code JavaScript:
    function  mydropdown(id){
      $.ajax
      ({
        type: "POST",
        url: "toselectdropdown.php",
        data: { "id": id },
        dataType: "json",
        success:function(data)
        {
          console.log(data);
          var items = [];
          $.each(data, function(key, val) {
            items.push('<option value="' + key + '">' + val + '</option>');
          });
          $('<select/>', {
            'class': 'my-new-select',
            html: items.join('')
          }).appendTo('body');
        }
      });
    }

    Hope that helps you.
    Hi, pullo, can i ask what is this piece of code means

    items.join('')

  24. #24
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    The rest is simple.

    Presuming that a successful call to toselectdropdown.php returns the following JSON object:

    Code:
    Object {1: "Option one", 2: "Option two", 3: "Option three"}
    You can turn this into a <select> menu with the following code:

    Code JavaScript:
    function  mydropdown(id){
      $.ajax
      ({
        type: "POST",
        url: "toselectdropdown.php",
        data: { "id": id },
        dataType: "json",
        success:function(data)
        {
          console.log(data);
          var items = [];
          $.each(data, function(key, val) {
            items.push('<option value="' + key + '">' + val + '</option>');
          });
          $('<select/>', {
            'class': 'my-new-select',
            html: items.join('')
          }).appendTo('body');
        }
      });
    }

    Hope that helps you.
    Hi, I tried it but it will not work, but when i only select with a certain id it will display...

    Example:
    This will not work
    Select * from employee
    This will work

    select empid from employee where empid = $id

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,075
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, well it sounds like we're almost there.
    What we need to know is what toselectdropdown.php is returning when you have select * from employee in your code.
    Can you therefore change this:

    Code JavaScript:
    success:function(data)
        {
          var items = [];
          $.each(data, function(key, val) {
            items.push('<option value="' + key + '">' + val + '</option>');
          });
          $('<select/>', {
            'class': 'my-new-select',
            html: items.join('')
          }).appendTo('body');
        }

    back to this:

    Code JavaScript:
    success:function(data)
        {
          console.log(data);
        }

    and post the output.

    Cheers.

    BTW, Array.join() is a method which joins the elements of an array into a string, and returns the string.


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
  •