I have a main jsp page in which alert functionality is modified using
window.alert=function(txt)
In other jsp pages are loaded in the same document using iframe. parent.alert is used in most of these pages to keep consistency.
This is a piece of code I am working with:
<div onkeypress="handlekey()">
<button id='done' onclick="example()" >submit</button>
</div>
Script portion is as following:
<script>
function handlekey(){
if ((window.event) && (window.event.keyCode == 13))
{
// click the search button
done.click();
}
}
function example(){
parent.alert('Done');
}
</script>
Alert is not fired if I press an enter key but get fired when I click on the button.
Alert also gets fired when I replace parent.alert with alert.
This works fine for me:
index.html
<html>
<head>
<script>
window.alert = function(){
console.log('My alert');
}
</script>
</head>
<body>
<iframe src="iframe.html" id="myIframe"/>
</body>
</html>
iframe.html
<html>
<head>
<script>
function handleEvent() {
if ((window.event) && ((window.event.keyCode == 13) || window.event.type == 'click')) {
example();
}
}
function example(){
parent.alert();
}
</script>
</head>
<body>
<div onkeypress="handleEvent()">
<button id='done' onclick="handleEvent()" >submit</button>
</div>
</body>
</html>
Related
i have smth like following code:
<html>
<head>
</head>
<body>
<button id="test1" onclick="OnSave()">Save</button>
</body>
<script>
function OnSave() {
if ($("#test2").length)
{
alert("i see iframe");
}
else
{
//some code that will call Iframe via ajax
}
}
</script>
</html>
When i click this button iframe have added:
<html>
<head>
</head>
<body>
<button id="test1" onclick="OnSave()">Save</button>
<iframe id="test2" src="smth">//button inside that will fire OnSave event</iframe>
</body>
<script>
function OnSave() {
if ($("#test2").length)
{
alert("i see iframe");
}
else
{
//some code that will call Iframe via ajax
}
}
</script>
</html>
So, when i click button that will call OnSave function from iframe,jquery didn't see my iframe or smth inside it.How should i call check if iframe exist?
You're not calling the OnSave function like that.. try to do this instead
<button id="test1" onclick="OnSave()">Save</button>
(Note the parenthesis after the function name)
Edit: Ok, so you may want to get back to parent window before calling the function
window.parent.functionName();
I am trying to create a program that generates random functions then shows them in LaTeX but I can't figure out how to edit LaTeX when a button is pressed.
This code works:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<script>
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
</script>
</body>
</html>
But this does not:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<button onclick="change();">Change the LaTeX</button>
<script>
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
}
</script>
</body>
</html>
I tried to use MathJax like this:
<html>
<body>
<button onclick='change();'>Change the LaTeX</button>
<div lang='latex' id='Latexdiv'></div>
<script type='text/javascript'>
var latexdiv = document.getElementById('Latexdiv');
function change()
{
var latex = document.createElement('script');
latex.src = 'http://latex.codecogs.com/latexit.js';
document.head.appendChild(latex);
var mathjax = document.createElement('script');
mathjax.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
document.head.appendChild(mathjax);
latexdiv.innerHTML = '\\(sin(x)\\)';
};
</script>
</body>
</html>
This, unfortunately, only works the first time you press the button. If you press it twice, it just shows "\(sin(x)\)" in regular HTML. How would you get it to work twice?
http://latex.codecogs.com/latexit.js executes at the end:
LatexIT.add('*');
That adds and onload listener that executes a render function, that's why works in the first case, the page ends loading after your first script.
You could simply add the render function in your change function.
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
LatexIT.render('*',false);
}
Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>
Here is the javascript code.
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if(filmName == "parker")
window.location.assign("http://www.google.com");
else
alert("hello");
}
</script>
If I enter any other string I get an "hello" alert and If I enter "parker" the page "http://www.google.com" wont get loaded. Why is this happening?
EDIT:
Ok as someone mentioned I did remove "http://www.google.com" and added "http://stackoverflow.com" but it did not resolve my problem. And I cant even load local html pages that are in the same directory
if(filmName == "parker")
window.location.assign("index.html"); // also "./index.html" or ./index/html
Even this is not working. What's wrong
I also have jquery libraries: that is Jquery UI and Jquery
This question needs more of info I think. Here are the final edits
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Other style and js libraries, including Jquery Ui and regular jquery -->
<script>
$(document).ready(function() {
$(".youtube").fancybox();
}); // end ready
</script>
<script>
$(document).ready(function(e) {
$('.tooltip').hide();
$('.trigger').mouseover(function() {
/* Rest of it, which is not necessary here */
</script>
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName); // for debugging
if(filmName == "parker")
window.location.assign("index.html");
else
alert("hello");
}
</script>
</head>
<body>
<div id='mysearch-box'>
<form id='mysearch-form'>
<input id='mysearch-text' placeholder='' type='text'/><!-- Input here guys -->
<button class = "none" id='mysearch-button' onclick = "myfunc()">Search</button>
<!-- press this button after entering "parker" -->
</form>
</div>
<!-- Rest of the HTML page -->
</body>
</html>
I assume you are using a form onsubmit event to call myfunc, if so you have to prevent the default behavior by return false; (for example)
HTML:
<form id="form">
<input type="text" id="mysearch-text">
<input type="submit" value="Submit">
</form>
JS:
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if (filmName == "parker") window.location.href = "http://www.w3fools.com";
else alert("hello");
return false; //prevent the default behavior of the submit event
}
}
</script>
I have tested the following solution and it works perfectly:
setTimeout(function(){document.location.href = "page.html;"},500);
To make a long story short, I need to be able to prevent the default action from a input type="file". In other words I do not want to display the system's open dialog box when the user clicks on the "Browse" or "Choose File". I already have the replacement dialog working, but the system's open dialog box still appears.
Below is a sample of what I am currently trying to accomplish this. (PS: I am using Chrome 21)
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
event.stopPropagation(); // Doesn't work
return false; // Neither does this
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick();" />
</body>
</html>
Any ideas?
How about
<input type="file" onclick="return false" />
or if you need the file_onclick function
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
return false;
};
//-->
</script>
</head>
<body>
<input type="file" onclick="return file_onclick();" />
</body>
</html>
Got it. I needed to disable the tag and then use the setTimeout method to re-enable it.
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function(o)
{
// Show custom dialog instead...
o.disabled = true;
setTimeout(function() { o.disabled = false; }, 1);
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick(this);" />
</body>
</html>