Linking a Jquery/html variable to javascript - javascript

What I'm trying to do, is I have an HTML textbox, that I want to grab what is entered in, and use it as a variable in my javascript file, do I use jquery or is there a way to just access whatever text is entered directly in the javascript code?

In your HTML, give the input element an id like so:
<input type="text" id="myText">
Then in your javascript, to get the value, use:
var text = document.getElementById("myText").value;
This answer uses vanilla JavaScript rather than jQuery.

You can use jQuery for this. You should give an id to your HTML element or you can call it with its type. Create a variable, select the HTML element with jQuery selector and use val() method to grab its value:
var input = $('selector').val() ;
If you decide to use jQuery don't forget to add the jQuery library in your HTML's head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
You can also look at val(), html(), and text() (to set a new value) methods in jQuery web page.

Related

jquery .html() function does not give data attribute set value

i have a piece of js code that takes the html code of an element in order to send it over for saving at the server side. The html itself is dynamically generated and the elements inside it have each a data-target attribute which is also set dynamically. So before sending the string of html to be saved the .html() of jquery is used like:
var SaveString = $('#ElementID').html();
the html I get, does not include the values of the data-target attribute of each child element and instead those appear blank
data-target=""
anyone could have a clue about what's going on there?
This is because when you use the data() method to store information with an element it is stored in an object which jQuery uses internally as a cache. The information is not added to the DOM.
If you want to add the data-* attribute to the DOM, you would need to use attr() to set it, eg:
$element.attr('data-target', 'foo');
It will then be accessible when you retrieve the html() of a parent element.
Example fiddle

Div contents not getting cookie value

I have a div as follows:
<div class="bubbly">
</div>
<script>
$('.bubbly').innerHTML=getCookie('adjective');
</script>
But the content in this div cannot be seen.
If i alert the cookie, i get the value in it.
But the div is not taking the value of cookie.
I want to have the contents of the cookie in this div.
You are mixing what looks like jQuery with plain JavaScript. So either you have to use the .html() method to set the content of the element:
$('.bubbly').html(getCookie('adjective'));
Or you have to get the DOM element out of the jQuery object if you want to use the native innerHTML property:
$('.bubbly')[0].innerHTML = getCookie('adjective');
Try
$('.bubbly').html(getCookie('adjective'));
assuming that your getCookie function works properly. innerHTML is a pure JavaScript thing.
If you want to use native DOM properties in a jquery object then do like this:
$('.bubbly')[0].innerHTML=getCookie('adjective');
You can do the same all in jquery like this:
$('.bubbly').html(getCookie('adjective'));
Also make sure to enclose your DOM manipulating code in a handler for the
DOM ready event, like this:
<div class="bubbly">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.bubbly').html(getCookie('adjective'));
});
</script>

Replace text inside html tag (not between) using JavaScript

I see a lot of reference for replacing text between tags or replacing tags identified with an ID, but my task is quite different in that I need to replace part of the tag itself. For example, I want to change...
<body etc>
So that it becomes...
<body somestring etc>
The change needs to be performed in the browser using JavaScript, ie: after a CMS (like Wordpress) has finished with it.
Looks like you need to add new attribute to DOM element:
document.getElementsByTagName("html")[0].setAttribute("id", "something");
document['getElementsByTagName']('html')[0]['setAttribute']('attr', 'value');
If you are using jQuery you can accomplish this with a line like the following:
$("html").attr({foo:"bar", baz:"bing"});
If you run a wordpress website you might already be using jquery. With JQuery this is something easy
$('html').attr('id', 'bob');
//just for testing
alert($('html').attr('id'));
If you are setting the value of standard attributes, just use DOM properties:
document.getElementsByTagName("html")[0].id = 'foo';
or more simply:
document.documentElement.id = 'foo';
It's not a good idea to set non–standard attributes or properties, use data-* attributes instead.

How do I use jQuery to generate a paragraph with ID 'blurb' in a div?

I have a div element on my web page with ID "map" with a link to Google inside of it.
<div id="map">
Google
</div>
I want to use jQuery to generate a paragraph after the link with an ID of "blurb," so the HTML akin to what the Javascript produces is
<div id="map">
Google
<p id="blurb"></p>
</div>
I have been experimenting with
$('#map').append('p').attr('id', 'blurb');
to no avail.
I am open to a Javascript, but non-jQuery way to do this as well. Thank you!
This should work:
$('#map').append('<p id="blurb"></p>');
Your method was the right general idea, but was just appending the text 'p' rather than the tag <p> and the id wasn't getting set on the right object because of the way jQuery chaining works for .append().
If you wanted to assign the id programmatically for some reason, then it's probably easier to do that this way:
$('<p>').attr('id', 'blurb').appendTo('#map');
First, set up all attributes, then append.
$('<p>').attr('id', 'blurb').appendTo('#map');
Your code doesn't work for two reasons. First of all append can take text and you must distinguish between text and HTML by using a tag (<p>) instead of p. The other reason is that chaining means jQuery's append function will return the jQuery object that it is called on. In this case an object refering to your map element. So when you set the id you were setting the id of the map div, not of your newly create element (assuming the <p> error was fixed). Also you should use prop to set the id instead of attr, but both will probably work for id. Here is some example code:
jQuery:
$('<p>').appendTo('#map').prop('id', 'blurb');
Plain Javascript (Faster, but less legible):
var pel = document.createElement('p');
pel.id = 'blurb';
document.getElementById('map').appendChild(pel);

How to get element from javascript in JSF 2.0

I have JSF code like:
<h:inputText id="from" value="#{fromToMBean.fromName}"/>
I would like to get this element from JavaScript by ID (from), but I can't, because in generated HTML it is j_idt8:from
How can I get this element in e.g. jQuery? Is there any way to force JSF2 not to change ids?
You can either use a custom class which you only assign to this element and use css selectors or assign an id to the form and get the element with the id formid:from.
Is there any way to force JSF2 not to change ids?
You can set prependId="false" This way in generated HTML it will be from in place of j_idt8:from.
prependId : Flag indicating whether or not this form should prepend
its id to its descendent's id during the clientId generation
process. If this flag is not set, the default value is true.
How can I get this element in e.g. jQuery?
You can use ancestorComponent:from in jQuery to get this element.
Actually j_idt8 in j_idt8:from is auto generated id of ancestor component of your <h:inputText/>
for example
<h:form id="form">
<h:inputText id="from" value="#{fromToMBean.fromName}"/>
</h:form>
Now generated id of input text would be form:from
If you don't provide id to a component than your browser generates that dynamically. So don't forget to provide ids to components.
In JSF 1.2 you can use forceId="true". I'm not sure if you can use t:input in JSF 2, but you should be able to. Then it's ID in HTML will be what you expect.
In order to achieve full ID for a component, use EL implicit objects and their properties such as #{cc.clientId} and #{component.clientId}. Source: Acquire full prefix for a component clientId inside naming containers with JSF 2.0.
You can use jquery. Simply, use a selector defining the text it should contains. Something like this:
$( "input[name*='from']" )
'*=' is used to say that the name attribute contains some string. Also there exist '~=' with similar meaning.
For detailed explanations and examples visit http://api.jquery.com/attribute-contains-selector/

Categories

Resources