-2

I'm trying to display the content of myPosters array, that contain HTML code.
However this HTML code is not seen as HTML because it was created according to some gwt code which is understandable.
This is how the code is presented: This is a Title <br> This is a Description
And instead of this <br> I want to convert it, and insert a "real" break line.

I already tried to "convert" that code inside photoCaption div to text() and then to html(), using: $('#photoCaption').text($('#photoCaption').html());
But in this case instead of <br> I got &lt;br&gt;

How can I get rid of this, and present the information as "real" HTML code?

NOTE: Move your mouse over the first image to see the problem!

It should also been taken into account that there is an "image slider" in the real code, and it changes the image presented and the respective photoCaption content.

JSFIDDLE

zppinto
  • 287
  • 7
  • 20
  • 1
    `$('#photoCaption').html(myPosters[0]);` ? – billyonecan Jun 07 '13 at 14:12
  • As explained in the code, that line was added to get the same effect as in my original code! This is created from some code, that's impossible to understand. That's why I have do it that way... – zppinto Jun 07 '13 at 14:12
  • So you're saying you have a string containing html entities, and you need to decode them? http://stackoverflow.com/questions/1147359/how-to-decode-html-entities-using-jquery – billyonecan Jun 07 '13 at 14:17
  • 1
    @zppinto perhaps you should be posting the code you don't understand rather than putting up a question that people answer and then you tell them it's wrong – Pete Jun 07 '13 at 14:26
  • `$('#photoCaption').html(function() { return $(this).text(); });` ? – billyonecan Jun 07 '13 at 14:27
  • I specified very clearly that line number 4 shouldn't be modified... – zppinto Jun 07 '13 at 14:28
  • @zppinto who asked you to modify it? http://jsfiddle.net/mgJLp/21/ – billyonecan Jun 07 '13 at 14:29
  • Sorry I miss understood your answer... The people who are trying to help are all changing the line number 4! And I didn't read your answer correctly. I will try it. – zppinto Jun 07 '13 at 14:30

4 Answers4

3

Just change this line

$('#photoCaption').text(myPosters[0]);

To this

$('#photoCaption').html(myPosters[0]);

Fiddle

EDIT

I read your comment on another answer, try this, then:

http://jsfiddle.net/mgJLp/25/

Basically what it does is fix the text on mouse over, and keeps track of whether it's fixed, because otherwise it'll keep trying to fix while you move the mouse, which removes the line break completely.

MaX
  • 1,765
  • 13
  • 17
  • That line shouldn't be modified ,as I explain in the code! That line was create from some code which is not understandable. Is just there to give the effect of how things are created... – zppinto Jun 07 '13 at 14:19
  • Yes, but when you add the text, which you must do at some point, use `.html` instead of `.text`. – MaX Jun 07 '13 at 14:19
  • And if you want help understanding the other code, we need more code-context... your problem is definitely in relationship to using .text(), and if we can't get around that, or have more context about why you must keep that piece of code the way it is, there's not a lot we can do to help. – Jason M. Batchelor Jun 07 '13 at 14:21
  • The other code was created using gwt! It's impossible to understand it. Isn't there any other way to this? – zppinto Jun 07 '13 at 14:25
  • Depends. Can you tell us how the text is being added to `#photoCaption`, if it's not in the way you described? – MaX Jun 07 '13 at 14:29
  • The effect is the same as in the jsfiddle. However I can't give you more details because I really don't know it. – zppinto Jun 07 '13 at 14:35
  • @Max That's what I'm trying to accomplish :D I know I have not been the most specific. Sorry for that... And thank you :) – zppinto Jun 07 '13 at 14:49
  • No problem, glad to help. I found a bug, though. Please use the fiddle ending in 24, not 23. – MaX Jun 07 '13 at 14:51
  • 1
    Darn, another bug. Please use 25. :) – MaX Jun 07 '13 at 14:57
2

you were not far off with your jquery, the following works in your fiddle: $('#photoCaption').html($('#photoCaption').text());

  • @zppinto add it **after** you have set the `text()` – billyonecan Jun 07 '13 at 14:28
  • I tried it and it works, if the image and the photoCaption associated to it doesn't change! (the photoCaption changes when you slide too a new image in my code). So if I go back to the same image, I lose the correct representation of HTML code :( And it's presented with the
    again.     – zppinto Jun 07 '13 at 14:42
  • not sure I fully understand, couldn't reproduce it in jsfiddle - but in any event, you could just add that command again right after the text changes, whenever that event is triggered –  Jun 07 '13 at 14:48
0

You're escaping in the wrong direction.

You need to set the HTML of the target to the text of the source.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
0

Related to your JSFIDDLE, use:

var myPosters = ["This is a Title  \<br\> This is a Description","Title 2"];

and

$('#photoCaption').html(myPosters[0]);
Pete
  • 564
  • 4
  • 29