2

My problem is that i have 2 dropdowns that get its content from my DB, a simple SELECT * with the category and then select a item from that category.

First dropdown : "dropdown_type" is the category.

Second dropdown : "dropdown_abo" is the item.

At the second dropdown, i am using a JQuery pluging that makes it possible to search inside the dropdown, to get the item faster then scrolling (theres gonna be a lot of items in it). You can see the plugin here

When you select a item from the second dropdown, a div(abo_info) below shall show all the info of the selected item.

My problem is that I'm stuck, and don't know how to proceed. How can i make it so, when i select a category, and then an item i get the content from that item shown in the div below?

I'm using PHP, JQuery and Mysql_*(to DB connect, know about PDO but im not that good at it).

Can i please get some help here, or some examples on how it can be done?

I have made a JSfiddle so you can see the complete code

Community
  • 1
  • 1
Patrick R
  • 1,949
  • 3
  • 32
  • 58
  • You say that you are using a JQuery plugin but there's no evidence of it, or any other javascript, in the fiddle. You will have to improve the fiddle to at least demonstrate the issue before anyone can help. – Roamer-1888 Apr 27 '15 at 14:36
  • I have updated the jsfiddle with the JQuery i use. Remember the plugin i in my JS folder and is loaded in the header, is not something i write my self :-) – Patrick R Apr 28 '15 at 06:34

2 Answers2

1

You seem to be headed the correct way and doing a good job of it.

Please proceed further by using the following steps as a guideline,

  1. Using jQuery.ajax() or jQuery.post() you can basically send a request to a PHP file.
  2. In the PHP file you can connect to your DB using either PDO or normal mySQL connectors and return your required data back to the AJAX call.
  3. The returned data can be rendered and displayed as required at the HTML sections.

Please use these following references that can give you a better idea code wise:

  1. Beginner’s Guide to Ajax Development with PHP
  2. jQuery Ajax POST example with PHP
Community
  • 1
  • 1
Domain
  • 11,562
  • 3
  • 23
  • 44
  • Great! Thanks a lot. Is this the same? https://css-tricks.com/dynamic-dropdowns/ an example with code so it can see how its done :-) – Patrick R Apr 28 '15 at 07:04
  • I've tried the best i could to make this work. But everytime i choose a category, the other select get blank, and can't find out why. I've made a JSFiddlle so you can see what i've done. Can you please take a look at it, and see what i did wrong ? – Patrick R Apr 28 '15 at 10:24
  • Never mind, found the problem. There was a space and / in the values of options. Deleted them and it worked :-) – Patrick R Apr 28 '15 at 11:28
1

as @WisdmLabs mentioned, you are on the right track...

The steps to continue shouls be:

  1. Add a JS event once both dropboxes were selected (using onchange() or a submit button)

  2. The event will fire an AJAX request for a PHP file with the POST data of the item you want to get the data for.

  3. On the PHP file you will run your SQL query and send back the information needed- preferable as in json.

  4. On the JS AJAX function you will get the Json object and inserted neede info into the page DOM

JS Code

$(".dropboxClass").change(function(){ // you can use a button instead or any other event type
    // here you can first check that bothdropboxes were selected 

    // now get the values of the dropboxes
    drop1 = $("#dropbox1").val();
    drop2 = $("#dropbox2").val();

    // run the AJAX request for the PHP file
    var request = $.ajax({
                    url: 'test2.php',
                    dataType: "json" ,
                    method: "POST",
            data: { d1: drop1, d2:drop2 } 
                });

        request.done(function(itemData){
            // here you will get the Json object , get the data you need and insert into the DOM
            console.log('Status:' + itemData['status']);
            console.log('Name:' + itemData['name']);

            alert('success');
        });

        request.fail(function(){
            // AJAX call failed - do something.....
        });
});

PHP Script

// connect to your DB and get the data you need into an array 

$DB_data = array(
    "status"=>"code",
    "name"=>"item Name",
    "desc"=>"Item Description"
);

echo json_encode($DB_data);
Lupin
  • 1,225
  • 11
  • 17