In a jquery mobile webpage, I would like to call a script defined within script tags in the HEAD section of the jsp.
<head>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>
<script>
$("#button").click( function()
{
alert('button clicked');
}
);
</script>
</head>
<body>
<html:errors/>
<div data-role="page" data-theme='a'>
<div data-role="header">
<h1>jquerymobile</h1>
</div>
<div data-role="content">
<div id="button" data-role="button">Click on button</div>
</div>
</div>
</body>
When the Button is clicked, I want the alert to be shown. But nothing happens when the button is clicked.
Could someone tell me where I am going wrong?
EDIT1:
The following code brings up the alert in Firefox & Opera Desktop Browsers.
$(document).ready(function() {
$("#vbutton").click(function() {
alert("clicked");
});
});
<a id="vbutton" data-role="button">Click Button</a>
Any reason why the same does not work with Opera Mobile & Fennec browsers - where it shows the Error Loading Page dialog??
Your problem is that you are searching for $('#button') before it exists...
Try wrapping your jQuery code in a $(document).ready(function(){ ... }) or its shorthand alias jQuery(function(){})
The other option is to include your initialization of the click event on the button until AFTER the #button exists in the DOM. In other words, you can move your <script> tag to the bottom of the page and it should work.
The problem was due to debug statements like
debugger;
debug.info(....)
which were understood by Firefox/Firebug, but were causing problems in Fennec & Opera Mobile browsers.
Related
I have following HTML,
$(document).ready(function() {
$('#searchMovieBtn').click(function(e) {
e.preventDefault();
console.log('search');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
When I click on button, nothing happens, it seems like event is not triggering.
It is a caching issue. When you was developing and testing your JQuery code, your old code remained into the browser cache. Browser cached it to load page faster in next uses. In order to solve this problem you have 3 options.
Delete your browser history
Refresh your browser by pressing Ctrl + F5 (Preferred for developing purpose)
Tell browser that this JQuery code has changed by adding a version for it. It is used when you are publishing your code on the server because you can't ask your clients to delete their browser history or load your page by pressing Ctrl + F5
Here is how you could add version to your JQuery code:
<script type="text/javascript" src="js/script.js?v=1"></script>
Look at v=1. Next time when you updated your JQuery code change it to v=2 to tell browser that your code has been changed.
You can try the next thing,
First of all, your HTML markup I think it might be wrong as you are not pointing out correctly the folders.
I attached all the css and js bootstrap + jquery files through a CDN.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title> jQuery button click event working?</title>
</head>
<body>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
</body>
</html>
Therefore,your script.js stays as it is.
For me it has worked like this. I got the message printed onto my console.
Hope that helps you.
Make sure you don't have another element in the HTML with the same id.
(sorry for my bad English)
I checked all posts about Jquery back button here and for some reason nothing worked with me so please help me...
I simply want when I run Jquery function by clicking on a link with hash, the browser will shows me the back button.
When I click the back button I want it to run the previous function.
here are the codes...
<!DOCTYPE html>
<head>
<script src="jquery.min.js" type="text/javascript"></script> //jQuery v1.10.2
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="prodmenu">
Link1
Link2
</div>
<script>
$("#link1").click(function() {
$("#div1").fadeOut();
$("#div2").animate({top:'500px'},"slow");
});
</script>
</body>
</html>
Thanks a lot.
You can use this jquery plugin for the #hash history.
Here is an example.
I have a PDF embedded inside iframe. I need to hide this iframe on click of a button. But for some reason, the iframe section does not hide in Safari browser. The same code works fine in IE, Chrome and Firefox.
Here is a snippet from my HTML page:
<div id="PDFSection" style="text-align:center;">
<iframe id="PDFFrame" src="sample.pdf"> Loading...
</iframe>
<hr />
<input id="btnEmail" type="button" value="Email" name="btnEmail"/>
</div>
and here is the jquery part I am calling to hide the div:
$(document).ready(function() {
$( "#btnEmail" ).click(function() {
$( "#PDFSection" ).hide();
});
});
I have tried toggle() instead of hide() and also tried to call hide() on the iframe element itself. But nothing is able to hide the PDF object. I do see that when the jQuery code runs, it hides the PDFSection div (as I can see the button and hr line getting hidden), but the PDF stays on the screen.
Here is a screenshot of what happens before and after clicking the button:
i just tested your example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#btnEmail" ).click(function() {
$( "#PDFSection" ).hide();
});
});
</script>
</head>
<body>
<div id="PDFSection" style="text-align:center;">
<iframe id="PDFFrame" src="about:blank"> Loading...
</iframe>
<hr />
<input id="btnEmail" type="button" value="Email" name="btnEmail"/>
</div>
</body>
</html>
and it works fine in safari 6.0.2 (8536.26.17) on OSX Mountain Lion. Maybe you should open the developer console cmd+alt+i and look for further error messages.
Haven't been programming in JS for a while.
Now, I have following thing:
<html>
<head>
<script language="JavaScript">
function enlarge()
{
window.close();
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onClick="enlarge()" />
</body>
</html>
(it's very simplified, as, in fact, I have WordPress platform with custom JS modifications etc, but in general, this is the idea).
I don't understand why it's not working.
JavaScript cant close the window unless it opened the window.
In your function, replace window.close() with alert('here') and you'll see the function works fine.
If you want your function to close a window, first open one:
<html>
<head>
<script type="text/javascript">
var popup;
function closewin()
{
popup.close();
}
function openwin()
{
popup = window.open('http://www.google.com');
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onclick="openwin()" /> Click to open, then come back here
<br><br>
<img src="addresstomyimg.png" onclick="closewin()" /> Click to close
</body>
</html>
Demo: http://jsfiddle.net/AlienWebguy/pbFha/
If you try running this script using Firefox and use the Firefox's Error Console to look for errors, you can see that the following error gets logged when you run this script.
Scripts may not close windows that were not opened by script.
You can launch the Error Console in Firefox by pressing Ctrl + Shift + J.
On Chrome, your script successfully closes the tab in which it is running.
Note that the right way to use the <script> tag while writing JavaScript is as follows:
<script type="text/javascript">
If you're trying to close the main window, it won't work.
You can only close windows that were opened by JavaScript.
This code works on IE.
<html>
<head>
<script language="JavaScript">
function enlarge()
{
self.close();
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onClick="enlarge()" />
</body>
</html>
On the Torch 9800 OS 6, my JS call doesn't seem to be working properly. I've tried multiple approaches:
Using body onload=document.location+=#page2
Using a setTimeout() to wait for the DOM to load.
Placing the JS call at the bottom, which is what I currently have:
The alert pops up, but I don't see any HTML loaded. * This works on OS 5 *
<html>
<body>
<a id='page0'/>
<div>
...
</div>
<a id='page1'/>
<div>
...
</div>
<a id='page2'/>
<div>
...
</div>
<script type='text/javascript'>
window.onload=function()
{
alert('asdf');
document.location='app:#page2';
}
</script>
</body>
</html>
Have you tried
document.location='app://#page2';
??
Then maybe puting it in the body tag
<body onLoad="document.location='app:#page2';">
I've solved the issue by appending the anchor page to the end of the 'name' where the BrowserField object opens the HTML.