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!
Related
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 modify a code like that, for click a checkbox.
Such as,
Is there a any problem about button name or id. I could see just name and class. Is this a problem for work?
<html>
<head>
</head>
<body>
<button>Giris</button>
</body>
<script type="text/javascript">
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
window.onload = function() {
document.getElementById("chkA5").checked = true
});
}
</script>
</html>
I copied all chechbox button properties on web site (F12 + Slect Element + click to check box) and pasted in my script. But I really confused, when I write a code in script, describing works for new things which I add or create. On this web site which I want to click a chechbox on has already buttons and text/check box. How can I create a connect with each other my scrips and web site.
In brief; I couldn't connect my scripts to web site's button and because of that I couldn't do any operation. Am I right?
How can I solve this problem? On picture which I shared, there are some code marked in a red square. This code works for desciribe some element in my scribs?
When we use document.get.ElementById().checked =true, on web site's element properties's has not a id? It has name and class.
Problem 1: getElementById should be getElementByName
Based on your screenshot, the input item you are trying to reference is:
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
and you are trying to getElementById()
document.getElementById("chkA5").checked = true
However, there is no id declared, so you will have to get the item by the name, using getElementByName():
document.getElementsByName("chkA5")[0].checked = true;
Problem 2: Your javascript has errors
This line will cause your script block fail:
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
If you require a complete code sample, here is an example:
<html>
<head>
</head>
<body>
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
</body>
<script>
(function() {
document.getElementsByName("chkA5")[0].checked = true;
})();
</script>
</html>
Note: Make sure that the script block is at the end of your html, like in your example code provided.
I try to get the content of tinymce, like this:
var hallo = tinyMCE.activeEditor.getContent();
alert(hallo);
but every time I get this message:
Uncaught TypeError: Cannot read property 'getContent' of null
I am using tinymce 4.
Thank you
You can get tinyMCE content by calling the the method triggerSave in the following way
tinyMCE.triggerSave();
after declaring this method you can get the contents by selector for example:-
var contents = $("#myTextArea").val();
or
var contents = tinyMCE.get('myTextArea').getContent();
Cannot read property 'getContent' of null often means that TinyMCE is unable to find your textbox which means there is something wrong in the reference to textarea's class.
<form method="post" action="somepage">
<textarea id="myTextArea" class="mceEditor">I should buy a boat. </textarea>
</form>
<button onclick="content()">Get content</button>
Take note of mceEditor class which we will now inform the TinyMCE editor about :
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor" //<<<----
});
</script>
And now simply get the contents of that textbox on the button click.
function content() {
alert(tinyMCE.get('myTextArea').getContent());
}
Here is working DEMO
Further to Shabaz's answer...
For TinyMCE version 4.1.9, I discovered the following:
tinyMCE.get('bobt').getContent(); and tinymce.get('bobt').getContent(); BOTH WORK (that is, uppercase the MCE does not matter)
bobt in my example code is an ID, not a class
The triggerSave() call is unnecessary - all that is important is for the textarea to have an ID, and to use the ID in the get('#YOUR_ID').getContent() call.
Full Example Code (non run-able):
$(function(){
$('button').click(() => {
//tinyMCE.triggerSave();
const out3 = tinyMCE.get('bobt').getContent(); //*MUST* be an ID, not a class
alert(out3);
$('#out').html(out3);
});
});
<textarea id="bobt" class="tinymce"></textarea>
<div id="outx"><button>Get it</button></div>
<div id="out"></div>
I have the href: <a class="like_counter_wrap fl_l" onclick="openFullList();">
I need to hide the function openFullList();. How to do this?
Ok, the code:
<!--Vk.com-->
<div class='scVK scSB'>
<script type='text/javascript' src='http://userapi.com/js/api/openapi.js?49'></script>
<script type='text/javascript'>VK.init({apiId: 2010456, onlyWidgets: true});</script>
<div id='vk_like'></div>
<script type='text/javascript'>
VK.Widgets.Like('vk_like', {type: 'button', height: 20});
</script></div>
is forms <a class="like_counter_wrap fl_l" onclick="openFullList();">. The idea is to prevent function "openFullList();"
JavaScript is client side code, meaning ALL code is viewable by somebody in a browser, as long as they dig deep enough. Sure, you could minify it like tyme suggests, but be aware one can still use a tool like the Chrome web inspector to find the exact line number and snippet of code run for the click event.
Basic answer: if the flow of how your code runs must not be "visible" to the end client, JavaScript is not the language you want to be using.
You can change your markup to this
<a class="like_counter_wrap fl_l">
now you wrap your function in a script tag and place it before the closing tag body (for performance)
<script>
function openFullList(){
//do something
}
var button = document.querySelector(".like_counter_wrap");// document.querySelector("a");
button.addEventListener("click",openFullList,false);
<script>
or put it in a file and bind it to your HTML like this
<script src="script/myscript.js"></script>
Hi what if you do like below,
<a class="like_counter_wrap fl_l" onclick="openFullList(true);">link1</a>
<a class="like_counter_wrap fl_l" onclick="openFullList(false);">link2</a>
then script as follows,
function openFullList(val) {
var showList = val;
if (showList)
{
//allow your function to execute
}
else
return false; //dont allow the function to execute simple by returning false
}
So, If you want to show list if user clicks on the link then pass true while calling the function or else pass false...hope it helps...
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