I want to ask how I can print a Javascript variable in HTML form (e.g. output it on the screen)?
Here is my JS code:
<script type="text/javascript">
var howLongIsThis = myPlayer.duration();
</script>
This var howLongIsThis = myPlayer.duration(); is Jquery variable!
So how i can show this value in HTML page?
Set it to be the innerHTML or value of a html element:
var howLongIsThis = myPlayer.duration();
var displayEl = document.getElementById("duration");
displayEl.innerHTML = howLongIsThis;
or if you want in in a form field:
displayEl.value = howLongIsThis;
Assuming you have a <div id="example"></div> somewhere in your HTML, you want to run JavaScript after the DOM has loaded which adds the value you want to that div. In jQuery (which you specified in your question you're using), this would simply be:
$('div#example').html(myPlayer.duration());
Here's a fiddle: http://jsfiddle.net/RyanJW/QjXKL/2/
Try this,
your HTML
<input type="text" id="logId" />
<div id="logId1"></div>
js Script
var howLongIsThis = myPlayer.duration();
document.getElementById("logId").value=howLongIsThis;
document.getElementById("logId1").innerHTML=howLongIsThis;
hope this will give you an idea to solve your problem
Related
Maybe this is a naive question but I wonder if there is a way to enter a value in a "text/html" script via another script, something like the following example which, by the way, does not work for me.
<script id="Block" type="text/html">
<input type="text" id="InputID"/>
</script>
<script>
document.getElementById('InputID').value = 'some text';
</script>
Setting the type of a <script> element to text/html is a hack for including some HTML source code in an HTML document without it being rendered so that you can later read the script element and do something with the HTML source code.
const raw_html = document.querySelector("script[type='text/html']").textContent;
This works because normal HTML rules do not apply to a script element, < has no special meaning there (in HTML 4 terms, the script element contains CDATA).
The modern equivalent is the <template> element.
You have no <input> element, so you can't find it in the DOM and you can't set a value to it.
If you want to do that, you first need to add it to the DOM.
const raw_html = document.querySelector("script[type='text/html']").textContent;
const container = document.querySelector("#container");
container.innerHTML = raw_html;
document.getElementById('InputID').value = 'some text';
<script id="Block" type="text/html">
<input type="text" id="InputID"/>
</script>
<div id="container"></div>
In my main HTML file, I create a variable using this script:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//Creation of answerjson not shown
var choiceOne = answerjson[0].choice;
});
Later in my HTML, I create a button within a div using this code:
<div id= "one"><button class="button" id = "b1"></button></div>
How can I display the value of choiceOne as the label on button b1? I've searched online, but only found answers to this problem when the button is not in a div.
var choiceOne = "Some Text";
// jQuery
$("#b1").text(choiceOne);
// Regular JavaScript
document.getElementById("b2").innerHTML = choiceOne;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"><button class="button" id="b1"></button></div>
<div id="two"><button class="button" id="b2"></button></div>
Like this:
$('#b1').html(choiceOne);
but you need to do this in
$(document).ready(function() { });
so you are sure all of the DOM is ready and loaded ... not sooner
Access the button from inside your javascript and change the text on it using the following command:
document.getElementById("b1").innerHTML = choiceOne;
This is in regular JS. You can also use JQuery to select the container.
I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>
you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>
get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()
What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();
You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp
Hi everyone,
here am trying to display the source code of a particular div by onclick
javascript function. But the result am getting is , when i click on the div, am seeing the
whole source code though am trying to make only the particular source code of a div to get
displayed. anyone please highlight me what am doing wrong here..! and what to do to make
it work in the way its expected.
<html>
<head>
<title></title>
<script type="text/javascript">
function viewsource(){
var oldHTML = document.getElementById('para').innerHTML;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('para').innerHTML = newHTML;
}
</script>
</head>
<body>
<p id='para'><strong>This is my <span style="border: 1px solid #ccc;">test text</span> to check if it works</strong></p>
<input type='button' onclick='viewsource()' value='View Source'/>
</body>
</html>
Additional notes:
In the above code, when the button is clicked, the paragraph tag with the id of para will display...but it shows its css too. I want to display only the html tag without the css style attribute.
I don't want the content using innerHTML but i want the whole div including with the div id.(eg.)<div id='softros'><img src='/images/bgrade.jpg' /></div>
have you considered to just use inside your java script handler :
document.getElementById(YOUR_DIV_ID_GOES_HERE).innerHTML
You can get the HTML of the div using .innerHTML or .outerHTML but you need the encode it before you can display it. Otherwise the html gets renderd by the browser. In PHP you could use htmlencode javascript has no function for this but you could use this htmlencode.
I have a variable header_title in java script
<script type="text/javascript">
var dialog_label;
function update_dialog_label(arg){
dialog_label = arg;
}</script>
Now, here is how I want to use dialog_open
<p:dialog widgetVar="nodeDetail" width="520" header="{dialog_label}">
What is the right way to use dialog_label to set header ?
Thanks.
If you prefer to use a javascript var instead bean property:
jsf code:
<p:dialog id="infoDialog" widgetVar="infoDialog" header="Local title" width="400">
something
</p:dialog>
<input type="button" value="showDialog" onclick="showDialog()"></input>
code A:
<script type="text/javascript">
var globalTitle = "Global title";
function showDialog(){
var header = $("#infoDialog".concat("_title"));
header.text(globalTitle);
infoDialog.show();
}
</script>
code B:
<script type="text/javascript">
var globalTitle = "Global title";
function showDialog(){
var header = document.getElementById("infoDialog".concat("_title"));
header.innerHTML = globalTitle;
infoDialog.show();
}
</script>
and the original title is ignored... you can update globalTitle...
I don't believe that you can bind attributes to variables in JavaScript as you have shown. However, if the p:dialog element is like other HTML elements, you may be able to achieve what you want by setting the header directly from JavaScript each time the dialog label is updated. First, give your dialog an ID:
<p:dialog id='dialog' widgetVar="nodeDetail" width="520" header="{dialog_label}">
Now, in your function update_dialog_label(arg), add the following line at the very end:
nodeDetail.header = dialog_label;
Now, every time your update function is called, the dialog header will be updated. Hope that helps.
EDIT: I'm not familiar with PrimeFaces, but I googled this, and it may get on the right path:
http://forum.primefaces.org/viewtopic.php?f=3&t=14538
By inspecting the generated code in the browser, I successfully modified the title of the <p:dialog> with the following javascript:
$('span#infoDialog_title.ui-dialog-title').html(globalTitle);
and to display the dialog :
PF('infoDialog').show();
Hope this helps!