jQuery maphilight set area to alwaysOn by click - javascript

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.

Related

Change Spotfire Document Properties value using javascript

I want to Change the value assigned to a Document Property in spot fire. Lets say i have created a new document property called "Test1" as a string and assign it a value "a". Is there are way to change this value using Javascript every time i load the spotfire dashboard ?
I'm unaware of a way to use JavaScript for this, but you can assign a string document property via custom expression (if it's a List Box) or run an IronPython script each time the value changes. So, you could set the expression to the current date, datetimenow() and then every time it's loaded the IronPython script would fire. However, I don't see why you'd need the property control for this.
I suppose it really depends on what you want the document property to be set to. Is it data from your tables? Output from complex code? These are all things to consider.
1) Create an input type property control using the Document Property you want to change.
2) Edit Html to assign parent element an id say "testInput". And add the script as shown below in the Edit HTML window.
<span id="testInput"><SpotfireControl id="7db34e6c423240f59fc99e6b80fa23ec" /></span>
<script>
$("#testInput input").val("after");
$("#testInput input").focus();
$("#testInput input").blur();
</script>
3) This script will change the document property value to "after" whenever you open a file.
As you comment seemed to suggest, something you can do is write this code in Python and attach the script to an action control, e.i. a Link or a Button. Something simple like: Document.Properties["Test1"] = newValue
or even: Document.Properties[changingProperty] = newValue
allowing the code to be more reusable.
Then you insert Javascript into the Text Area as well to the effect of: $("#VeryLongSpotfireControlID").click();
Which should simulate clicking on action control, which in turn triggers the Python script to update the value. Just be careful not to use this approach when it would result in reloading the text area HTML, as this will re-trigger the Javascript, thus creating an endless loop.
I believe I have found a possible solution/work-around for the issue, entirely based on pure JavaScript (since TIBCO removed jQuery starting from Spotfire X). The solution is to force a simulated Enter Keystroke while focusing the input box to trigger updating the Document Property. (No data function and R needed)
HTML (SpotfireControl Element is an single line input-box for a Doc. Prop.):
<div id="container"><SpotfireControl id="b8534f13dc62416db6d4eaab16030f5e" /></div>
JS (focus and blur might no longer be needed for this solution, but I'm still keeping them just in case):
const inputConfirmationEvent = new KeyboardEvent("keypress", {
    keyCode: 13,
    bubbles: true,
    cancelable: false
});
var elem = document.querySelector("#container input");
elem.value = "stringValue";
elem.blur();
elem.focus();
document.querySelector("#container input").dispatchEvent(inputConfirmationEvent);
Hope it helps someone.
Best,
Aaron

update attribute that is html

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/

Jquery extension BeautyTips doesn't work with dynamic ajaxPath option

I'm using the BeautyTips jQuery extension, but I'm not having any luck passing dynamic URLs as the ajaxPath. In the documentation, they suggest:
$('#example18').bt({
ajaxPath: ["$(this).attr('href')", 'div#content']
});
I have
$( '.username' ).bt({
ajaxPath: ["$(this).attr('title')"]
});
However, when I hover over the username element, instead of bringing up the URL stored in the title attribute within the Beautytip, it attempts to send the whole browser to another page (or refresh; it's hard to tell because the browser address doesn't change, but the page goes blank, and a View Source shows an entirely different page.)
I have verified that the title in the element in question is correct and is being addressed correctly. If I statically pass the path, it works, but I'd rather not write a new version of this function for every item on the page that needs a Beautytip.
Is there a syntax issue here? Any help would be much appreciated.
My HTML is like:
<span class="username" title="http://degree3.com/popup/baloon/member-summary?id=53">Username</span>
Okay, I had to dig through the extension, but I figured this one out.
The plugin author (for reasons I did not spend the time to decipher) kills the "title" attribute of the element that BeautyTips operates on and moves its value to an attribute called "bt-xtitle" instead. I guess this is why his sample used the "href" attribute instead of the title attribute, and it was my dumb luck to attempt this maneuver on the wrong attribute.
Anyway, this works:
$( '.username' ).bt({
ajaxPath: ["$(this).attr('bt-xtitle')"]
});

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).

How to add an HTML attribute with jQuery

Well, I have this jQuery image slideshow that uses the attribute "control" inside an <a>. Seeing how it didn't validate I searched for a way to add this attribute inside my HMTL via jQuery but I didn't really find anything relevant. Now I don't really care about how valid my page is, but I'm really curious in how to add an HTML attribute inside an HTML tag.
In case I wasn't clear enough with my explanation, I have this code:
<a id="previous" control="-6" href="#"></a>
And I want to add control="-6" with jQuery.
Use jQuery's attr function
$("#previous").attr("control", "-6");
An example
// Try to retrieve the control attribute
// returns undefined because the attribute doesn't exists
$("#previous").attr("control");
// Set the control attribute
$("#previous").attr("control", "-6");
// Retrieve the control attribute (-6)
$("#previous").attr("control");
See this example on jsFiddle
You can alternatively use data function to store values on elements. Works the same way, for example:
$("#previous").data("control"); // undefined
$("#previous").data("control", "-6"); // set the element data
$("#previous").data("control"); // retrieve -6
Using data you can store more complex values like objects
$("#previos").data("control", { value: -6 });
($("#previos").data("control")).value; // -6
See a data example on jsFiddle
Since the jQuery version has been well covered here, I thought I'd offer something different, so here a native DOM API alternative:
document.getElementById('previous').setAttribute('control','-6');
Yes, I know you asked for jQuery. Never hurts to know the native way too. :o)
Let me see if I understood you.
You have, for example, the code:
<a id="previous" href="#"></a>
And by jQuery you want it to be:
<a id="previous" control="-6" href="#"></a>
Is it right?
If it is. You just have to do:
$('#previous').attr('control', -6);
If an attribute doesn't exists it's created by jQuery.
So, to remove it you can do:
$('#previous').removeAttr('control');
What you're doing doesn't respect the html rules and everything else, but it works fine, a lot of plugins do the same. ;D
I hope this could be helpful!
See you!
Try this:
$('#previous').attr('control', '-6');
Why? the $.attr(); function of jQuery allows you to add, get or update attributes (class, id, href, link, src, control and everything else!).
$("#previous").attr("control", "-6");
HTML:
<a id="previous" href="#">...</a>
jQuery:
$('#previous').attr('control', '-6');
jQuery's attr will do that. Example:
$("#previous").attr("control", "-6");
Also check out this example at http://jsfiddle.net/grfSN/.

Categories