How to include HTML into jEditable placeholder?

Question

I'd like to have jEditable placeholder with distinguishing style, so I tried to include simple span into placeholder attribute and it looks as I expected, however, on click it works like default value but displays the placeholder's content as raw HTML code in the input box:

$(function() {
     $(".testjedit").each(function() {
            var old_value = $(this).attr( 'data-default' );
            var ph = $(this).attr( 'data-placeholder' );

            $(this).editable("http://localhost/index.php/welcome/update_record", { 
              "callback": function( value, settings ) {                              
                $( this ).attr('data-default', value );
              },
              "placeholder": "<span class='ph'>" + ph + "</span>",
              "submitdata": { 
                "oldvalue": old_value,
                "check": 1
              }
            }); 
     });
});

I put it all together into jsfiddle, so you can play with it to see what is wrong. Try to click on "Comment".

duplicate of http://stackoverflow.com/questions/12767828/jeditable-showing-placeholder-text-in-edit-textbox - swap the single and double quotes in the placeholder and it works http://jsfiddle.net/8b8nH/4/ — CupawnTae, Jun 22 '14 at 11:03

score 2 · Accepted Answer · answered Jun 22 '14 at 19:44

2

There seems to be a little bug in jEditable. You may use HTML as placeholder, however, don't use single quotes in attributes.

//  "placeholder": "<span class='ph'>" + ph + "</span>",
    "placeholder": '<span class="ph">' + ph + '</span>',

I've updatet your Fiddle: http://jsfiddle.net/8b8nH/10/

As far as I could determine, the match fails at this point:

/* Remove placeholder text, replace is here because of IE. */
if ($(this).html().toLowerCase().replace(/(;|"|\/)/g, '') == 
    settings.placeholder.toLowerCase().replace(/(;|"|\/)/g, '')) {
       $(this).html('');
    }

answered Jun 22 '14 at 19:44

Pinke Helga

6,378
2
22
42

Again, you will have to explain where I missed something, but @Quasimodo'sclone, your Fiddle doesn't show any `` tags on editing of the jEditable. In fact, your jEditables **are not editable!** – Dave Alperovich Jun 22 '14 at 20:00
In the original Fiddle the span-Tag appears after click on "Comment". The Fiddle link in my answer refers to the corrected version. All the edited data will be reset on Fiddle due to same origin policy of AJAX requests since the server side script isn't hosted on Fiddle. If you cannot reproduce the error at the OP's original link then maybe your browser isn't affected. – Pinke Helga Jun 22 '14 at 20:16
Quasimodo'sclone and Dave A : sorry being unclear. Like @CupawnTae pointed, problem was simple. Thank you all! If CupawnTae does not provide answer in a few days, I will accept this one. – w.k Jun 22 '14 at 23:11
maybe you are psychic. +1 – Dave Alperovich Jun 23 '14 at 23:18
@Dave A lol :) I've simply investigated the problem a longer time. First I thought something similar as you did, however, that could be done by a very simple CSS rule and there has been already one field without an initial value, so that couldn't be the question. Then I've found the HTML code editable in the input field, that obviously looked like an error. The question had been formed very strange. – Pinke Helga Jun 23 '14 at 23:58
@w.k No problem, I've edited your question to clarify the point. Yes, CupawnTae came up with a link to a duplicate question some hours earlier while I was examining the source of error in the plugin code. I've seen his comment after I've posted my answer and didn't want to revoke my answer since the duplicate doesn't point out the error source. I'm not familiar with this community if one should transfer this information to the other question. If Tae doesn't provide an answer, I could use some rep as newbie to get more chance of participation. – Pinke Helga Jun 24 '14 at 00:22
@w.k. and Quasimodo, FYI I actually flagged the question for moderator attention, which is why I didn't answer it - it's not possible to vote to close a question as a duplicate when there's an open bounty. Meta stack overflow suggested the correct course of action is to flag it for moderator attention so they can refund the bounty. I have no idea if it will eventually get closed by a mod or left as is. Enjoy the bounty if you get to keep it. Next time, I'll answer as well as flagging :) – CupawnTae Jun 30 '14 at 19:09
@CupawnTae No problem, I'm new to this community and not very familiar with it. Should you first search for duplicates before giving an answer? How to flag? Nevertheless this bounty helps me to gain more capabilities of contribution to this platform since features are reasonably restricted for beginners. :) – Pinke Helga Jul 01 '14 at 12:56
Between the question and the comments there's a "flag" option (once you have at least 15 rep) - if you click that you have options such as "duplicate". In this case because there was an open bounty I couldn't flag is as a duplicate so instead I flagged it for moderator attention and explained. But either they haven't got to it yet or they decided to leave it open anyway, I can't tell. In general, they want to eliminate duplicates, so you risk wasting your time answering a question only to find it closed as a duplicate. – CupawnTae Jul 01 '14 at 14:34
1

Some further reading http://meta.stackoverflow.com/questions/252009/should-there-be-a-deterrent-for-answering-obvious-duplicate-questions – CupawnTae Jul 01 '14 at 14:41

How to include HTML into jEditable placeholder?

1 Answers1