I have to call div from javascript function.
I have form tag like this:
<form action="save_json.php" id="hazardForm" method="post" onsubmit="displayDiv()">
and here is div which I have to call from displayDiv() function.
<div data-role="popup" id="submitPopup">
<div data-role="main" class="ui-content">
<p data-theme="b" style="color: #30659B">FORM REPORTED
SUCCESSFULLY</p>
<br> <br> <a href="#initialPage" data-role="button"
id="clearHz1" data-theme="b" data-mini="true">OK</a>
</div>
</div>
Please help me!!
$("#hazardForm").submit(function()
{
$('#submitPopup').show();
return false;
});
CSS:
.popup{
display:none;
}
HTML
<div data-role="popup" id="submitPopup" class="popup">
</div>
Related
I added a popup to a div-container. Opening the popup doesn't work.
This is my container-structure:
<div data-role="page" id="mainPage">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
<a class="select-Button">
...
</a>
</div>
<ul data-role="list-view"></ul>
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
I'd like to open the popup by javascript:
...clone the template and add clones to the list-view before.
$('#mainPage').find('.select-Button').on('click', function(){
$('#myPopup').popup("open");
});
But it's not working
This works:
Java-Script:
var $popUp = $('#myPopup').popup({
dismissible: false,
theme: "c",
overlyaTheme: "d",
transition: "pop"
});
$popUp.popup('open').trigger("create");
HTML:
<div id="myPopup"> <!-- removed data-role="popup" here-->
<p>My Popup</p>
</div>
page div should be direct parent of popup div. If you place it inside any other div, it won't open, or malfunction.
<div data-role="page">
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
<div id="myContent">
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
</div>
To open it using HTML
Popup
To open programatically
$("#popupID").popup("open");
You need to delegate click event to dynamically added elements.
$(document).on("click", ".select-button", function () {
$('#myPopup').popup("open");
});
Demo
Try this out:- http://jsfiddle.net/adiioo7/rF873/
JS:-
$('#myPopup').popup();
$('#myPopup').popup("open");
HTML:-
<div data-role="page">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
<div dara-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
Issue with your approach is that you cannot call methods on popup prior to initialization.
When I open the file in chrome, It works how it should but refreshing the page gives me an error. I have already checked that I am not listing the same sources twice. Very weird if you ask me!
this is the error I am getting:
Uncaught Error: cannot call methods on popup prior to initialization; attempted to call method 'open'
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content">
<div data-role="popup" id="intro_view" data-overlay-theme="a" data-theme="a" style="max-width:100%;">
<div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Welcome!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
<h1 class="ui-title">Navigate through time and space to see what's happening around you!</h1>
<p> Here's a few quick tips to get you started:</p>
<ol>
<span class="ui-btn-inner"><span class="ui-btn-text">Cancel</span></span>
<span class="ui-btn-inner"><span class="ui-btn-text">Delete</span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$( "#intro_view" ).popup( "open",{positionTo:"window"} );
});
</script>
Instead of $(document).ready .. use this
$(document).bind('pageinit', function() {
$("#intro_view").popup('open');
});
Please refer jquery docs http://jquerymobile.com/demos/1.2.1/docs/api/events.html
Hi all I have html file in that there are various different pages in div. Now I want to navigate from one page to another I am using $.mobile.changePage("#test") for this but navigation to test.html is not take place. If I use different html file for test.html and call it as $.mobile.changePage(("test.html")); then navigation takes place.
I also tried with loadPage, but it also does not solve my issue. Any suggestion will be appreciated, Thanks in advance.
Here is my code:
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Inside callPage");
$.mobile.changePage('#secondPage');
}
</script>
</div>
<div data-role="page" id="secondPage" onclick=callThirdPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="secondPage" id="secondPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdPage');
}
</script>
</div>
<div data-role="page" id="thirdPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdPage" id="thirdPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthPage');
}
</script>
</div>
<div data-role="page" id="fourthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthPage" id="fourthPage">
</div>
</div>
<div data-role="page" id="fifthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthPage" id="fifthPage">
</div>
</div>
<div data-role="page" id="sixthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthPage" id="sixthPage">
</div>
</div>
before comes to above html file navigate to other pages, And now $.mobile.changePage('#secondPage'); secondPage is not navigated from firstPage. But if same code I placed in index.html (i.e entry point of application then proper navigation takes place.
You should write
$.mobile.changePage($("#test"))
Is the call to $.mobile.changePage waiting for page load? You need to let us see some code here...
Please refer code below i m learning jquery and i want to display
tag named #child on submit button click using javascript/jquery can any one help me how to call on button click
And also want to call #child and #home tag on >>(next button) & <<(prev button)** on button click respectively in code >> and<< is written as < and &glt.? can anyone
help me out ?
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagvati
</h3>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" href="#home">
<<
</a>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" href="#child">
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" placeholder="Khushu" type="text" />
</fieldset>
</div>
<input data-theme="d" ="submitbtn" value="Login" type="submit" onSubmit="redirect()"/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" >
<h3>
Page1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagvati
</h3>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" placeholder="Khushu" type="text" />
</fieldset>
</div>
<input data-theme="d" value="Login" type="submit" onsubmit="redirect()"/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" >
<h3>
Page1
</h3>
</div>
</div>
To show a tag use
$('#child').show(); // where child is the id of the element
and to hide ...
$('#child').hide();
alternatively, you can simply toggle it between hide/show as follows:
$('#child').toggle();
to attach these to an onclick event of a button ...
$(document).ready(function() {
$('#buttonID').click(function() {
$('#child').toggle();
});
});
hope this helps
The below code is for javascript
var Home= document.getElementById("home");
Home.style.display="none";//To hide the div
Home.style.display="";//To display the div
I have single Html page having many anchor elements. This single Html page contains many div parts. Only one part displays at time and a anchor specific to this part will focused. this html also contain a div to open popup. When this popup will open anchor specific to this will focused. Now I want get the anchor focused earlier to popup anchor focused.
My code is following:-
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<a href='javascript:void(0);' id='anchor' onkeydown='Main.MainKeyHandler();'></a>
<a href='javascript:void(0);' id='anchorAboutUs' onkeydown='Main.MainKeyHandler1();'></a>
<a href='javascript:void(0);' id='anchorSecondScreen' onkeydown='Main.MainKeyHandler2();'></a>
<a href='javascript:void(0);' id='popupanchor' onkeydown='PopupKeyHandler();'></a>
<div id="ParentDiv">
<div id="SplashScreenDiv">
<div id="SplashScreen"></div>
</div>
<div id="Logo"></div>
<div id="Header"></div>
<div id='messagePopup' style='position:relative;width:500px;z-index:1000;background-color:#ffffff;'><div ></div ><div id='popupReturn'>Return</div><div>
<div id="PopUp">
<div id="YesBtn"></div>
<div id="NoBtn"></div>
</div>
<div id="FirstScreen">
<div id="testinfo" style="color:#ff0000; width:600px; height:50px; overflow:hidden; font-size:xx-large; "></div>
<div id="btn_horoscope"></div>
<div id="btn_aboutus"></div>
</div>
<div id="AboutUsScreen" >
<div id="AboutUsImgDiv">
<div id="AboutUsImg"></div>
</div>
<div id="aboutUsInfoDiv">
<div id="aboutUsInfo"></div>
</div>
</div>
<div id="SecondScreen" >
<div id="HoroscopeImg" class="HoroImage"></div>
<div id="SelSunSignMsgDiv">
<div id="SelSunSignMsg">Select your SunSign </div>
</div>
<div id="SelSunSignDiv">
<div id="SelSunSign">
<div id="SunSign_0"></div>
<div id="SunSign_1"></div>
<div id="SunSign_2"></div>
<div id="SunSign_3"></div>
<div id="SunSign_4"></div>
<div id="SunSign_5"></div>
<div id="SunSign_6"></div>
<div id="SunSign_7"></div>
<div id="SunSign_8"></div>
<div id="SunSign_9"></div>
<div id="SunSign_10"></div>
<div id="SunSign_11"></div>
</div>
</div>
</div>
</div>
</body>
any help will appriciated
You need document.activeElement.id. You can find more information here, which has been criticized before.