quotes javascript(jquery)-html-php

Question

I'm stack in such question:

example

<td>
    <span style="cursor:pointer;" onclick="$(this).parent().html('<input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),'title' ,'3')}\'>');">
        <?=$result['settings_title']?>
    </span>
</td>

looks like fine but in browser I get "Uncaught SyntaxError: Unexpected identifier" in this row(chrome listing):

<span style="cursor:pointer;" onclick="$(this).parent().html('input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),'title' ,'3')}\'>');">asdasd</span>

Please, help me - if somebody had such trouble before.Where am I wrong? Maybe will be better do it via PHP echo(I guess not:) )?

You should separate the JavaScript from the HTML. This nested event handler assignment can only call for quotes trouble. Looks like it's this part send_ajax_settings($(this),'title' ,'3'). Do yourself a favour and write maintainable code... — Felix Kling
– Felix Kling, Commented May 4, 2011 at 8:51

Edgar Villegas Alvarado · Accepted Answer · 2011-05-04 13:43:27Z

3

You didn't escape apostrophes in 'this' and '3'.
The right markup is this:

<span style="cursor:pointer;" onclick="$(this).parent().html('input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),\'title\' ,\'3\')}\'>');">asdasd</span>

However, this kind of binding events is a very bad practice, and conduces to the type of mistakes you've just had. You should do it like this:

 <span style="cursor:pointer;" class="spanClass" data-param1="title" data-param2="3">asdasd</span>
 <span style="cursor:pointer;" class="spanClass" data-param1="title2" data-param2="5">asdasd</span>
 ... more spans generated dynamically

and have this:

   $(document).ready(function(){
     $(".spanClass").click(function(){
          var param1 = $(this).attr("data-param1");
          var param2 = $(this).attr("data-param2");
          $('<input type="text" value="asdasd" />').keydown(function(event){
            if(char_click(event)==13) {
               send_ajax_settings($(this), param1 , param2));
            }
          }).appendTo($(this).parent());
      });
    });

So, you can have javascript and html separated, and will work for any amount of elements generated dynamically by the server.

Hope this helps. Cheers

edited May 4, 2011 at 13:43

answered May 4, 2011 at 8:54

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

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

1 Comment

Justin Johnson Over a year ago

A very bad practice indeed. +1 for providing an answer with sanity!

Tom Gullen · Accepted Answer · 2011-05-04 08:50:26Z

3

I think you are still missing some escapes in the send_ajax function, try this:

<span style="cursor:pointer;" onclick="$(this).parent().html('input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),\'title\' ,\'3\')}\'>');">asdasd</span>

Alternatively to keep things more manageable, you can make the onclick call a function that executes the given code. This means you don't have to worry about escaping so much and should be a lot easier for you.

answered May 4, 2011 at 8:50

Tom Gullen

61.9k89 gold badges294 silver badges472 bronze badges

2 Comments

devworkstation Over a year ago

I thought about onclick function before - but decided to ask here first - to be sure that it is the best way to resolve this "magic" quotes.:)

Edgar Villegas Alvarado Over a year ago

@user I've posted a suggestion of a well structured code so you don't have those quoting problems again

Collectives™ on Stack Overflow

quotes javascript(jquery)-html-php

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related