Orbeon JavaScript Embedding: a.querySelector is not a function - javascript

I ma trying to use the orbeon Javascript embedding API, but for some reason I am not able to get it working. I might be missing something. I a, embedding a form into the page and here is a snippet of how i am trying to do it.
ORBEON.fr.API.embedForm(
'div#orbeon-container',
'/orbeon',
'App1',
'Form1',
'new'
);
I am however getting this error Uncaught TypeError: a.querySelector is not a function.
I think this could be because of how i am specifying the container, but i am not sure how it should be specified as the documentation on embedding doesn't seem to give an example of this.

The docs you linked state the first parameter is of type HTMLElement (which isn't quite the same as the CSS Selector you might use to address it).
Parameter
Optional
Type
Example
Description
container
No
HTML element
DOM element you want the form to be placed in
In other words, instead of
ORBEON.fr.API.embedForm(
'div#orbeon-container',
'/orbeon',
'App1',
'Form1',
'new'
);
it should be
let orbeonContainer = document.querySelector('#orbeon-container');
ORBEON.fr.API.embedForm(
orbeonContainer,
'/orbeon',
'App1',
'Form1',
'new'
);

The likely issue is that the first parameter must be a DOM element, not a string. Try instead passing the element.

Related

Javascript function call in url

I want to login a website with javascript and i dont know it is allowed. I use javascript code in url and it gives me Invalid left-hand side in assignment
at :1:10 error.
javascript:document.getElementById("OtherUsername")="myid";document.getElementById("OtherPassword")="mypassword";$("#btnSend").click();
As Vinod stated, you are trying to assign myid (a string) to document.getElementById("OtherUsername"), an object. That won't work. You need to assign it to document.getElementById("OtherUsername").value
This should work:
javascript:document.getElementById("OtherUsername").value="myid";document.getElementById("OtherPassword").value="mypassword";$("#btnSend").click();
The last bit $("#btnSend").click(); will only work if they have jQuery active on that site, or if you include it through use of a plugin somehow.
you can not Assign a value to a dom element
if OtherUsername element and OtherPassword element is a form you can follow my code
document.getElementById("OtherUsername").value="myid";
document.getElementById("OtherPassword").value="mypassword";
$("#btnSend").submit(); //btnSend should be the from id

Why specify [0] when using new FormData()?

I've just spent a good few minutes debugging why new FormData($("#ImageEditorForm")); isn't working. After turning to Stack Overflow, I found a suggestion in another thread to use new FormData($("#ImageEditorForm")[0]); instead.
I made the change, not expecting anything to happen. Instead, the code now works perfectly and as expected. Previously, nothing was being submitted to the server. Now, form data and files appear as expected.
My question is why is the "[0]" required? There is only one element with that ID in the DOM. Selecting by ID should surely return only one element? What is going on here?
$("#ImageEditorForm") returns a jQuery object and FormData requires a DOM Node.
You can use document.getElementById(id); which returns a DOM Node.
FormData(document.getElementById("ImageEditorForm"));
Or use document.querySelector(selector); which takes a css selector and returns the node if found and null otherwise.
When selecting with jQuery, the returned object is a jQuery object, and to get the actual DOM-node this represents, you use [0] on the jQuery object.
If you had used a selector which returned a couple of results, it would be easier to understand why you would need to index into the object to get to the actual DOM-node, but this is standard jQuery.
And as andlrc said, you need to pass an actual DOM-node to the FormData function.

appendChild method not working

Actually, it seems to work in JSFiddle without much problem.
https://jsfiddle.net/3zjqwbgy/5/
However, when I try to run it locally using Notepad++, I get the following error:
Cannot read property 'appendChild' of null
What could be the reason for this? How can I make it work locally?
Make sure you have the HTML available when you run the appendChild method.
That means you'll wrap everything into an load handler:
window.addEventListener("load", function () {
/* your actual code */
...
showElmntProperty("myDeck", "cardName", "first");
});
It's working in JSFiddle because JSFiddle is doing that for you automagically (by default)–you can change it, though:
Since your code works on JSFiddle, the only thing I can think of off the top of my head is you've misplaced your <script></script> tags. Try moving them down below the Table, so that they can be "seen" by JavaScript.
Whenever you get a "Cannot read property "some property name" of null, it simply means that the object that you are calling the method on doesn't actually refer to the object you think it is - it's not pointing to any object at all.
Now, in your code, you didn't say where (exactly) you are getting the error, but take these two lines:
node.appendChild(textnode);
document.getElementById(id).appendChild(node);
If you are getting the error on the first line, then the node variable does not, in fact, refer to anything. If it's the second line you are getting the error on, then document.getElementById(id) isn't returning an actual object, in which case, you'd need to check to see that the id variable you are using there actually matches an id of an HTML element.
And, of course, knowing when your code runs is vital. It may be that:
document.getElementById(id)
Is attempting to locate an element before that element has been parsed into the DOM.

Uncaught TypeError: t.querySelectorAll is not a function when initialiazing Embedded Tweets

I'm using the Embedded Tweets API from Twitter.
Everything works great if I have the html markdown from page load.
It also works great if I use the option to add content later, and load the tweets by ID:
twttr.widgets.load(
document.getElementById("container")
);
This is in the documentation here: https://dev.twitter.com/web/javascript/initialization#init
But If I try to load the tweets by class name with this:
twttr.widgets.load(
document.getElementsByClassName("containers")
);
I'm getting this error inside Twitter's widget.js:
Uncaught TypeError: t.querySelectorAll is not a function
If I log the group of elements to the console, I have a proper group:
Am I doing something wrong or is this a bug on Twitter's widget?
Thanks!
EDIT:
As of July 28th 2015, the getElementsByClassName example has been removed from Twitter's documentation thanks to another post I made on the Twitter Dev Forums
The problem may come from the fact that document.getElementsByClassName returns a NodeList type which is not real javascript Array object. On the other hand, widgets.load expects either a single element or an Array of elements. This leads nodeList to be treated as a single element and the library tries to call querySelectorAll on it which is not available for NodeList types.
A solution would be to convert that nodeList to a real array when passing it to widgets.load.
One way:
twttr.widgets.load(
Array.prototype.slice.call(document.getElementsByClassName("containers"))
);
This works, because a NodeList has a length property and is indexable.
According to twitter's documentation, load() accepts either no param or a single element.
Called without argument, widgets-js will search the entire document.body DOM tree for uninitialized widgets. For better performance, pass an HTMLElement object to restrict the search only to children of the element.
Since getElementsByClassName returns an HTMLCollection, you can't pass that directly. Instead you could pass the first element in the collection like this
twttr.widgets.load(
document.getElementsByClassName("containers")[0];
);

Control references in jQuery

function eegetdropdownvalue_str(ctl){return ctl.selectedIndex>=0&&ctl[ctl.selectedIndex]?ctl[ctl.selectedIndex].value:''}
The above function is called with
co.p1A10=eegetdropdownvalue_str(document.formc.p1A10);
I want to switch the call over to jQuery to drop the document.form reference however doing this
co.p1A10=eegetdropdownvalue_str($('p1A10'));
Does not reference the control correctly - How should I do this?
There's two things wrong with your code.
First, $('p1A10') references nothing.
jQuery selectors work almost identically (if not completely identically) to the way css works.
So, just ask yourself how you would reference the object(s) in question in CSS and you're half way there.
I'm assuming that p1A10 is the name or id of an object. Since we're using CSS/jQuery syntax, this should be an id, although you can select by other attributes such as $("select[name='p1A10']") .
To reference an object by ID we use the # character (again, just like in CSS). So we can select your node via $('#p1A10').
The second problem is that your function is expecting a DOM object not a jQuery object. To keep your code intact, we need to say $('#p1A10')[0] where 0 is the first element within the collection of jQuery elements.
I've provided two examples to explain this a little better. One uses your existing infrastructure and one replaces it.
http://jsfiddle.net/TD6Uu/5/
Hope it helps.
Given a form with id formc and a select with name p1A10 you could e.g. use:
o.p1A10 = eegetdropdownvalue_str($('#formc select[name="p1A10"]').get(0));
If this doesn't do it, please provide use with the exact HTML structure

Categories