How to activate the onchange function with JavaScript? - javascript

I am developing a Java Web Application with JSF 2.2. I am combining another frontend tecnologies, however my specific problem is easily to explain with the next code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba</title>
</head>
<body>
<input id="test" value="Initial value" onchange="alert('I changed my value')"/>
<button onclick="updateTest()">Cambiar el valor</button>
<script type="text/javascript">
function updateTest() {
document.getElementById("test").value = "|" + document.getElementById("test").value;
}
</script>
</body>
</html>
When the user modify the input value, the browser show the alert message, but when the user clicked on the button the browser not detect input value was to changed and I need when the user clicked on the button, the input changes its value and the browser launch the alert message.
Why I need this crazy process? Because I would like to use another JavaScript frameworks that modify the front-end of different way that JSF. I have a modal to change a input value with the javascript framework code pure and I would like when this value to changed, also JSF detects the new input value.
Thank you very much!

You can assign an input event listener, see the following code snippet for a basic example that should get you there.
Edit: This has been updated to show you can trigger the oninput event listener even in the even that you programmatically change the value.
document.querySelector('#test').oninput = function() {
console.log(this.value);
}
// Modal code
{
document.querySelector('#test').value = 'new value';
document.querySelector('#test').oninput();
}
<input id="test" type="text" />

Related

Make a Popup/Alert Window in a html with a "dont show again" option

I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>

Document.write on a different html page

Hmm is it possible to document.write on other html page?
For example I create a two html page, the first page have a textfield and submit button. I enter a text in a textfield and after I click the submit button the value of the textfield will be transfer to the second html page and load the html page and write the value on it.
Just a beginner to javascript so bear with me please :D
You can do this by using Query String.
window.location = "Pass.aspx?variabletopass=test";
Use this line of where you are trying to redirect your page,and value of your textfield in query string.
Since you're using pure javascript and HTML, I assume server-side things are out of the picture. So Felix Kling's comment is actually, I think, a good way to go. Here's one way you could use localStorage to make this work:
/* index.html */
<form action="result.html" onsubmit="submit()">
<input type="text" id="input">
<input type="submit" value="Submit">
</form>
<script>
function submit() {
var input = document.getElementById("input").value;
localStorage.input = input;
}
</script>
/* result.html */
<div id="result"></div>
<script>
document.getElementById("result").innerHTML = localStorage.input;
</script>
Without using php you can document.write() submitted text on other html file as follows.
<html>
<script>
var a = document.location.toString();
var b = a.slice(a.indexOf("?")+1,a.length);
var c = b.split("&");
for(i=0;i<c.length;i++){
document.write(c[i]);
}
</script>
</html>
If you are working on Single page Application you can quite easily achieve this, by just storing the value in correct scope.
If you are on multiple page application you can achieve this by any of the following ways:
sending parameter in url
storing value in localStorage/sessionStorage
storing it in cookie(Not recommended)
sending it to server in forms param(Not recommended)

Open Google page in Javascript

