jquery find fails when argument has invalid characters - javascript

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>

Related

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

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.

read escaped html attribute as HTML not as string, HTML escaping via JQuery

I've got div on my page with id attribute with escaped HTML for example:
<div class="myDiv" id="<script>alert(1)</script>></div>
Can I with JavaScript and JQuery take the value of this attribute as it is coded? Using just $('.myDiv').attr('id) im just getting <script>alert(1)</script> and I have to know if this HTML has already been escaped :O
Just need to get this attribute in JS as <script>alert(1)</script>
https://i.stack.imgur.com/vXmVK.png
You might consider something safer. You must also wrap it properly. Your example is missing a closing Quote.
<div class="myDiv" id="myDiv-1" data-script="alert(1)"></div>
You could also do it this way.
<div class="myDiv" id="myDiv-1" data-script="<script>alert(1)</script>"></div>
Again this is not good practice. You may want to consider another method.

Javascript debugging: Printing out the element retrieved from a jQuery selector

I want to get an HTML element with a jQuery selector and print out all its contents (either in an alert or console debug). Something like this...
<div class="mydiv">Hello is it me you are looking for?</div>
<script>
alert("But I still haven't found what I am looking for " + $("#mydiv").html());
</script>
I also tried printElement as suggested in this post, but that doesn't seem to work either.
Here is a simple fiddle.
The # is the id selector. You have a class (<div class="mydiv">) so you need to use the class selector .:
alert("But I still haven't found what I am looking for " + $(".mydiv").html());
Wrap the content for which you want to print HTML element.
<div id="myHtml">
<div class="mydiv">Hello is it me you are looking for?</div>
</div>
<script>
alert($("#myHtml").html())
</script>

JSViews visible link with converter doesn't work

I upgraded to the latest version of JsViews and it seems like something broke.
If I have a data-link like "visible{:property}", it works.
If I have a data-link like "visible{convert:property}", it does not work.
From what I can tell it seems like it looks early on in the process for the attr "visible" and changes it to "css-display". When I have a converter, though, in propertyChangeHandler it does this line
attr = linkCtx.attr || attr; // linkCtx.attr may have been set to tag.attr during tag instantiation in renderTag
That causes it to change attr back to "visible", and then in updateContent, the regex test for "css-" fails and it never sets the display property.
Am I missing something? Shouldn't this work?
I created a fiddle that shows what I am trying to do. In the non-working case, instead of setting display:none, it sets visible="false"
http://jsfiddle.net/4scbgjpx/2/
<script id="worksTempl" type="text/x-jsrender">
<div data-link="visible{:show}">
<span data-link="name"></span>
</div>
</script>
<script id="failsTempl" type="text/x-jsrender">
<div data-link="visible{negate:show}">
<span data-link="name"></span>
</div>
</script>
$.views.converters({
"negate": function (val) { return !val; }
});
Yes, you are right - that was a bug. It has been fixed now (commit 58), and your jsfiddle now works correctly.

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/

Categories