Populate jQuery DropDownList with data from MySql Database using PHP

[thowi84Participant]

Hi guys,

I just found your article “Populate jQuery DropDownList with data from MySql Database using PHP” and while using it, I have a few questions left.
I got my site where I already have JSON encoded data. You can see the sources here: Click
When I open the site, the following content of variables occur:

$typeBezJSON = [{"bez":"Display"},{"bez":"Wizepanel6"},{"bez":"Wizepanel9,7"}]
$AllprodNosUniqueJSON = [{"ProdNr":"10975"},{"ProdNr":"10980"},{"ProdNr":"0"}]
$lotNosUniqueJSON = [{"LosNr":"1"},{"LosNr":"2"}] (10975 only)

So, everything fine up to now.
I now would like to use the content of e.g. $typeBezJSON for a single dropdown list.

When that’s working, I’d like to collect the selected data, built a new SQL query with these selected data and then built up da grid with the results from the query.

In your tutorial you fetched the JSON data with: url: 'data.php'
How am I able to use my above shown input here? I know I have to execute a <?php…?> with my query somewhere here but not how and where exactly.

So can you please help me out here? How exactly do I have to prepare the data without external .php files?

Thank you very much for your help!
Cheers,
thowi

[thowi84Participant]

Updated sources: http://pastebin.com/bCM047Ge
script src url was wrongly set. Now correct. Sorry for reply, but I can’t edit my entry above anymore.

[Peter StoevKeymaster]

Hi thowi84,

External PHP File is required for the Ajax call. Otherwise, you can bind the DropdownList to a local data source.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[thowi84Participant]

Hi Peter,

thanks for your quick reply and your tip! Good to know. So I will exclude the query to an external file and try once more.
Can you send me a link to an example where selected items from the dropdown are processed somewhere else? I’m thinking of selecting one item in dropdownlist1 and using the selected item for another SQL-query in file list2.php and then calling the restult of list2.php with dropdownlist2 and so on.
It would help me a lot to see how this works. Do you have something like that at your fingertips?

Cheers,
thowi

[thowi84Participant]

Puh… not that easy as I thought in the first place
Can you tell me what went wrong here? I included the external data-source php-file to see if the array is properly returned.
The result looks like this:

The json array is properly returned and looks good, but the dropdown stays empty. Do you see any problems in my configuration?

<?php
// to see if file returns proper json
include 'modules/rfid/include/TabsContent/dropdownsources/dropdownTypes.php';
?>

<link rel="stylesheet" href="modules/rfid/tools/jQueryUI/jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="modules/rfid/tools/jQueryUI/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="modules/rfid/tools/jQueryUI/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="modules/rfid/tools/jQueryUI/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="modules/rfid/tools/jQueryUI/jqwidgets/jqxdropdownlist.js"></script>
<div id="dropdownTypes">
	<script type="text/javascript">
	    $(document).ready(function () {
	        // prepare the data
	        var source =
	        {
	            datatype: "json",
	            datafields: [
	                { name: 'bez' }
	            ],
	            url: 'modules/rfid/include/TabsContent/dropdownsources/dropdownTypes.php'
	        };
	        var dataAdapter = new $.jqx.dataAdapter(source);
	     	// Create a jqxDropDownList
	        $("#jqxWidget").jqxDropDownList(
	        {
	            source: dataAdapter,
	            theme: 'classic',
	            width: 200,
	            height: 25,
	            selectedIndex: 0,
	            displayMember: 'bez',
	            valueMember: 'bez'
	        });
	     	// subscribe to the select event.
            $("#jqxWidget").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var valueelement = $("<div></div>");
                        valueelement.text("Value: " + item.value);
                        var labelelement = $("<div></div>");
                        labelelement.text("Label: " + item.label);
                        $("#selectionlog").children().remove();
                        $("#selectionlog").append(labelelement);
                        $("#selectionlog").append(valueelement);
                    }
                }
            });
	    });
	</script>
	<div id="jqxWidget">
    </div>
    <div id="selectionlog">
    </div>
</div>

The dropdownTypes.php looks like:

<?php
global $ak;

// Get all Types from DB
$typeBez = $ak->db->get_results("SELECT bez FROM mod_pp_type",ARRAY_A);
echo json_encode($typeBez);
?>

[Peter StoevKeymaster]

Hi thowi84,

Missing references: jqx.base.css – required before adding any other theme file. jqxcore.js – always required when using jQWidgets. jqxdata.js – required when using jqxDataAdapter.

In general, I suggest you to look at our online DropDownList samples and those in the PHP Integration demo section.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[thowi84Participant]

Hi Peter,

Right, those two files are not listed above, because I already added them somewhere else where I needed them. This above mentioned file is only included in the one where those two files are already embedded.
But I’ve tried and included them once again in this above mentioned file to see if it helps anyway – but no change

The PHP integration demo you’re talking about is this entry, right? I’ve already found that and thought I did everything right.

Is there any opportunity for debugging to see where something goes wrong? Otherwise I’m kind of looking for a needle in a haystack.
But my JSON data is correct, is it?
[{"bez":"Display"},{"bez":"Wizepanel6"},{"bez":"Wizepanel9,7"}]

Would be happy to hear from you!

Cheers,
thowi

[Peter StoevKeymaster]

Hi thowi,

The PHP Integration demo is that one: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/dropdownlist.htm?arctic

I also do not see a reference to the jQuery library in the provided code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[thowi84Participant]

Ah, great, thanks for the link. I’ll take a deep look at this and maybe I’ll find something there.
The jQuery library is also included somewhere else. I see that this important information is missing for you, so maybe it’s better to take a quick look at the final page: Klick
On the initial page you can see your “clock-example” running and the tab “products” shows the dropdown which is not working.

Thanks for your time and patience! Have a good time!

Cheers,
thowi

[Author]

Posts