How do I fill a javascript editor? - javascript

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

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

Looking for custom script (capturing inner HTML using jQuery) in Adobe DTM data element?

I am trying to capture HTML text value using jQuery in custom script of DTM data element.
See the scenario:
Below is the snippet of code on the page:
<div class="site-categories">
<ul>
<li class="mobile-tablets main">
Mobiles & Tablets
Computers
Electronics
and so on.
So basically the ask is to capture the inner HTML text of anchor tag i.e. 'Mobiles & Tablets' or 'Computers' or 'Electronics', depending upon on what link, user clicks.
To achieve this, in the event based rule section, I have set Condition as the tag to fire when class (under div tag) equals 'site-categories' and enabled bubbling on child elements (so as to cover everything under this to fire omniture tag). And then assigning the value of data element in any evar variable.
In the data element section, after selecting the custom script option, I am writing this code:
var value = $('this').html();
return value;
or
var value = jQuery('this').html();
return value;
But this is not working. I even tried using this:
var value;
_satellite.setVar('value', jQuery('this').html());
return value;
But this also didn't worked. Can I have a solution for this ? I want this to be dynamic as in, depending upon which section user is clicking on the page, the data element should capture the inner HTML text of that particular anchor tag.
Not sure where I am going wrong.
If there is any other solution that exist for this, please let me know. That would be a great help.
Thanks in advance,
Adi
Couple of notes:
Firstly on a sidenote, in your jQuery code, this should not be wrapped in quotes. You should be passing an object reference to the jQuery wrapper. Wrapping it in quotes makes it look for an html element called "this" (e.g. <this>foobar</this>) which is not right.
As to your issue.. not sure how you have setup your rule but basically what you want to do is grab the value and put it into a data element, and then reference the data element when you set the Adobe Analytics variable. So it looks like you were on the right track, and BrettAHale's answer is on the right track too, but to put it all together:
In your rule, add a condition with criteria Data > Custom. Then click "add criteria" and in the codebox, enter in:
_satellite.setVar('linkText', jQuery(this).text());
return true;
This will set a data element named "linkText", and you return true to make sure the condition is always true. You can use "value" as the name but you should use something more descriptive so you can more easily remember it's purpose later (I used "linkText").
Then, in your Adobe Analytics section of the rule, go to the eVars section and select the eVar you want to set. Then for the "set as" value, enter in %linkText%. This is a reference to the data element you just set in the rule. Don't worry if DTM shows a tooltip saying not found or w/e; it only shows/searches for known data elements you set in the interface, not on-the-fly in rules. Click the "save evar" button and you should see e.g. eVar3="%linkText%" listed (but for whatever eVar you chose).
Save and then test/publish the rule.
In the analytics tool section or your rule, set the eVar using the following, not a data element.
%this.text%
Your evar box will show something like this. eVarX="%this.text%"

Creating an ID for a Form Variable (or Changing it) Using Javascript or JQuery

I am receiving an XML data form result and using the Strophe library to convert it into html.
This gives me a chunk of HTML (form) as a variable, which I can then append to a page:
var iqHtml = iqForm.toHTML();
$("#form-result-div").append(iqHtml);
The issue is that the form which it attaches has no id, action, or anything to identify it:
<form data-type="result">
...
I have two possibilities here.
Option 1. (preferred method)
Is it possible to change the variable iqHtml, which is just raw HTML, and an ID to it? Ideally this would be done before it is appended to the page.
I've tried multiple ways to find the form tag and add the attribute using .find() and .attr() but with no success.
Option 2. (less preferable)
I can edit the library to add a random ID (say id="some-id") which I will then need to EDIT rather than creating new.
This editing will have the questions as Option 1 - how do I search the variable and then change the form's ID.
Thank you.
Kind Regards,
Gary Shergill
You could assign an id before appending it
$(iqHtml).attr('id', 'someid').appendTo("#form-result-div");
Edited: id needs to be in ''
This should work:
var iqHtml = "<form><input type='text' /></form>";
$("#form-result-div").append(iqHtml).find("form").attr("id", "myForm");
Demo: http://jsfiddle.net/AA8Cf/
You can also play with one of the child selectors to pick up a specific one, if there is more than one form.
http://api.jquery.com/category/selectors/child-filter-selectors/

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.

How do I use JavaScript to grow an HTML form?

I'm creating a simple web application with which a user may author a message with attached files.
multiple html file inputs with javascript link http://img38.imageshack.us/img38/4474/attachments.gif
That "attach additional files" link does not yet work. It should add an additional file input control to the form each time it's clicked.
I need a JavaScript method addanotherfileinput() to replace the clicked anchor:
attach additional files
With this new table row, file input, and anchor:
<input type="file" name="Attachment1" id="Attachment1" class="textinput" />
</td>
</tr>
<tr>
<td></td>
<td>
attach additional files
And also increment the number: Attachment2, Attachment3, Attachment4, etc.
How can I do this?
You could use the DOM to dynamically insert the file inputs
var myTd = /* Get the td from the dom */
var myFile = document.createElement('INPUT');
myFile.type = 'file'
myFile.name = 'files' + i; // i is a var stored somewhere
i++;
myTd.appendChild(myFile);
OR you can use this
http://developer.yahoo.com/yui/examples/uploader/uploader-simple-button.html
You probably don't want to replace the anchor, just insert something in front of it.
I use Prototype for things like this, because it irons out a lot of browser inconsistencies, particularly around forms and tables.
Using Prototype, it would look something like this:
function insertFileField(element, index) {
element.insert({
before: "<input type='file' name='Attachment" + index + " class='textinput'>"
});
}
// And where you're hooking up your `a` element (`onclick` is very outdated,
// best to use unubtrustive JavaScript)
$('attachlink').observe('click', function(event) {
event.stop();
insertFileField(this, this.up('form').select('input[type=file]').length + 1);
});
...the bit at the end finds the form containing the link, finds out how many inputs of type file there are, and adds one for the index.
There are other ways as well, via the Element constructor provided by Prototype, but text works quite well (in fact, it's usually much faster).
It would be similar, though slightly different, with jQuery, MooTools, YUI, Glow, or any of the several other JavaScript frameworks.
There might be a better way, but I did this client side by creating a set of HTML form elements and then hiding/showing the rows using JavaScript to update the CSS class.
EDIT: I'll leave this here as an alternate method but I like the idea of adding INPUT elements through the DOM better.

Categories