An attribute breaks after quote(') when using jquery and append() - javascript

The code below prints out 333'> when using jQuery. I don't know if I did something wrong there.
$('#test').append("<div id='").append("333").append("'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="test"></div>

It looks like there's a missing quotation mark at the end of the string being appended. Try changing the line of code to the following:
$('#test').append("<div id='333'></div>");
This should fix the issue and produce the desired output.

Related

how to append 4-5 spaces in jquery?

i am trying to append 4-5 apces by the below code but it's not
working. new to Jquery,JS pls help.
$("#<%= lbl100.ClientID %>").text("Your search request is too broad and the first 100 results are displayed.Please refine your search if your result does not show.").append(" ");
Note:- I have also used &nbsp and adding space in the end(not worked) but they are printing as it is and space not coming
Use with html()and make sure that id:- <%= lbl100.ClientID %> is correct and exists.
Example:-
$("#abc").html("Your search request is too broad and the first 100 results are displayed.Please refine your search if your result does not show. ").append(" ");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>
Note:- if you try to select the text then you will see that spaces are also selected.
Another way to do it:-
$("#abc").html("Your search request is too broad and the first 100 results are displayed.Please refine your search if your result does not show. see the space");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>
Note:- Make sure that jQuery library added before your script code otherwise it will not work and you will get $ is undefined error in your browser console.
That's how HTML works: white-space is collapsed into a single space. If you need hard-coded duplicate spaces you need to insert a literal U+00A0 NO-BREAK SPACE character. There're several ways to do it:
Type it as-is (you may also use the clipboard)
Insert a JavaScript entity
Insert an HTML entity
Snippet illustrates #2 and #3 (the editor would convert the character to regular space):
$("div:nth-of-type(1)").text("One\u00A0\u00A0\u00A0\u00A0Two");
$("div:nth-of-type(2)").html("One Two");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
<div></div>

appendTo() a specific div

I know I'm probably missing something simple but:
var GAME_CANVAS_ELEMENT = $("<canvas id='Project-001-Canvas' class='Project-001-CSS'></canvas>");
GAME_CANVAS_ELEMENT.appendTo($('.a'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a"></div>
This works if I appendTo('body') but if I attempt to append to anything else it doesn't seem to work.
I'm wrapping your code inside $(document).ready(function(){}) and with chrome it works: http://jsfiddle.net/o2gxgz9r/3701/
You can verify it by inspecting your html code with Chrome developer tool

jquery find fails when argument has invalid characters

I am using jquery. If I have a div that looks like this:
<div class="container" title="Mark">
and I run:
find('div.container["title=Mark"]');
then it works. Which means, the element is found.
However, if I have another div that looks like this:
<div class="container" title="Mark Person">
then it doesnt work. Which means: the element is not found and jquery give an exception:
Error, Syntax Error: unrecognized expression.
It seems that when "title" is a string with no whitespaces or other characters like slash, then it works. In other case, jquery doesnt understand that tag.
is there a way to avoid changing in my code everywhere (it is a lot of changes) and make find-function to work with this elements?
You've got your " marks in the wrong place. Place them around the value:
var mp = $(document).find('[title="Mark Person"]');
mp.css('font-weight', 'bold');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" title="Mark Person">should be bold</div>
<div class="container" title="Mark">should not be bold</div>

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

Passing rendered html to a javascript function

I have some html code rendered on the server side. This is passed to a jsp which renders a javascript-call with this html:
<script type="text/javascript">
window.parent.${param.popup_return}("${helpId}", "${content}");
</script>
content is like
"
This is a <p class="xyz">test</p>
"
My problem is that - according to the quotes in 'content' - the javascript-call is wrong as it is rendered to
<script type="text/javascript">
window.parent.${param.popup_return}("ybc", "This is a <p class="xyz">test</p>");
</script>
Does anyone know how I can solve this (besides manually replacing all quotes)?
Use a JSON encoder to create the encoded strings.
But you'll also have to ensure that the output doesn't contain the sequence </ in string literals, which is invalid in a <script> block (</script is the version that will also break browsers).
Many JSON encoders either by default or optionally will encode to <\/ or \u003C/ to avoid this problem.
I use this:
<div id="result" style="display:none">
${content}
</div>
<script type="text/javascript">
window.parent.${param.popup_return}("${helpId}", dojo.byId("result").innerHTML);
</script>
This seems to work perfectly
You aren't using JSTL here (you originally tagged the question with only JSTL). You are using EL in template text. It get printed plain as-is. You'd like to use JSTL core <c:out> to escape predefined XML entities (which also works for HTML in this particular case, quotes is among the escaped XML entities).
window.parent.${param.popup_return}("<c:out value="${helpId}" />", "<c:out value="${content}" />");
An alternative (if you hate that the JSP syntax highlighter or validator bugs/jerks about nested tags/quotes) is the JSTL function fn:escapeXml():
window.parent.${param.popup_return}("${fn:escapeXml(helpId)}", "${fn:escapeXml(content)}");
Have you tried using single quotes instead of double quotes? i.e. changing "${content}" to '${content}'

Categories