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

2
  • 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. Commented Apr 27, 2015 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 :-) Commented Apr 28, 2015 at 6:34

2 Answers 2

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
Sign up to request clarification or add additional context in comments.

3 Comments

Great! Thanks a lot. Is this the same? css-tricks.com/dynamic-dropdowns an example with code so it can see how its done :-)
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 ?
Never mind, found the problem. There was a space and / in the values of options. Deleted them and it worked :-)
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);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.