Login

05-31-2008, 02:21 AM

[eluser]KeyStroke[/eluser]
Hi,

I have a two drop-down boxes: Category and Sub Category. Sub Category is populated depending on the value of Category using AJAX.

The problem is, since Sub Category is dynamic, I have no idea how to re-populate it.

How is this done?

Appreciate your help

05-31-2008, 02:44 AM

[eluser]Bramme[/eluser]
You should google for this. I'm pretty sure there's tons of tutorials for this!

With jquery, this would be a breeze. Lemme cook up smth.

your html:

Code:
&lt;form&gt;

<select name="category" id="cat">

    <option value="foo">Foo</option>

    <option value="bar">Bar</option>

</select>

<select name="subcategory" id="subcat"></select>

&lt;/form&gt;

your JS code should look like:

Code:
$(document).ready(function() {

  $('#cat').blur(function() {

    var page = this.value;    

    $('#subcategory').load(page + '.html');

  });

});

And create for every cat option a page like foo.html:

Code:
<option value="bar">Bar</option>

etc

etc

edit: the code's not working. I'm working on it though, give me a while to try some stuff out!

Note: I have never tried out smth like this before. Though it probably should work, maybe with a little tinkering.
If you wanna learn more about jQuery (which I love, after having used Mootools and Prototype, I think this one is the best!), I strongly suggest the Packt Publishing book "Learning jQuery"!

05-31-2008, 02:56 AM

[eluser]KeyStroke[/eluser]
I already did, but couldn't find anything helpful.

I'm using jQuery by the way.

05-31-2008, 03:14 AM

[eluser]Bramme[/eluser]
This works for me (sorta) if there are any problems, lemme know:

Code:
<select name="category" id="cat">

    <option selected="selected" value="">Please select</option>

    <option value="foo">Foo</option>

    <option value="bar">Bar</option>

</select>

the js:

Code:
$(document).ready(function() {

  $('#cat').change(function() {

    var page = $('#cat').val();    

    if(page != '') {

        $('#subcat').load(page + '.html');

    }

  });

});

your foo.html etc stay the same. I think using json for this would be a tad better, but it's more code, and I don't completely get it myself yet.

05-31-2008, 03:20 AM

[eluser]KeyStroke[/eluser]
Thanks Bramme, but I don't think your solution would work in my case. I'm calling a PHP controller that queries sub categories and returns them to the view, not static HTML pages.

05-31-2008, 06:54 AM

[eluser]Bramme[/eluser]
[quote author="KeyStroke" date="1212243632"]Thanks Bramme, but I don't think your solution would work in my case. I'm calling a PHP controller that queries sub categories and returns them to the view, not static HTML pages.[/quote]

No problem then. Lemme rewrite my code a bit!

Okay. Here's the renewed jquery js:

Code:
$(document).ready(function() {

  $('select#cat').change(function() {

    var cat = $(this).val();    

    if(cat != '') {

        $.get("process.php",{category: cat}, function(data){

            $("select#subcat").html(data);

        });

    }

});

});

process.php looks like this:

Code:
&lt;?php

if(isset($_REQUEST['category'])) {

    mysql_connect('localhost', 'root', ''); mysql_select_db('dev');

    $cat = $_REQUEST['category'];

    $qry = mysql_query("SELECT * FROM test WHERE cat = '$cat'");

    while($row = mysql_fetch_assoc($qry)) {

        $subcats[] = $row;

    }

    //up until here, just build your array with value/text items that need to populate your second select.

    foreach($subcats as $j) {

        $html .= '<option value="'.$j['value'].'">'.$j['text'].'</option>';

    }

    echo $html;

}

?&gt;

Your html stays the same.

06-16-2008, 09:17 AM

[eluser]Asinox[/eluser]
i need to do something like this... but im new with CI, how ill use the AJAX for this? and how link with the php pages???

Thanks

06-16-2008, 09:57 AM

[eluser]Bramme[/eluser]
It's all in my examples... Look at the first posts too, there's an example of form code that goes in your view, then in the post above you it has the javascript that'll process the ajax, just put that in <script type="text/javascript"></script> tags in your <head> tags (don't forget to include the link to jquery :p) and then there's an example of your php file too...

08-19-2008, 10:43 AM

[eluser]Unknown[/eluser]
Thanx a lot

but I add $html ='' first, in order to run the function
and change .get to .ajax

08-04-2011, 05:08 AM

[eluser]Unknown[/eluser]
I am using above with my grails project (in GSP file). Code is given below. It seems working but when i change the option in cat dropdown it shows alert box twice. Do you know why?

Code:
<g:select id="cat" name="category" 

        from="${Category.findByType(CategoryType.ELECTRONICS)}" value="name" optionValue="name" optionKey="id" noSelection="['0':'--Select--']" /> 

<g:javascript>

$('select#cat').change(function() {

    var cat = $(this).val();  

    alert(cat);    

 }); 

</g:javascript>

Thanks
Krishan Babbar