We Keep Coding

Orbeon JavaScript Embedding: a.querySelector is not a function

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.

jquery attr() not returning expected value

I am using jQuery and would like to retrieve the 'id' attribute
of a clicked element, which in this case is a element.
Kindly check the image below. Notice that the returned string whenever
I use the attr() method in jQuery is somekind of an object (or array perhaps).
The expected value is printed below the next line. It returns the right value when
I use this:
$(this)[0].id
When an element is clicked, Isn't it the element is the one being reference in 'this'?
Why does attr() return an array?

I isolated the code and figured out that the tinymce plugin for jquery is making a conflict. Check out the static.html
https://www.dropbox.com/s/wbk8hxqjw34hzn1/jquery-attr-not-working.7z
Sorry for the archive, Dropbox won't let me upload 9mb and above so I have to compress.

Simple jQuery chain methods throws error

I have a very simple jQuery method chain that is throwing an error. All it's supposed to do is replace the "#" with a new value ("test.html"). I'm doing this because I'm retrieving a value from a database and want to update specific links in the markup. I have verified that the href attribute is, in fact "#". But I'm getting an "Object doesn't support this property or method" error. I'm using jquery-1.7.1.min.js.
Can someone tell me what's wrong with this statement:
$('a#protoPath').attr('href').html('test.html');

.attr('href') returns the current attribute contents, not another jQuery object, so it can't be chained.
You need to use .attr('href', newValue) if you want to actually change it.
If you only want to change the one link that has "#" as its href you need to change your selector, too:
$('a[href="#"]')

You're trying to set HTML content on an element attribute, try instead :
$('a#protoPath').attr('href', 'test.html');

Try this instead:
$('a#protoPath').attr('href', 'test.html');

how to call javascript function from client side on anchor click

I have javascript function sample('textValue') and have to call at server side on anchor click. I tried below code
string text="xyz";
anchor.Attributes.Add("onclick","javascript:sample('"+text+"');
but the value of the text is not assigning correctly. Encoded string gets added. The result in view source looks like
javascript:sample('xyz')
But i need javascript:sample('xyz')

What server/backend language do you use? PHP? Do you use any framework (Zend, CakePHP...)?
On the JS side do something like this:
Option 1
Test
Option 2
Test
<script type="text/javascript">
document.getElementById('clicky-clack-link').onClick = function() {
sample('test');
};
</script>
Note: Also check out jQuery if you haven't.

I wonder if you could just do this:
string text="xyz";
anchor.Attributes.Add("onclick", function(){ sample(text); } );
What does it do? Well, the onclick handler takes a function with no arguments, right? That is, what to do if somebody clicks the link. If you're coding this by hand in HTML, you can use the javascript:a_statement_goes_here to describe the code to run. I expect the browser will just create a function out of that. Since you're assigning this in JavaScript, you have to do that yourself (unless you write out to the document - that might work) and assign the function. But you don't have such a function yet - you have one sample that takes an argument - hence the anonymous function closing the text argument.
This is based on the assumption, that the above is actually client-side code. I'd be very surprised, if JS didn't allow you to assign a function to an attribute. In fact, I think the problem you are running into, is JavaScript trying to be very smart and make sure assigning a string, will stay a string - that is why your ' got encoded.
Have a go, tell me how it went. Ta!

A few questions about JavaScript basics - $, "is not a function"

Being fully self-taught without actually reading up on JavaScript (It's my job now, believe it or not) there are a few things I accept but don't understand.
The first one is the dollar sign.
As far as I use understand it, it's a shortcut to document.getElementById(),
but if I log $ and document.getElementById() to console - Only $ returns a value. This value however is always function(), shouldn't it be. The element? What gives?
The second issue I have is something that keeps coming up in my code and I go out of my way to change the code to eliminate it. It's the "... is not a function" error.
For example:
if ($.inArray($(div_id).val(), arr) >= 0);
Will give the error .val() is not a function. Why? And how do I use the value of div_id to see if it's in array?

Hiya. When you're using Jquery (which I assume you are), then $ will return the jquery object. This can contain an array of matched HTML elements depending on the selector you used. For example $("#foo") will return the jquery object containing the element with id foo. You can get the actual HTML DOM element out using $("#foo")[0] - using the array-style notation.
Can you give us some more info on what you're trying to achieve with the $.inArray example?

$ is a valid variable name.
So if you try to use $ without setting it, it will not work.
A lot of people/frameworks however use $ as a shortcut to document.getElementById, they would declare it at the top of the script as:
function $(id) { return document.getElementById(id); }

$ and document.getElementById is not one of the same thing. $ gives you a function in console only when you are using some library like jquery which mapes $ to a function.
.val id primarly used to get value of the form elements and that is a jquery function. I think you need to learn more around javascript and jQuery

Neither Javascript nor the DOM define $, which (as other answerers said) is often defined in general-purpose DOM libraries like jQuery, Prototype or Mootools. Based on the particular code you included, I suspect you've been coding against the jQuery API (because you use $.inArray, see http://api.jquery.com/jQuery.inArray/; though your claim that $ aliases document.getElementById confuses matters, as jQuery expects CSS selectors rather than element IDs).
When $ is expected but undefined, that usually means you'll need to include the library whose API you're using in the HTML document.