Get usercontrol property value using Javascript - javascript

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.

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

View onclick data via Chrome Extension

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/

Can't pull input-field value located beyond form tag

Problem
I use popup calendar, which is launched via href. I need to pass 'document.tstest.timestamp' (date input field) parameter into javascript function. And all worked well, BUT:
I want to include this tag-file into another form, so I can't use form
<form name="tstest">
in my tag file. As a result, without form I can't find document.timestamp input-field (as I understand due window.object hierarchy)
My tag file:
<form name="tstest">
<input type="Text" id="time_stamp" name="timestamp">
<a href="javascript:show_calendar('document.tstest.timestamp',
document.tstest.timestamp.value);"> showCalendar</a>
</form>
<script>
function show_calendar(target, value) {
............
}
</script>
Help me, please, to find out solution.
Your element has an id attribute on it so you can just use document.getElementById() to get a reference to it. I'd suggest modifying your show_calendar function to either take the id or a reference to the element directly, though, since you'll likely need to reference it again inside of that function.
You should be able to do the following anywhere on the page and get the element:
var elem = document.getElementById("time_stamp");
var myVal = elem.value;
This would work too
<a href="javascript:show_calendar('document.tstest.timestamp',
document.getElementById('time_stamp').value);"> showCalendar</a>
Don't use document.tstest as syntax instead use document.getElementById("time_stamp")
Also remember an id is unique so don't put 2 elements with a same I'd on a same page

How do I fill a javascript editor?

I use TEmbeddedWebBrowser to fill a html form using FillForm method. But my html form contains a fully javascript based editor and i don't know how to fill that.
Something like this :
your comment :
<script type='text/javascript' src='public/scripts/src/editor.js?1'></script>
And the submit btton :
<input type="submit" name="btnSubmit" id="btnSubmit" value="Send" class="btn" onclick="rtevalue("data[body]",437934);" />
The editor itself is a DIV (could be other HTML element) or IFRAME set to contentEditable / designMode = on.
If the element is a DIVyou could use it's InnerHTML property.
For the best results with an IFRAME use the below code:
procedure TForm1.Button1Click(Sender: TObject);
var
editorDoc: OleVariant;
range: OleVariant;
id: OleVariant;
begin
id := 'editor'; // frame ID
editorDoc := (WebBrowser1.Document as IHTMLDocument2).parentWindow.frames.item(id).Document;
range := editorDoc.body.createTextRange();
// range.collapse(false); // if you need to append
range.select();
range.pasteHTML('<b>Boo!</b>');
end;
Notes:
No error checking to simplify the code.
You might also try range.execCommand('inserthtml', false, MyText) (Not tested with TEmbeddedWebBrowser, but had bogus results when I tried it with plain HTML/Javascript on IE).
I have no experience concerning this TEmbeddedWebBrowser tool, but according to your post I'm thinking of a way to retrieve the form's fields. Once you know what fields it contains, I suppose you can fill them as it doesn't seem to be the purpose of your post.
Assuming there is a form declared and it is reachable: you can grab the form and
parse its .elements collection: easily if it's declared in your page
(give it an id attribute, then use a document.getElementById()),
it may still be doable if the form is declared by/inside
editor.js, using document.forms then.
Otherwise: you can get a dump
script from the Net - like this one -
and see what is printed when you call (after including editor.js
naturally) dump(data) or dump(data[body]). As data[] is
used as an argument to the rtevalue() called by your submit button's
onclick, it should contain the form's key/value pairs. The bad thing about this method is that data[] must
be filled by Javascript, so if your form has radio buttons or
checkboxes you may only see the selected ones, which is why I would give a shot at the first option before trying this trick.
About the comments, you should not directly use innerHTML to insert an HTML subtree to the document as most of the times it doesn't work (especially when forms are involved), have an appendChild() redo the work to ensure a correct document, like this:
var dummyContainer=document.createElement("span");
var dummyContainer.innerHTML="..."; //insert stuff here, because it's easy to use ;)
myContainer.innerHTML=""; //clearing your "real" container doesn't add anything to the HTML tree, it'll work - you can also use removeChild() in a loop (but it's not as easy to use!)
myContainer.appendChild(dummyContainer); //appendChild will translate properly the text inserted by innerHTML in dummyContainer into a clean HTML subtree

javascript not getting value of input box

I seem to be having trouble with passing the value of an input box to anything else in my javascript.
It's not producing any errors - and I remember reading somewhere that you can have issues if the document hasn't finished loading - but I'm pretty sure it has!
The code in question is as follows in the javascript:
var address = getElementById(addyInput).value;
document.getElementById('add').innerHTML = address;
And in the HTML
<form>
<input name="addyInput" placeholder="Don't forget postcode!">
</form>
<button id="start" onclick="initialize()">Start!</button>
<p>Address Test
<div id="add"></div>
</p>
I know that the button itself is working as it fires the rest of my code fine without the offending code - however the moment I uncomment that little block at the top, it just does nothing. (no errors etc)
Any help on that one would be hot! Thanks :)
Update:
I now have it working! Thanks muchly for all the help!!
Your form needs to look like this (add an id attribute):
<form>
<input id="addyInput" name="addyInput" placeholder="Don't forget postcode!">
</form>
And the first line of Javascript needs to look like this (since getElementById is expecting an ID rather than a name).
var address = getElementById('addyInput').value;
Additionally, getElementById expects the id argument to be a string (hence the quotes). If you pass it addyInput without quotes, it'll try to interpret addyInput as a variable which has a value of undefined and you won't get back the DOM element you want.
Or, if you were using jQuery, you could leave the form markup as-is and change the Javascript to this:
var address = $('input[name=addyInput]').val();
Make sure to specify and id on the input. You only have a name.
You need to add the id "addyInput" to your form input rather than just the name.
getElementById expects a string.
var address = getElementById('addyInput').value;
If you put this directly into a script section in the head, then you will have a problem because the page is not loaded completely but the code is executed already.
And of course you should define an id for the input element as the others already said.
what you are getting is an array, you need to fetch your array into some readable data. Try something like:
$value = array_shift( $yourarray );
or if it's a multi value array you can just loop it to fetch out the values.

Categories