Error while passing parameter to javascript function dynamically

Question

I am creating list dynamically. When user click on that li element setCollege method will be called.

Code to generate li is:

$('#dropDown ul').append("
<li onclick=setCollege("+ data[i].id +",'"+ data[i].college_name +"')><i class='fa fa-university'></i>" + data[i].college_name + "</li>");

but javascript dynamically add " after space in college name like

<li onclick="setCollege(3,'Nirma" university')"> <i class="fa fa-university"></i>Nirma University</li>

due to ", it produces error while calling js function

escape does URL encoding, not HTML encoding. It's the obsolete name of encodeURIComponent. — Barmar
– Barmar, Commented Jun 19, 2014 at 9:28
@Barmar, ok encodeURIComponent(data[i].college_name) then inside setCollege() the OP can just use decodeURIComponent() — Reigel Gallarde
– Reigel Gallarde, Commented Jun 19, 2014 at 9:36
@Barmar and Reigel : No need to escape the data[i].college_name. It doesn't have any double quotes in between. See the resulted output value of data[i].college_name was <li ......><i class="fa fa-university"></i>Nirma University</li><li>. — Ranjith
– Ranjith, Commented Jun 19, 2014 at 9:39

Ingmars · Accepted Answer · 2014-06-19 10:00:24Z

1

onclick is a html attribute, thus it needs to be put in quotes itself.

Try this instead:

var tpl = '<li onclick="setCollege(' + data[i].id + ', ' + data[i].college_name + ' );"><i class="fa fa-university"></i>' + data[i].college_name + '</li>';
$('#dropDown ul').append( tpl );

Pay attention to single vs. double quote usage.

But since your question is flagged as jquery, I'd suggest:

var listItem = $( '<li></li>' ).text( data[i].college_name );
$( '<i class="fa fa-university"></i>' ).prependTo( listItem );
listItem.on( 'click', function() {
    setCollege( data[i].id, data[i].college_name);
});
listItem.appendTo( '#dropDown ul' );

edited Jun 19, 2014 at 10:00

answered Jun 19, 2014 at 9:32

Ingmars

9985 silver badges10 bronze badges

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

1 Comment

Reigel Gallarde Over a year ago

.text() will replace <i class="fa fa-university"></i>

Rahul Gupta · Accepted Answer · 2014-06-19 09:25:32Z

0

Try using like:

$('#dropDown ul').append("
<li onclick=setCollege("+ data[i].id +",&quot;"+ data[i].college_name +"&quot;)><i class='fa fa-university'></i>" + data[i].college_name + "</li>");

answered Jun 19, 2014 at 9:25

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Comments

Ranjith · Accepted Answer · 2014-06-19 09:36:13Z

0

Your concatenation starts with double quotes("). So you need to follow till the end of the statement.

Try this,

"'+ data[i].college_name +'"

instead of

'"+ data[i].college_name +"'

Also add double quotes(" ") surround by the onclick event, and escape them,

onclick=\"setcollege(.......)\"

edited Jun 19, 2014 at 9:36

answered Jun 19, 2014 at 9:31

Ranjith

2,8393 gold badges24 silver badges42 bronze badges

Comments

halfer · Accepted Answer · 2018-08-09 11:00:55Z

0

Because you don't add the surrounding " to your onclick attribute:

$('#dropDown ul').append("
<li onclick=\"setCollege("+ data[i].id +",'"+ data[i].college_name +"')\"><i class='fa fa-university'></i>" + data[i].college_name + "</li>");

but why don't you use jQuery to attach the event to the list items? This would be the better solution:

$('#dropDown').on('click', 'li', function() {
    setCollege(...);
});

edited Aug 9, 2018 at 11:00

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jun 19, 2014 at 9:25

Philipp

15.7k4 gold badges38 silver badges54 bronze badges

Collectives™ on Stack Overflow

Error while passing parameter to javascript function dynamically

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related