I want to pull the onclick information from an a tag. I know how to do this normally and I've confirmed it works via the console. However, it returns null when attempted through an extension. Is this possible via an extension and if so: what strange method must be employed?
Example:
On the page: text
I'd like to be able to grab that something(stuff,otherstuff).
However, pure JS didn't work: String(document.getElementsByTagName("a")[10].onclick)
And neither did jQuery: String($(".tableclass").find("tbody").find("a")[10].onclick)
Both of the above working when entered into the console.
First of all, you can never read the onclick property that was set by a page because extension code runs in an isolated scope.
Secondly, even if the code was not isolated, the onclick property of <a onclick="foo"></a> may not have the value foo you are expecting. That is because a property is not the same thing as an HTML attribute.
Therefore, if you want to access the string value of an onclick attribute you can and should use linkElement.getAttribute('onclick'); instead.
Is this what you mean, that you want to change a href of the link? You can do it like this:
html:
<a href='foo' class='link-to-swap'>link</a>
javascript:
$(document).ready(function(){
$('.link-to-swap').click(function(e){
e.preventDefault();
var grabbedData = $(this).attr('data-id')
$(this).attr('href',grabbedData)
return false
})
})
here is the fiddle:
https://jsfiddle.net/cp6x9pf5/1/
Related
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
1: What I want to do is check if a page contains a specific class with a specific string, and if it does, send an event to Google Tag Manager.
2: I also need a macro to check if a certain element exists on a page and if it does, fire the tag above.
What I have been able to get together so far is the supposed tag:
<html>
<head></head>
<body>
...
<a class="myClass">Captured value</a>
...
</body>
</html>
My tag to be fired using JavaScript would look something like this:
<script>
var x = document.getElementsByClassName("myClass")[0].innerHTML;
if (x.match ("Captured value")) {
dataLayer.push({'event':'captured'});
}
</script>
So this tag will fire if it sees the above anchor with that specific class. Using the above code though, I keep getting errors:
Uncaught Type Error: Cannot read property 'innerHTML' of undefined(anonymous function)
#VM490:2InjectedScript._evaluateOn
#VM479:883InjectedScript._evaluateAndWrap
#VM479:816InjectedScript.evaluate
#VM479:682
How would I write a cleaner code to not generate an error if the class doesn't exist?
Regarding number two, how would I write a function with a return statement? I just can't figure this one out. I have tried something along the lines of:
function () {
var t = document.getElementsByClassName("myClass")[0].innerHTML;
var y = dataLayer.push({'event':'trigger'})
if (t.match ("Captured value")) {
return y;
}
I want to use a macro to check if the class exists on a page with the correct value, which in turn I can use as a trigger to fire the first tag. To use macros in GTM, I need to return a value. I just can't figure out how to check for the class value and have my tag fire upon its validation.
Another way to go is of course to write a custom HTML tag to fire on all pages and have the JavaScript look for, validate and send the event. I currently do not possess the JavaScript aptitude to figure out how that would look though.
Any suggestions are highly appreciated.
With your second block of code, I would first make it a self-invoking function
<script>
(function(){
...
}()
</script>
that checkes for the presence of the class in question and also checks for the required text. Use 'indexOf' rather than 'matches' (so you do not need to deal with regex). If those two conditions are true, then push your event to the dataLayer. Fire this tag when event equals gtm.dom, along with any other conditions you think should apply, and that should do it.
Google Tag Manager has a perfectly usable DOM element variable for this. Go to variables (assuming GTM v2), "new", "DOM Element", Selection Method "CSS selector", selector ".myClass" (from your example).
Set up a trigger "page view", trigger type "DOM ready", fire on "yourDOMelement eq. "Captured value".
Unless I misunderstand your needs you should not havbe to write any custom javascript.
My approach was all backwards. I attempted to use a JavaScript solution while I could just use a custom JS inside of Tag Manager to check for a defined value and fire a trigger if it resolved to true.
The methodology I was thinking about was about right I guess, but the way about doing it was over complicating things.
What I did was add a custom JavaScript macro named cjs.return class (using v1 for this said container) and added the following code:
function (){
x = document.getElementsByClassName("myClass")[0].innerHTML;
return x;
}
This function returned either undefined or "Captured value" depending on if it was the right page or not. I then set up a new rule to trigger my tag if:
event equals gtm.dom
cjs.return class equals Captured value
This new rule triggered my tag, which in turn could send the data on the specific set of pages I wanted it to fire on.
Thanks to both Eike and nyuen for answering to give me a clearer picture of what I did wrong.
I have a javascript function:
function foo() { return "/a/b/SomeApi"; }
then I have a href link in my web page. I want this link to point to the value returned by my javascript function, so that when the user clicks the link, it's as if the user had clicked a link with url /a/b/SomeApi.
I tried following:
Click
But the result of this is the browser would open a new window showing the literal value /a/b/SomeApi instead of sending a request to the server.
Any suggestions? Thanks.
Instead of returning the string, set the location of the current page with it, like this...
function foo() { document.location.href = "/a/b/SomeApi"; }
As pointed out by #haim770 - these are not the droids you are looking for.
If you want to specifically set the href attribute, you must do it from outside of the link. Firstly you should give your link an id attribute, such as this...
<a id="myAnchor">Click</a>
This piece of code should then be placed either after the element in the page, or as part of a "document loaded" piece of code.
document.getElementById("myAnchor").href = "/a/b/SomeApi";
If you were using jQuery (which is not in your list of tags) you could do something like this...
$(function(){
$("#myAnchor").attr("href", "/a/b/SomeApi")
});
I don't think HREF was ever meant to be dynamic; for that, just use the onclick property, such as :
Click
I'm trying to initiate a postback invoking the click function of a server-running element, as to run some C# code, in the event of a particular jquery dialog button click.
I am using a modal dialog with buttons as per this jQuery UI example. I have attempted using all of the different answers for javascript/jquery postback invocations in this question.
I've set a couple of breakpoints in my C# code to see if these postbacks are getting called, but nothing is getting hit.
I have this dummy element in my ascx file to use:
<a id="anchorId" runat="server" onclick="return true;" onserverclick="TryLogin"></a>
I've attempted to get this postback to occur a few different ways:
$("#anchorId").click(); //just simply does nothing
document.getElementById("anchorId").click(); //This one gives me a null javascript error
$("document").getElementById("#anchorId").click(); //tells me [object] doesn't have a getElementById
__doPostBack('<%=anchorId.UniqueID %>', '');//Also does nothing in the jQuery code, but works in standard javascript code
Lastly I did try retrieving the unique ID in the code behind as:
string id = anchorId.UniqueID;
and replaced in the javascript this way:
__doPostBack('Softening_Main$anchorId', '');//Still does nothing, and no javascript error
I really need some help here, any ideas?
There are couple of issues in your code.
$("document") will not select document instead will look for document tag element on the page. You should use $(document) removing the quotes.
Also getElementById is a JavaScript method of document object which is used to find element by id. When you use getElementById don't specify # in the id. # is used by jQuyer to differentiate between various selectors.
Remove inline onclick="return true;" from anchor and try this.
$("#anchorId").click(function(e){
__doPostBack('<%=anchorId.UniqueID %>', '');
return false;
});
I have a user control named lets say ucName that has a property named InitialValue.
Everything's fine , Im rendering the control and setting the initial value.
In my aspx page, Im doing like this:
<td>
<tagprefixName:ucName ID="Editor" runat="server" InitialValue="bla bla"/>
</td>
I have a button that will post back the page, but before post backing, im doing:
<asp:Button ID="SaveButton" runat="server" Text="Save" OnClick="SaveRes" OnClientClick="SaveValue()" />.
In javascript function I want to get the value of the initial value of my user control:
I tried many solutions, but they are either returning null or undefined.
function SaveValue() {
var v= $("[id$=Editor]").attr("InitialValue");
var v = $("#Editor").attr("InitialValue");
var v= $("input[id$=Editor]").attr("InitialValue");
var v= $("span[id$=Editor]").attr("InitialValue");//since the uc is rendered as span
}
How can I get the InitalValue of my uc ??
Thanks alot
EDIT
This is my html:
<span id="ctl00_PlaceHolderMain_Editor"><input name="ctl00$PlaceHolderMain$2f1445d6-b13d-4f8f-9497-9c14e5d2b076" type="text" value="fgerf" id="ctl00_PlaceHolderMain_2f1445d6-b13d-4f8f-9497-9c14e5d2b076" /></span>
NB: I tried using .val() .value() but still getting an empty
I'm presuming that the markup gets parsed on the server, and the resulting HTML code does not have this InitialValue property. Try viewing source to see what the actual code is and then paste it into the question.
If all the control does is set the contents of a span, then the following should work:
$("span#Editor").text();
you could retrieve it in the aspx markup page using an expression like this
var initialValue = <%= Editor.InitialValue %>;
The uc is rendered as an input inside a span has the uc's id, so the javascript code will be:
$("span[id$=Editor] input[type=text]").val();
Edit: updated to use object names now that you've included the actual HTML in your page. The only thing I'm still unsure of is whether ctl00_PlaceHolderMain_Editor is the same every time or not. If it's not the same every time, then you need to find a way (server-side) to assign an id that is constant so you have a reliable way to reference the object in the web page.
Adding this code will "save" the initial value to an attribute of the editor object when the page is first loaded.
$(document).ready(function(){
var $editor = $("ctl00_PlaceHolderMain_Editor input");
$editor.attr("data-initialValue", $editor.value());
});
And, then you can read back the initial value anytime later with this code:
$("ctl00_PlaceHolderMain_Editor input").attr("data-initialValue");
If, for any reason this code isn't working, then (in the ready handler), you need to find out whether it's not working because $("ctl00_PlaceHolderMain_Editor input") isn't being found or whether it's because it isn't able to save the data value on the object.