Loading a combobox with options thru Javascript with options from MySQL DB

[riahc3]

Man that was a mouthful!

Basically I have a page which when I click on a button, a jQuery (iframe) window comes up. Here there is a combobox that should be filled with values I read from a database.

Ive been reading two pages:

http://openenergymonitor.org/emon/node/107
http://stackoverflow.com/questions/8019489/simple-ajax-jquery-script-how-can-i-get-information-for-each-of-the-rows-in-the

But Im having problems not only understand it but applying it to my situation. One of the reasons is that lets say my query is this:

select name,lastname from people where age=19

this would return something like

adam brown
james lay
bill bult

As you can see 3 rows. The first example only allows one row to be returned/used and I tried seeing the second link but it seems I can just not apply it correctly.

Pretty much, I have problems with everything from getting the data and filling the combobox.

How do I call the function that reads the database then loads the combobox when this jQuery window is opened?

For now that is my main problem.

Thank you

[pritaeas]

The answer in the second link shows you how. If you can show the code you have so far, it would be easier to guide you.

[riahc3]

The answer in the second link shows you how. If you can show the code you have so far, it would be easier to guide you.

I know, I saw :) Tried to implement it but wasnt sure how to "run it".

Reason why I asked:

How do I call the function that reads the database then loads the combobox when this jQuery window is opened?

If I dont know how to do that, I cant test it out.

[pritaeas]

The PHP code in the answer is the script you need to call (api.php). That's just a PHP script you need to access the database, using the right credentials and query. The Javascript code in that answer you'll need to adjust to add each returned item to your combobox.

[riahc3]

I have something similar to this:

<div id="somediv">

</div>

Later MY JS:

$j.ajax({                                      
            url: 'mysqlcall.php',                  //script para obtener datos      
            data: "idpastelero="+varpas,                        //you can insert url argumnets here to pass to api.php
                                            //for example "id=5&parent=6"
            dataType: 'json',                //data format      
            success: function(data)          //on recieve of reply
                {

                $j('#somediv').append("Formas predeterminadas: <select name='dibujoshechos' id='dibujoshechos'>");
                    for (var i in rows)
                        {     

                            var row = rows[i];          
                            var nombre = row[0]; //nombre
                            var coordenadas = row[1]; //coordenadas
                            $j('#somediv').append("<option value="+coordenadas+">"+nombre+"</option>'")

                        } 
                    $j('#somediv').append("</select>");



                  } 
                });

Basically thats it.

[pritaeas]

You need to loop trough data, rows is undefined.

[riahc3]

You need to loop trough data, rows is undefined.

The reason that I did not know that rows was even undefined is because I do not know how to call this function...

Thats what I need to know: How do i call this function (the JS) to run it as soon as the jQuery iframe window comes up?

[riahc3]

Isnt the for a infinite loop? I tried doing it and I was about to get a reply (and the correct answer because I see it in a alert box) but since it is a infinite loop (I say this because it shows the first one but the first are undefined) I think it crashes at the end

[riahc3]

Almost got it to work

I have this:

$j('#formas').append("Formas predeterminadas: <select name='dibujoshechos' id='dibujoshechos'>");
                    for (var i=0;i<data.length;i++)
                        {     

                            var row = data[i];          
                            var nombre = row[0]; //nombre

                            alert(nombre);
                            var coordenadas = row[1]; //coordenadas
                            $j('#formas').append("<option>"+nombre+"</option>")

                        } 

                           $j('#formas').append("</select>");

Yet the HTML comes out like this:

<div id="formas">
Formas predeterminadas:
<select id="dibujoshechos" name="dibujoshechos"></select>
<option>Forma aleatoria</option>
</div>

Why does it close the combobox before the for loop when I have it in this order?

My default HTML code is the empty div.

[pritaeas]

If the for loop is executed in the success callback of your ajax call, then it makes sense. The callback has a delay, so it is executed later. If everything is in the callback, this shouldn't happen.

[riahc3]

Expanded code:

    formapredeterminada: function(point)
    {


        var varpas=$j('#iddetienda',window.parent.document).text();
        varpas.replace(/\s/g, "");


        $j.ajax({                                      
            url: 'mysqlcall.php',                  //script para obtener datos      
            data: "idpastelero="+varpas,                        //you can insert url argumnets here to pass to api.php
                                            //for example "id=5&parent=6"
            dataType: 'json',                //data format      
            success: function(data)          //on recieve of reply
                {


                $j('#formas').append("Formas predeterminadas: <select name='dibujoshechos' id='dibujoshechos'>'");

                    for (var i=0;i<data.length;i++)
                        {     

                            var row = data[i];          
                            var nombre = row[0]; //nombre

                            alert(nombre);
                            var coordenadas = row[1]; //coordenadas
                            $j('#formas').append("<option>"+nombre+"</option>")

                        } 

                           $j('#formas').append("</select>");

                  } 

                });

        this.canvasListener.redraw();
    },

As you can see the for loop is executed inside the sucess part; Do I move it out or something?

[pritaeas]

No, would have expected this to work fine. What you can try is:

var selectHtml = '<select name="dibujoshechos" id="dibujoshechos">';
for (..)
{
    selectHtml += '<option>' + nombre + '</option>';
}
selectHtml += '</select>';
$j('#formas').append(selectHtml);

[riahc3]

OK that worked.

Im trying to read something else from the DB but it has characters like ":" and "#" and "#X" which for some reason the query is getting incorrectly and when I try to insert it into the option value it comes out weird like such:

<option spline#="" 306="" 410="" 209="" 234="" spline#x:="" type:="" 382="" y:="" 274="" value="X:">Forma aleatoria</option>

While the value is in my database (and should be):

X: 274 Y: 382 Type: spline#X: 234 Y: 209 Type: spline#X: 410 Y: 306 Type: spline#X: 274 Y: 382 Type: spline#

[pritaeas]

Perhaps some quoting error in your code triggers this. Check your single and double quotes.

[riahc3]

Perhaps some quoting error in your code triggers this. Check your single and double quotes.

Well here it is as you told me:

    formapredeterminada: function(point)
    {


        var varpas=$j('#iddetienda',window.parent.document).text();
        varpas.replace(/\s/g, "");


        $j.ajax({                                      
            url: 'mysqlcall.php',                  //script para obtener datos      
            data: "idpastelero="+varpas,                        //you can insert url argumnets here to pass to api.php
                                            //for example "id=5&parent=6"
            dataType: 'json',                //data format      
            success: function(data)          //on recieve of reply
                {


               var selecthtml='Formas predeterminadas: <select name="dibujoshechos" id="dibujoshechos">'

                    for (var i=0;i<data.length;i++)
                        {     

                            var row = data[i];          
                            var nombre = row[0]; //nombre


                            var coordenadas = row[1]; //coordenadas
                            alert(coordenadas);
                            selecthtml=selecthtml+'<option value='+coordenadas+'>'+nombre+'</option>';


                        } 
                        selecthtml=selecthtml+'</select>';
                           $j('#formas').append(selecthtml);

                  } 

                });

        this.canvasListener.redraw();
    },

That alert you see there prints out exactly what is in my database (no single or double quotes there) so I know its reading the value correctly.

So I guess its something in the Javascript code that is incorrect. What is it?

[pritaeas]

No quotes around coordenadas. Without them, that option tag breaks at the first space.

selecthtml=selecthtml+'<option value="'+coordenadas+'">'+nombre+'</option>';

[riahc3]

Yup. That solved it. Tried that, it worked, and I forgot to mention it. Now I see you did.

Thank you.