option

**jemz** · Dec 15, 2012 11:51

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>

**Pullo** · Dec 15, 2012 16:21

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?

**jemz** · Dec 16, 2012 09:29

Originally Posted by Pullo

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.

**Pullo** · Dec 16, 2012 13:51

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?

**jemz** · Dec 16, 2012 17:29

Originally Posted by Pullo

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.

**Pullo** · Dec 17, 2012 05:23

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.

**jemz** · Dec 18, 2012 08:24

Originally Posted by Pullo

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?

**Pullo** · Dec 18, 2012 08:35

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?

**jemz** · Dec 18, 2012 08:45

Originally Posted by Pullo

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

**jemz** · Dec 18, 2012 09:38

Originally Posted by Pullo

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"

}

**jemz** · Dec 18, 2012 09:47

Originally Posted by Pullo

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

**Pullo** · Dec 18, 2012 14:46

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".

**jemz** · Dec 19, 2012 08:14

Originally Posted by Pullo

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.

**Pullo** · Dec 19, 2012 08:31

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);
  });
}

**jemz** · Dec 19, 2012 08:42

Originally Posted by Pullo

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);
  });

**Pullo** · Dec 19, 2012 08:45

Typo. That should be empid: (no space)

**jemz** · Dec 19, 2012 08:52

Originally Posted by Pullo

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 ?

**Pullo** · Dec 19, 2012 08:53

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.

**jemz** · Dec 19, 2012 09:37

Originally Posted by Pullo

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);


        }

}

**Pullo** · Dec 19, 2012 10:01

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.

**jemz** · Dec 19, 2012 10:37

Originally Posted by Pullo

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 ?

**Pullo** · Dec 19, 2012 14:01

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.

**jemz** · Dec 19, 2012 17:29

Originally Posted by Pullo

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('')

**jemz** · Dec 19, 2012 18:19

Originally Posted by Pullo

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

**Pullo** · Dec 20, 2012 02:53

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.

User Tag List

Thread: option

Thread Tools

Display

option

Bookmarks

Bookmarks

Posting Permissions