I'm working on a lightbox script and running into a problem using a custom data-lightbox attribute. What I'm trying to do is allow for the data-lightbox attribute settings to be added dynamically to the page - on an image.
Here's my image:
<a href="largeimage.png" data-lightbox='{"setting":"value","setting":"value"}'>
<img src="thumbnail.png" />
</a>
Here's the part of the script that I'm using to inject the settings:
$('#testthumbnail').find('a').attr('data-lightbox',settings);
Settings is just a string, that is getting dumped into the attribute. When run, I don't receive any errors, and the settings are all injected to the data-lightbox attribute correctly. The settings aren't taking effect in the plugin though for 1 reason - somewhere along the lines the html that gets output to the page looks like this:
<a href="largeimage.png" data-lightbox="{"setting":value"}"> ...
The surrounding ' ' on the data-lightbox attribute are converted to " " - which won't work in my situation. Does anyone have any idea why the apostrophes are converted to quotes and how I can possibly get around this?
Thanks!
UPDATE:
I have the settings variable available both as a properly formatted JSON string as well as an object. I've tried using both the Object and the string inside the data-lightbox attribute, but am running into the same problem. The browser is converting my ' 's to " "s which is causing JSON errors.
Your quotes are wrong. HTML attributes need to use double quotes. So you need to use the single ones on the JSON value. The browser output you see is the browser trying to do the best it can to correct the html.
Related
I began creating a dynamic portfolio, where an array will automatically populate an ordered list with list items. The list items will have the label as the name and the url as the link.
This has mostly worked, except the problem is that I cannot get the 'href' attribute in the tag to change. Instead of being week1/index.html, it ends up being [object Text]. You can see this in the HTML picture. When looking at the URL in my browser when viewing the HTML page, it says [object%20Text] at the end of the URL instead of week1/index.html at the end.
I have tried using setAttribute, as is shown in the code. I have also tried using newA.href = newURL. What I'm doing seems to match solutions that I have found on the internet, but it isn't working. If I remember correctly, I also tried manipulating the onclick attribute to change the link when it is clicked, but that wasn't working either. If there's a syntax issue, I am unaware of it.
I was curious if my newUrl variable had the correct information, and it does. If I do newA.appendChild(newUrl) instead of newA.appendChild(newLabel), it will correctly show that as the label of the list item. If I do newA.setAttribute("href", newLabel) instead of using newUrl, then it will show the same [object Text] inside the href attribute.
Thank you for taking the time to look at this and think about what the issue is.
The javascript code
how the HTML looks after everything:
Always paste your code here so that we can help you more easily.
you're calling
const newUrl = document.createTextNode(links[i].url);
which creates a text object
then you have newA.setAttribute("href", newUrl); which sets the href attribute to that TEXT OBJECT like it shows in your rendered html.
correct the declaration/initialization line to a string
const newUrl = links[i].url;
I have a script that pulls a text from an API and sets that as a tooltip in my html.
<div class="item ttip" data-html="<?php echo $obj->titleTag;?>">...</div>
The API allows html and javascript to be entered on their side for that field.
I tried this $obj->titleTag = htmlentities(strip_tags_content($this->channel->status)));
I now had a user that entered the following (or similar, he is blocked now I cannot check it again):
\" <img src="xx" onerror=window.location.replace(https://www.youtube.com/watch?v=IAISUDbjXj0)>
which does not get caught by the above.
I could str_replace the window.location stuff, but that seems dirty.
What would be the right approach? I am reading a lot of "Whitelists" but I don't understand the concept for such a case.
//EDIT strip_tags_content comes from here: https://php.net/strip_tags#86964
Well, It's not tags you're replacing now but code within tags. You need to allow certain attributes in your code rather than stripping tags since you've only got one tag in there ;)
What you wanna do is check for any handlers being bound in the JS, a full list here, and then remove them if anything contains something like onerror or so
The following is working when the content is no space
<a onclick=fbShareDialog("{\"name\":\"aaaaaaa\"}">
but if there is a space between
<a onclick=fbShareDialog("{\"name\":\"bbbbb bbbbb\"}">
it throws Uncaught SyntaxError:unexpected token illegal
as i think all the content is in quotation , why not works?
thanks in advance
You need to make sure you escape the space and put everything within double quotes.
I can't test it out now but try something like.
Also, it may be a better idea if you didn't write this inline and wrote a function to catch the click event instead.
You're implying a quoteless-attribute, which is really bad form in HTML but unfortunately still allowed due to HTML's sordid history. The attribute is 'onclick', which actually includes fbShareDialog, but that isn't in quotes.
Try:
<a onclick='fbShareDialog({"name":"bbbbb bbbbb"})'>
Or better yet, bind your click events in a .js file for your app, not onclicks in the html.
The question is pretty self explanatory. What I want to do is changing the value of a textarea with jQuery. What I do is:
$( '#embedcode' ).val( "<script id='embed_1' src='/javascripts/test.js' type='text/javascript'></script>" );
What is the right way to do that. I keep getting an error :
Uncaught SyntaxError: Unexpected identifier
How to make the that I want to add as a string not a script.
Here you go:
Make your String like this :
$('#embedcode').val("<script id='embed_1' src='\/javascripts\/test.js' type='text\/javascript'><\/script>");
Check out this JsFiddle i made for you:
http://jsfiddle.net/KB9Qn/14/
You need to escape the "<" and ">".
$('#embedcode').val("\<script id='embed_1' src='/javascripts/test.js' type='text/javascript'\>\</script\>");
Demo
Your code seems to work perfectly. Here's the live demo: Click here
You need to check the line number where you are getting that error.
edit: I just had the thought. If your html markup has an error (maybe an unclosed textarea) the script can be evaluated as a script tag rather than text. Check for that. Here is a live example of an html error that will cause your problem. Click here.
Update: I believe I know exactly what the real issue is. The other posts are recommending that you escape the '<' and '>', but that should only be necessary if this javascript you are using is actually in an html file (or html generated by the server) rather than in a js file where it belongs. In the js file, it will naturally be a string as you have written it, but the html file sees it as markup even though it isn't intended to be. This is an example of why you should follow the best practices and keep javascript in a js file.
escape the < and > in the string with \
I need to pass html to javascript so that I can show the html on demand.
I can do it using textareas by having a textarea tag with the html content on the page, like so: <textarea id="html">{whatever html I want except other textareas}</textarea>
then using jquery I can present it on the page:
$("#target").html($("#html").val());
What I want to know is how to do it properly, without having to use textareas or having the html present in the <body> of the page at all?
You could use jquery templates. It's a bit more complex, but offers lots of other nice features.
https://github.com/codepb/jquery-template
Just save it in a variable:
<script type="text/javascript">
var myHTML = '<div>Foo Bar</div>';
</script>
As far as I know there is no painless way to do this due to the nature of html and javascript.
You can store your html as a string in a javascript variable such as:
var string = '<div class="someClass">your text here</div>';
However you should note that strings are enclosed within ether ' or " and if you use ether in your html you will prematurely end the string and cause errors with invalid javascript.
You can decide to only use one type of quote in your html say " and then ' to hold strings in javascript, but a more concrete way is to escape your quotes in html like so:
<div \"someClass\">your text here</div>
By putting \ before a special character you are telling it that it should ignore this character, however when you go to print it out the character will still print but the \ character won't, giving you functioning html.
Just like remy mentioned, you can use jQuery templates, and it's even cooler if you combine it with mustache! (which supports a lot of platforms)
Plus the mustache jQuery plugin is way more advanced than jQuery templates.
https://github.com/jonnyreeves/jquery-Mustache