Jquery script not showing in firebug or firing

Question

I'm trying to get a drop down box to alter a second drop down box through the use of a jquery/ajax script. Firebug is showing Jquery is working but my script isn't showing at all.

<script type="text/javascript">
        function ajaxfunction(parent)
        {
            $.ajax({
                url: '../functions/process.php?parent=' + parent;
                success: function(data) {
                    $("#sub").html(data);
                }
            });
        }
    </script>

process.php is just a MySQL query (which works)

My initial drop down box is populated by a MySQL query

<select name="front-size" onchange="ajaxfunction(this.value)">
//Query
</select>

And then the second drop down box is just

<select name = "front-finish" id="sub">
</select>

How can I solve this?

can you see your ajax call in Firebug ? Do you have any error in the console ? — MatRt, Mar 18 '13 at 06:23
I think you have an issue with jQuery inclusion. When it's ok, the ajax call will be visible and it should be ok. Advice: avoid inline code like `onchange=...`. Prefer adding javascript behaviour with the `.ready()` method of jQuery and `.on('change', callback)` — MatRt, Mar 18 '13 at 06:28

GautamD31 · Answer 1 · 2013-03-18T06:37:36.033

0

In your process.php give like this

echo "<select name='front-finish' id='sub' onchange='ajaxfunction(this.value)'>";

like this you need to add the "onchange" function to the newly created select box through ajax

or you can remove onchange function and write like

$("select[name^='front-']").live('change',function(){
   //Do your ajax call here
});

edited Mar 18 '13 at 06:37

answered Mar 18 '13 at 06:21

GautamD31

28,552
10
64
85

Iam giving 2 soultions and the second one will work better if he has 2 or more select boxes and also he is updating entire select box through ajax....thats why instead of adding onchange event on every ajax call I suggetsed to add event....I think it should better – GautamD31 Mar 18 '13 at 06:33

score 0 · Accepted Answer · edited May 23 '17 at 10:32

calling inline function is not good at all... as web 2.0 standards suggest using unobtrusive JS rather than onevent attributes....check out why here.. other thigs..correct way to use ajax is by using type and data ajax option to send values in controller..

<script type="text/javascript">
    $(function(){
    $('select[name="front-size"').change(function()
    {
        $.ajax({
            url: '../functions/process.php',
            type:'get',
            data:{'value' : $(this).val()}, 
            dataType:"html",   //<--- here this will take the response as html... 
            success: function(data) {
                $("#sub").html(data);
            }
        });
    });
 });
</script>

and your proces.php should be..

 <?php
   //db query ...thn get the value u wanted.. 
   //loop through it..
   $optVal .= "<option value="someDbValue">some DDB values</option>";
   // end loop

   echo $optValue;exit;

updated

looks like you still have onchange="ajaxfunction(this.value)" this in your select remove that it is not needed and the ajaxfunction in javascript too...

<select name="front-size" >    
                   //----^ here remove that

Hmm I continue to get a 'ajaxfunction undefined' error in firebug — , Mar 18 '13 at 22:57
look like you ar still calling the inline funtion.. remove that ..check my updates — bipen, Mar 19 '13 at 05:23

score 0 · Answer 3 · answered Mar 18 '13 at 06:26

use jQuery.on() that will allow us to add events on dynamically loaded content.

$('select[name^="front-"]').on('change',function(e){
    e.preventDefault();
    var value = $(this).val();
    ajaxfunction(value);
});

[name^="front-"] this will select all the SELECT box having name starts with front-.

Jquery script not showing in firebug or firing

3 Answers3