I am coding a little web page and I want to start simplemodal on the start of loading the page.
So now i have this code in body
<div id='container'>
<div id='content'>
<div id='basic-modal'>
<input type='button' name='basic' value='Open' class='basic'/>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Random Text in the SompleModal box.</h3>
</div>
</div>
</div>
You can see the button as a input, when i click it the box poppes up and there is the text.
Here also the basic.js, but i dont understand it, because i started learning Web Designing a few days ago.
basic.js
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
also included are these files.
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
I read that it it possible to use onLoad or in jscript .ready but i dont know how.
Use the $(document).ready() function :
$(document).ready(function() {
// Any thing in here will execute when the DOM has finished loading
$('#basic-modal-content').modal();
});
jQuery Docs for .ready()
Try with this:
<script>
function openModal()
{
$('#basic-modal-content').modal();
}
</script>
<body onload="openModal();"></body>
Related
I want to show a div for 5 seconds when the web page is loaded and then make it disappear. This is my code:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
setTimeout(function() {
$('#mask').hide();
}, 5000);
</script>
</head>
<body>
<div id="mask">
<h2>This div will fade out </h2>
</div>
</body>
</html>
The above code doesn't work, however if I delete the single line that calls jQuery mobile javascript
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
it works perfectly.
Any idea on how I can make it work having both jQuery and jQuery mobile in the <head> section?
As jQuery initialises lots of event listeners wrap up your code on an event listener like:
jQuery(document).ready(function ($) {
setTimeout(function () {
$('#hide').hide();
}, 5000);
});
http://jsfiddle.net/wcuxS/1457/
Try including the div in your first page:
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<div id="mask">
<h2>This div will fade out </h2>
</div>
</div>
</div>
Then add your script within the pagecreate event:
$(document).on("pagecreate", "#page1", function () {
setTimeout(function () {
$('#mask').hide(800);
}, 5000);
});
Working DEMO
You need to work with the Jquery Mobile api. Embed you timeout function within the $(document).on('pageinit') event callback. Also I am not sure if its called 'pageinit' but there is a Jquery Mobile event that behaves like $(document).on('ready'). Do some research on the JQM api
jqueryui is used to show a dialog box, then if there is a click the 'dialog_insider' on the dialog box ,not on the flat (correct wording?) webpage , an ajax call will be made. The file in the called through the ajax
html:
<div id="dialog" style="border:1px solid green; width:150px; margin:auto;">
<div class="dialog_insider">this is the dialog</div>
<!-- end of class dialog_insider-->
</div>
<!- end of id dialog-->
jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").click(function(){
my_dialog = $(this).clone();
my_dialog.dialog();
$(".dialog_insider", my_dialog).click(function(){
alert("clicked");
$.post("replace.php",function(response){
});
});
});
});
</script>
the file replace.php contains:
<script type="text/javascript">
$(document).ready(function(){
alert("hi");
$("dialog_insider",my_dialog).html('4444444');
});
</script>
I don't get any functionality(i.e. no alert, no html changing) from the replace.php page
I tried with $("opener.dialog_insider",my_dialog).html('4444444');, but no result.
What is the solution?
To make javascript from ajax-called page running, you need to apped it to the current document.
And opener won't work when you make an AXAJ call, works only with opened window.
$.post("replace.php", {}, function(response){
$('body').append(response);
});
JS will execute when you append it, or make eval();
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.
Im trying to show/hide a div using jquery when a link gets clicked. I put this in my head section:
<script type="text/javascript">
$("#attach_box").click(function {
$("#sec_box").show()
});
</script>
I have a link that looks like this:
+ Add a Postal Address (If Different)
And a div that looks like this:
<div id="sec_box" style="display: none;">
Hello world!!
</div>
This doesn't work and I can't figure out why. Any ideas?
You need to attach the click handler in the document.ready in order to make sure that the DOM has been loaded by the browser and all the elements are available:
<script type="text/javascript">
$(function() {
$('#attach_box').click(function() {
$('#sec_box').show();
return false;
});
});
</script>
Also you forgot to put parenthesis () next to the anonymous function in the click handler.
Chances are the DOM isnt fully loaded yet.
<script type="text/javascript">
$(document).ready(function()
{
$("#attach_box").click(function() {
$("#sec_box").show()
});
});
</script>
put that in your head and put your initialization code in there.
I have this code snippet:
<div id="div1">
</div>
<div id="div2">
<h3>This is the content</h3>
<script type="text/javascript">
alert('This is the content');
</script>
</div>
<script type="text/javascript">
jQuery('div#div2').appendTo('div#div1');
</script>
Using this code, alert message will be displayed twice (once when the page is loading, and then when jQuery re-execute the script when it execute appendTo method?
Any idea of how to use jQuery to conveniently move element (that have script tag) around without re-executin the javascript?
Thanks.
Once the <script> has executed you don't need it any more, so you could remove it before moving #div2.
$('#div2 script').remove();
$('#div2').appendTo('#div1');