5

I have a piece of code that is working fine in IE, but it doesn’t run in Firefox. I think the problem is that I have not been able to implement $('document').ready(function). The structure of my json is like [{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]. I will be very thankful if someone can see my code & help me in correctly implementing it. Here is my code:

<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2 /jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) { $.each(jsonData, function (i, j) { document.form1.fruits.options[i] = new Option(j.options); });}); }); </script></head> <body><form name="form1"> My favourite fruit is : <select name="fruits" id="fruits" /></form></body> </html>
Improve this question
5
  • OH OK, thanX for pointing, actually I did not know that I have to accept also for recognition ..... Commented Oct 22, 2010 at 12:18
  • Its not something silly like the way you are setting fruits' options with document.form1.fruits.options[i] is it? Just wondering if this is what firefox is disliking rather than the ajax/onload parts. If you stick in an alert just before that does it get triggered? Its a good way of testing. Or install firebug and look at the javascript console for errors. Commented Oct 22, 2010 at 14:16
  • firebug is always saying 'syntax error' and " 'a' undefined ......" many times.For syntax error, its pointing on closing braces & parenthesis. I checked many times but I did not find any misplaced OR missed brace/parenthesis. U can see it too.One more thing is if its syntax error, than why its running in ie. Commented Oct 22, 2010 at 17:11
  • no, alert doesn't trigger any option, even not index i.e. i. The Firebug console is showing no error, just 4 warnings. Commented Oct 22, 2010 at 19:40
  • I have corrected the code, it was localhost addressing method problem. I edited the code, 127.0.0.1 should be used in spite of localhost in geJson. Commented Oct 23, 2010 at 22:35

5 Answers 5

Reset to default
4

Short version (suggested by meeger): don't use single quotes around document.

document is a variable that comes with JavaScript (at least in the browser context). Instead, try the following for the relevant line.

$(document).ready(function() {

You'll also want to take the onLoad attribute off of the body tag, else it will run twice.

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

2 Comments

To summarize, don't use single quotes around document.
@some Use of double quotes wasn't in question; you could also have said "don't use brackets or dollar signs or periods or commas around document"
2

Just run $(document).ready(function() {doStuff}). This will automatically run when the document is ready.

It's best practice, at least in my opinion, that you don't put any events in the html itself. This way you separate the structure of an html document from it's behavior. Instead attach events in the $(document).ready function.

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.getJSON("http://localhost/conn_mysql.php", function (jsonData) { var selectElem = $('#fruits'); for(var i = 0; i < jsonData.length; i++) { selectElem.append($('<option>').html(jsonData[i].options)); } }); }); </script> </head> <body> <form name="form1"> My favourite fruit is : <select name="fruits" id="fruits" /> </form> </body> </html>

EDIT: I tested with the following and mocked the json object since I can't make that call myself.

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var jsonData = JSON.parse('[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]'); var selectElem = $('#fruits'); for(var i = 0; i < jsonData.length; i++) { selectElem.append($('<option>').html(jsonData[i].options)); } }); </script> </head> <body> <form name="form1"> My favourite fruit is : <select name="fruits" id="fruits" /> </form> </body> </html>
Improve this answer

14 Comments

now there is one confusion. From these answers it is now seeming 2 me that there is only $(document).ready(function() has to be used as top level function in script, inside which is $.getJson used. While my understanding is that I its top level function & inside it I have to define another function(like I define preLoad()) that will implement $.getJson & this function will be called like I called it with onLoad event. Can u kindly answer me about it.
I refer you to api.jquery.com/ready. The .ready function will get called once the page has fully loaded. You can define the function multiple times if you'd like, they will get run lexically as it appeared on the page. I was merely saying that you should avoid using the onLoad event in the html itself as it doesn't provide for much flexibility in design.
OK, thanks that have had a clear example. I have edited the code now but its behaving same i.e. executing in IE but not in firefox. Whats trouble now.
Can you post your console output or give more indication as to /how/ its now working?
I just tested that exact and it worked in both chrome and firefox. The only difference is that instead of getting the json, I mocked it with just var jsonData = JSON.parse('[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]'); as you said this is how your data came out. That said, I think the problem is with your json service not returning the right thing.
|
2

Here it is in all its glory. The shorthand, awesome version:

UPDATED

<script type="text/javascript" language="javascript"> $(function() { $.getJSON("http://localhost/conn_mysql.php", function (jsonData) { var cacheFruits = $('#fruits'), cacheOption = $(document.createElement('option')); $.each(jsonData, function (i, j) { cacheFruits.append( cacheOption.clone().attr('value', j.options).html(j.options) ); }); }); }); </script>

Of course, I don't know what your JSON structure is, so you may need to play around with the append section of the code.

There should be no reason why the above would not work.

Improve this answer

6 Comments

I prefer to use $.ready(function) as it is slightly less magically named. jQuery.ready. Just out of curiosity, why not $('<option/>') for the creation?
I respect your position, but I wouldn't call this one magic. Well, actually I would, but for different reasons. ;) The reason for the document.createElement() is becuase it's faster than the string-parsed $('<option/>') version.
@Stephen no, it is not working. U say I need to drop <body onload> mean it should only be a normal body tag <BODY>. The structure of my json is like [{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}].
I edited the code, its still running in ie but not in firefox. Can u see now whats problem. thanX
I updated the code. If it doesn't work, then you've got other problems. Possibly a duplicate ID or other invalid HTML issues.
|
0

You do not need quotes around document. Once the page has completely loaded, it will start executing whatever you have defined in ready()

$(document).ready(function() { $(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) { $(this).each(jsonData, function (i, j) { document.form1.fruits.options[i] = new Option(j.options); }); }); });
Improve this answer

Comments

0

Try this, your json data should be in this format:

[{'text':'sometext','value':'somevalue'},{'text':'sometext','value':'somevalue'}]; $(document).ready(function() { $(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) { var options = []; $.each(jsonData, function (i, j) { options.push('<option value="' + j.value + '">' + j.text + '</option>'); }); $('#fruits').html( options.join('')); }); });

Please note that there may be an encoding/escaping issues here. Make sure that you escape the text properly from the server side. htmlentities, htmlspecialchars can help you with that.

This should work in most browsers

Improve this answer

1 Comment

I have tested it, it even don't run in ie with now corrected code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.