jQuery array() with select on change

Question

I am trying to minimize my code by putting it into an array but nothing happens. I can't figure out what I am doing wrong. Here's the code

<html>
    <head>

    <title>test</title>

    <!-- JavaScript -->
    <script src="js/jquery-1.5.2.js" type="text/javascript"></script>   
    <script type="text/javascript">

        var phpfile = new Object();
        phpfile["testselect"] = "zoomchange.php";


        var elementID = new Object();
        elementID["testselect"] = "#testdiv";

        $(document).ready(function(){

            $("select").change(function() {
              $.post(
                phpfile[$(this).id()],
                $(this).serialize(),
                function(data) {
                  $(elementID[$(this).id()]).html(data)
                }
              );

            });

        });

    </script>   

    </head>

    <body>


    <select id="testselect">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <div id="testdiv"></div>

    </body>
</html>

here is the zoomchange.php:

<?PHP echo $_REQUEST['testselect'] ; ?>

first you need to choose one doctype and delete comment and don't try to minimize your code, but make it clear and readable. — Nemoden
– Nemoden, Commented May 5, 2011 at 5:17

mu is too short · Accepted Answer · 2011-05-05 05:32:12Z

2

Your initializers shouldn't look like this:

var phpfile = new Array();
phpfile["testselect"] = "zoomchange.php";

var elementID = new Array();
elementID["testselect"] = "#testdiv";

A JavaScript Array is indexed by numbers, not strings. You want simple object literals:

var phpfile   = { testselect: 'zoomchange.php' };
var elementED = { testselect: '#testdiv'       };

Then, your POST callback is confused:

function(data) {
    $(elementID[$(this).id()]).html(data)
}

this isn't what you think it is when that function is called. You want something more like this:

$("select").change(function() {
    var that = this;
    $.post(
        phpfile[that.id],
        $(this).serialize(),
        function(data) {
            $(elementID[that.id]).html(data);
        }
    );
});

answered May 5, 2011 at 5:32

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arihant Nahata · Accepted Answer · 2011-05-05 05:31:26Z

0

This

function(data)
{
  $(elementID[$(this).id()]).html(data);
}

instead of this

function(data)
{
  $(elementID[$(this).id()]).html(data)
}

Is this the error ?

answered May 5, 2011 at 5:31

Arihant Nahata

1,7502 gold badges19 silver badges30 bronze badges

2 Comments

mu is too short Over a year ago

JavaScript doesn't require semicolon statement terminators (even though you really should use them).

ariel Over a year ago

in javascript a semicolon before } is optional

Edgar Villegas Alvarado · Accepted Answer · 2011-05-05 05:36:51Z

0

You should do new Object() instead of new Array(). Edit: There are other mistakes, your js code should be this:

<script type="text/javascript">
        var phpfile = {};
        phpfile["testselect"] = "zoomchange.php";

        var elementID = {};
        elementID["testselect"] = "#testdiv";

        $(document).ready(function(){

            $("select").change(function() {
              var $select = $(this);
              $.post(
                phpfile[$select.attr("id")],
                $select.serialize(),
                function(data) {
                  $(elementID[$select.attr("id")]).html(data)
                }
              );

            });
       });
</script>

edited May 5, 2011 at 5:36

answered May 5, 2011 at 5:21

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

4 Comments

Edgar Villegas Alvarado Over a year ago

@ariel, It's a bad practice to store hashtables in javascript arrays, they must be in objects

ariel Over a year ago

cool.. didn't knew that. but that wasn't the error, probably was the reference to 'this' inside the ajax callback

labratt Over a year ago

ok the obove script updated the div with the random text i but on the bottom of the page... but the select is not getting submitted

labratt Over a year ago

with Edgar Villegas Alvarado script i checked firebug and there is no post data

Collectives™ on Stack Overflow

jQuery array() with select on change

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related