Uncaught SyntaxError: Unexpected token (Script Ajax Call)

Question

i'm doing in CQ5, a component that connect with a servlet and get this info:

Output Servlet (json format)= [{"text":"A","value":10},{"text":"B","value":20}]

for show A and B in a drop down menu.

This my html code:

<div>
   <form action="/bin/company/repo" method="post">
        <select id="options">
        </select>
    <input type="submit" id="send" value="Send">  
    </form>
    <p id="demo"></p>
</div>

For insert the options (select), i do this javascript in the jsp of component:

<script type="text/javascript">
    //get a reference to the select element
    $select = $('#options');
    //request the JSON data and parse into the select element
    $.ajax({
      url: '/bin/company/repo',
      dataType:'JSON',
      success:function(data){
        //clear the current content of the select
        $select.html('');
        //iterate over the data and append a select option
        $.each(data, function(text, value){
          $select.append('<option id="' + value.value + '">' + value.text + '</option>');
        });
      },
      error:function(){
        //if there is an error append a 'none available' option
        $select.html('<option id="-1">none available</option>');
      }
    });
</script>

But I get Uncaught typeerror undefined is not a function. Maybe I have an error of syntax in my script code. How can I solve?

its true but uncaught typeerror undefined is not a function is the problem now </strong> was an error typing the question :I — jmhdez
– jmhdez, Commented Apr 1, 2015 at 8:52
You are using an id for your select options, should be class since it is not unique. — EternalHour
– EternalHour, Commented Apr 1, 2015 at 8:56
before error:function(){ in " }, " in this place i get Uncaught typeerror undefined is not a function according debugger. — jmhdez
– jmhdez, Commented Apr 1, 2015 at 9:00

jmhdez · Accepted Answer · 2015-04-01 09:47:24Z

There are a conflict between 2 jQuery:

We can delete one or modify the code like this:

<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function(){
    //get a reference to the select element
    //request the JSON data and parse into the select element
    j.ajax({
            url: '/bin/company/repo',
            dataType:'JSON',
            success:function(data){
              //clear the current content of the select
              j('#abcd').html('');
              //iterate over the data and append a select option
              jQuery.each(data, function(text, value){
                 j('#abcd').append('<option id="' + value.value + '">' + value.text + '</option>');
              });
            },
            error:function(){
               //if there is an error append a 'none available' option
               j('#abcd').html('<option id="-1">none available</option>');
            }
    });
})

EternalHour · Accepted Answer · 2015-04-01 09:52:17Z

0

Your code appears to work, only problem I found was that you are not specifying a request type in your AJAX call.

Just add: type: 'post',

Here is a JSFiddle.

edited Apr 1, 2015 at 9:52

answered Apr 1, 2015 at 9:46

EternalHour

8,6776 gold badges40 silver badges58 bronze badges

3 Comments

jmhdez Over a year ago

yep this is the next step now but its work now. i fix it as i writed in my post, thanks!.

EternalHour Over a year ago

Sorry the fiddle wasn't working, forgot to update it :)

jmhdez Over a year ago

read my post where explain there are a conflict between 2 jQuery

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected token (Script Ajax Call)

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related