I have the following code to open a google page and type "Hello" in the textbox.
The code opens the page but the textbox is empty.
Does anyone have an idea please ?
Thanks.
<html>
<head>
<script type="text/javascript">
function getValue()
{
var myWindow = window.open("http://www.google.com","_self")
myWindow.title = "Test"
var TextBox = myWindow.document.getElementsByName("lst-ib");
TextBox[0].value="Hello"
}
</script>
</head>
<body>
<form>
<input name="to" type="hidden" value="hoolah" />
<input type="button" onclick="getValue()" value="Get Value!" />
<form/>
</body>
</html>
You cannot:
Access the DOM of a page on a different origin
Access the DOM of a page from JavaScript that was running in the same window before you loaded the new page
What you want is impossible.
(If it was possible, it would be a security problem as your JavaScript would have access to personal data belonging to your visitors and stored on other websites.)
If I understand the question - you want to be able to pass a value to a Google search from your page. Rather than accessing the DOM of an external page - you are just trying to enter a value into the search term box on the google page.
All you have to do is append a query string to the Google url (such as "http://www.google.com?query=searchTerm" and it will pass the value to the search box on the google page.
I have slightly modified your code to show this - not how i would normally do it but I wanted to keep your code in place as much as possible so you can see whats going on.
I added a search term input and the onclick event opens the window and submits the query to Google. It could have been done as a form submit as well. Note that I put the JS at the bottom of the page - increases speed of page rendering - not important for this, but good practise movingforward. I also declared the variables together instead of using 2 'var's as well.
your code (slightly modified).
<html>
<head>
</head>
<body>
<form>
<input id="searchTerm" type="text" value="" placeholder="Search term"/>
<button type="button" onclick="getValue()">Search</button>
</form>
<script>
function getValue()
{
var term,myWindow;
term=document.getElementById('searchTerm').value;
myWindow = window.open("http://www.google.com?query="+term,"_self")
}
</script>
</body>
</html>

Javascript form.submit() works only when debugging

I have a weird problem when I try to submit a form. My page contains a html table and one column has a link that deletes the line from the DB calling a js function.
The html/php line is the following one:
<input type="hidden" name="deleteid" value=0>
print ", delete";
The javascript function is the following one:
function delete_line(team_id) {
if (confirm('<?php echo $txt_confirm_del_team;?>')){
document.formName.elements.deleteid.value = team_id;
document.formName.submit();
}
}
If I put a breakpoint on the line "document.formName.submit();", the called page can read the parameter "deletedid". If not, the parameters are not passed to the page called by the submit.
Btw, I have another issue if I use getElementById() to retrieve the element or the form in the javascript function: it says the getelementbyid is null (and it's not because I can retreive it using the syntax document.formName.elements.deleteid)
thanks
There may be some other event handlers there, you can open the page in Chrome and right click the anchor, then choose "inspect element" and then check out the event handlers in the "event listeners" tab.
As far as the code you posted; there is nothing wrong with it. The following works just fine for me:
<html>
<head>
<title>test</title>
</head>
<body>
<a onclick="javascript:delete_line(22);">delete</a>
<script>
function delete_line(nr){
console.log(nr);
}
</script>
</body>
</html>

making a div tag dynamic

I am working on a module of the project and I seemed to have stuck up. Tell me explain me what I am trying to do.
I have a text box where the user of my web portal will post the facebook like box code, either a fbml code or xfml code.As soon as the user clicks the submit buttton he should be able to see that like box on my site.
But whats happening right now with me is that I am not able to see the like box .
I have put upon the code below,
<!DOCTYPE HTML>
<head>
</title> Facebook like widget </title>
<script type="text/javascript"/>
function display_fb()
{
var fburl= document.getElementById('fb_link').value;
document.write(fburl);
}
</script>
</head>
<body>
<h1>IF YOU HAVE ANY FACEBOOK FAN PASTE THE LINK HERE!!!</h1>
<label> Paste the link here<input type="text" id="fb_link"/> </label>
<input type="button" value="submit" onClick="display_fb();" />
<div id="userFBLink" >
<label>Wanted is here:</label>
</div>
</body>
</html>
I guess need to refresh the div tag once the user puts his facebook like box code.
I believe I didn't understand you wrong and you want to add the text of this input into that div as a label (I'll suggest you to use "span" instead, because "label" is for labeling form fields).
It seems that you are looking for that:
function display_fb()
{
var fburl= document.getElementById("fb_link").value;
var lblLink = document.createElement("span");
lblLink.appendChild(document.createTextNode(fbUrl));
document.getElementById("userFBLink").appendChild(lblLink);
}
Or with jQuery:
function display_fb()
{
var lblLink = $("<span></span>");
lblLink.append($("input#fb_link").val());
$("div#userFBLink").append(lblLink);
}
It's up to you!

Categories