update attribute that is html - javascript

I have a anchor <a></a> with an attribute rel. in the rel value there is html, such as <a rel="html=<div>This is a test</div>. I want to update html inside of rel value, I can update the actual change on the page but if i go to the next slide and come back, its back to what it was before because the rel value is not updated. I am not sure how to go about doing this. Any suggestions, I am using Clearbox by the way.
Example(I know the html is incorrect on here, but it is correct on my page. I just need to know how to update it through jquery or any other way)
<a rel="html=<div class="testclass"> This is a test</div></a>
a piece of the html element (not the a) Needs to be changed to
<a rel="html=<div class="testclass"> No more testing </div></a>

You can (But SHOULDN'T) do that with
this.rel = 'html=<div>But you shouldnt do that</div>';
JSFiddle here

I think you need to avoid the use of double quotes inside another double quotes, if you are using double quotes to wrap a string use single quotes inside that string and vice versa.
See this --> http://jsfiddle.net/Galled/rXKCL/14/

Related

jQuery maphilight set area to alwaysOn by click

I'm using David Lynch's jQuery maphilight (http://davidlynch.org/projects/maphilight/docs/) to highlight image map areas over an image. In particular, this demo (http://davidlynch.org/projects/maphilight/docs/demo_features.html) shows how to set data-maphilight="{'alwaysOn:true'}" so that a given map area is "always on".
I want to set "always on" based on items that are clicked. So I tried this:
$(this).attr('data-maphilight', '{\'alwaysOn\':true}');
Using Firebug, I can see that the attribute is being added to my element when it is clicked, for example:
<area data-county="Susquehanna" href="#" coords="589,62,590,117,518,118,511,62" shape="poly" data-maphilight="{'alwaysOn':true}">
However, the element is not staying highlighted.
If I manually (in the HTML markup) set alwaysOn, like this:
<area shape="poly" coords="447,193,442,225,453,222,467,226,467,235,472,235,475,242,486,242,489,251,448,268,420,276,433,257,434,246,438,235,428,220,433,206,430,194,438,191" href="#" data-county="Northumberland" data-maphilight='{"alwaysOn":true}'>
...it does work. Is this a mixup of the single vs. double quotes? When I use the jQuery "attr" statement, it automatically uses double quotes, so I had to reverse them. OR, is this a problem where just setting that attribute is not causing the jQuery plugin to update?
Would appreciate any advice as I try to modify this script to do what I want.
Thank you!
Is this a mixup of the single vs. double quotes?
When you set the data attribute. jQuery tries to parse the string as a JSON but only if it is a valid JSON. So, data-maphilight='{"alwaysOn":true}' includes a valid JSON while data-maphilight="{'alwaysOn':true}". Note the single quote for delimiting strings produces a wrong JSON.
is this a problem where just setting that attribute is not causing the jQuery plugin to update?
Well, it is different setting the data attribute than setting the data object.
// Changes the data-maphilight attribute to the string '{\'alwaysOn\':true}'
$(this).attr('data-maphilight', '{\'alwaysOn\':true}');
// Sets the internal data object to {'alwaysOn': true}. This is a javascript object, not JSON.
$(this).data('maphilight', {'alwaysOn': true});
So once the object is created, if you want to modify it you need to use .data not .attr.
The problem with changing a property not causing the update is probably because we need a way to notify the plugin a change was happened. I've seen in the sample code you refer that this plugin uses .trigger('alwaysOn.maphilight') to fire this notification. Then, the full change statement should be something like this:
$(this).data('maphilight', {'alwaysOn': true}).trigger('alwaysOn.maphilight');
Note that doing this assignment will replace the current maphilight data object to {'alwaysOn': true} replacing the previous one.

How can an AngularJS html page set a href to use the context path?

I was thinking in a html file to write something like:
<a id="homeId" class="navbar-brand" href="javascript:document.write('${pageContext.request.contextPath}')">Root Page</a>
In the browser what I see as the link is that actual href string not evaluated, ie:
javascript:document.write('${pageContext.request.contextPath}')
You need to use double curly braces around your variable: {{}}
I'm not sure what you're trying to do, but here's a quick example that shows the variable being evaluated:
http://plnkr.co/edit/cUckEApeSLI7t4jGJcw5
Note that it just changes the value to "test".

Trim space inside the anchor tags

My code is here.....
<a target="_blank" href="http://www.home.test.com/test/redirector.jspx? action=ref&cname=test_EDITORIAL&ckey=2448719&cc=US&lc=eng&mcr=true&cmpid=MA43304BL" style="font-weight:bold;text-decoration:none;color:
#0085d5" >download the brochure</a><br><br>
I want in this way
<a target="_blank" href="http://www.home.test.com/test/redirector.jspx?action=ref&cname=test_EDITORIAL&ckey=2448719&cc=US&lc=eng&mcr=true&cmpid=MA43304BL"style="font-weight:bold;text-decoration:none;color:#0085d5" >download the brochure</a><br><br>
i want to remove the space between the anchor tag. As it is generated dynamically in html, I have to pick the whole html and modify it.You can't rely on parent or child elements because it can be with or without anything.I also dont want to use the /n. Is there any way to pick all anchor tags and trim the space between it.
You can use .attr() callback and remove all the spaces using .replace with proper regex:
$('a').attr('href', function (_, val) {
return val.replace(/\s/g, '');
});
Fiddle Demo
The right solution is to fix in your server side to let the output be right, but not using javascript to fix such issue.
I believe you should use some selector for targeting this anchor tag. you can use:
$('a').attr('href',$('a').attr('href').replace(/ /g,''))
Working Demo

Passing apostrophe to javascript function

I am not finding a solution on this one using JavaScript (to utilize localStorage) in a JSP.
Trying to pass something with apostrophe. I have done a .replaceAll() and replaced the ' with ' and it still passes it as an '.
I have also tried a .split("'") and replaced the apostrophe with:
(\' , ' , \', '' , ''' and '\'')
All of these just pass an apostrophe to the function (what I see when I hover over the link) like this:
Save job
With a and b being the two split substrings but with no effect. I do notice that spaces are converted into %20, but that's little comfort. Any other ideas?
Your JSP code is irrelevant. Decide what HTML you want to produce and produce it.
The following are all valid HTML markup:
<a href="saveJob('Bob\'s Question')"> …
<a href="saveJob("Bob&apos;s Question")"> …
<a href="saveJob('He said "Go Away"')"> …
<a href='saveJob("He said \"Go Away\"")"> …
… and the following are invalid:
<a href="saveJob('Bob's Question')"> <!-- JS string ends early -->
<a href="saveJob("Bob's Question")"> <!-- HTML attribute ends early -->
<a href="saveJob('Bob&apos;s Question')"> <!-- JS string ends early -->
<a href="saveJob('He said "Go Away"')"> <!-- HTML attribute ends early -->
You cannot use your HTML attribute delimiter in your attribute value except as an HTML entity. You cannot use your JavaScript string delimiter in your JavaScript string unless you escape it, even if you use an HTML entity to describe it.
In general, you should not be putting JavaScript in your HTML (you should attach event handlers to your markup programmatically, from script), and you especially shouldn't be abusing an HTML anchor as a JavaScript trigger (either use an HTML anchor to a valid URL and let JavaScript hijack the link if enabled, or use a <button> or other element to invoke script-only side effects).
As you've noticed, such manual string escape tasks can be quite tricky; covering apostrophes won't even get you all the way: what if there's a newline in the string? That would break the script as well.
I would recommend converting your data to a JSON object, perhaps using JSON-taglib. This should take care of all required escaping for you.
The Phrogz solution
<a href="saveJob("Bob&apos;s Question")">
works fine if you have only apostrophes in your text.
If your text contains both apostrophes and quotes, you can use a hidden div (div with style='display:none;') for the text, pass the id of the div to saveJob instead of passing the text itself, and get the text inside saveJob by using
document.getElementById(myId).innerHTML

Javascript innerHTML with onclick not working

I have some AJAX, it pulls in the following, which is added to a div using innerHTML.
Add
Then when I press the "Add" link, it will add "TEST" into textareax.
If I have it in the HTML of the document from the start, it works perfectly, but when I pull it in using AJAX and using innerHTML to add it to the div the "Add" link does not work.
I think it might be a problem because it has javascript in it and I am just adding it using innerHTML, but don't know how to solve this.
\r\n is a newline, but is parsed by JavaScript already. The innerHTML will be set to:
<a href="#" onclick="javascript:document.getElementById('textareax').value += '
TEST';">Add</a>
which does not work (a syntax error; JavaScript strings cannot have literal newlines).
You'd need to double-escape with \\r\\n so that it becomes \r\n when it is parsed by JavaScript (\\ becomes \ and the r will be unaffected). Then the \r\n will be kept in the onclick handler, so that the newline is indeed added to the textarea: http://jsfiddle.net/r6bhE/.
onclick="javascript:document[...] is incorrect syntax. The onclick attribute is a javascript event, and doesn't need the javascript scheme indication. You can just place the script directly into the attribute value:
Add
It's also a good idea to return a value when intercepting mouse events (true to pass the event on, false to cancel it).

Categories