I am trying to open a modal popup dialog after loading ajax content in jQuery Mobile.
It works fine for the first time, it does not show any modal once it has shown for the first time.
following is the code :
<div data-role="dialog" id="myDialog">
<div data-role="header">
<h1>My dialog heading</h1>
</div>
<div data-role="content" id="m_content">
<p>Content goes here.</p>
</div>
<div data-role="footer">
<h3>And my footer...</h3>
</div>
</div>
javascript function
function cp() {
$.get('#Url.Content("~/Mobile/StockReport/ItemWise")', function (data) {
$("#m_content").html("").html(data);
$.mobile.changePage('#myDialog');
})
}
Related
I have 3 html files. Index.html invokes chat.html. Chat.html body contains a DIV which I want to populate with Div of a third HTML file (star.html) which resides in the same folder as chat.html.
chat.html -
<body>
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header text-center">
Chat - Group Menu
</div>
</nav>
<!-- Begin page content -->
<div class="container" id="chatDiv">
<div class="page-header">
<h1>Mobile Layout</h1>
</div>
<p class="lead">Chat stuff to appear here</p>
</div>
</div>
<div id="testDIV"></div>
<div id="footer">
//some DIV content here
</div>
</body>
star.html -
<body>
<p> hello all </p>
</body>
jquery code I am using (in an external .js file) is -
$(document).ready(function() {
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
$("#testDIV").load('star.html');
});
});
Here, the alert is displayed. But the content is not moving to chat.html Div.
What am I missing here?
Seeing as how you are opening a new window for chat, you need to address that window in order to manipulate that DOM. You may also need to add jQuery to the chat.html page if you haven't already
$('#loginBtn').click(function() {
$(this).validateEmail();
$(this).validatePassword();
var window.popup = window.open("html/chat.html");
});
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
window.popup.document.$("#testDIV").load('star.html');
});
I have a form with three different data-role="page" with three different data-url="abc".
Based on some condition I am rendering/displaying some fields on the second page after clicking the button on the first page.
Now I am getting the second page
<a id="123" class="xxx" href="#secondPageId" data-role="button">GoToNextScreen</a>
Now in the second page URL i can able to see http://www.test.com/index.html#secondPageId
when i am in the second page If i refresh the browser,
Its showing all available controls in the second page.
But i need to display only few fields based on the button click.
How can i do that ?
If that is not possible, then:
While refreshing the browser by clicking "Browser Refresh button" or Pressing F5 I need to remove the #secondPageId from the URL.
So that i can able to go back to first page.
I have made a jsfiddle that illustrates a possible solution.
Basically, you can do this in two ways:
Initially hide all elements and use jQuery to show the required ones at pagechange.
Initially hide nothing at all, and use jQuery to hide the required elements at pagechange.
The fiddle uses the latter one.
HTML:
<div data-role="page" id="first">
<div data-role="header">
<h3>
First Page
<a id='Goto_page2' class='ui-btn-right ui-btn ui-corner-all ui-shadow'>NEXT</a>
</h3>
</div>
<div data-role="content">
<p>
Please go to next page.
</p>
</div>
</div>
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
<a href='#first' class='ui-btn-left ui-btn ui-corner-all ui-shadow'>HOME</a>
</h3>
</div>
<div data-role="content">
<div>
<p class="tobehidden">
This text was visible, but has been made hidden.
</p>
</div>
<div>
<p>
This text only is visible.
</p>
</div>
<div class="tobehidden">
<h4>
This text was also visible, but has now been made hidden.
</h4>
</div>
</div>
</div>
jQuery:
$(document).ready(function(e) {
//Change to first page at load
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#first");
/*
* Read more about page handling here:
* http://api.jquerymobile.com/pagecontainer/#method-change
*/
//Click event for the "NEXT" button
$( document ).on("click", "#Goto_page2", function(){
//Hide elements that has the class "tobehidden"
$(".tobehidden").hide();
//Switch to page 2
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#second");
});
});
i'm trying to figure out how i can append a page to the bottom of another page after clicking on a button.
Usually the page with the button disappears and the next page is loaded.
I don't want the first page to disappear, instead just add the content of the second page at the bottom.
For example i have this structure of a page:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
If you click this button, this page will be hidden and the next page will slide up.
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>This is page2</p>
Go To Page 3
</div>
</div>
<div data-role="page" id="p3">
<div data-role="header" data-rel="back"><h1>Header Page 3</h1></div>
<div data-role="content">
<p>This is page3</p>
</div>
</div>
I created this jsfiddle for illustration.
I use Twitter Bootstrap and JS to make a kind of sliding sidebar. When you click "Toggle", the selected column with "col-lg-1" expands to "col-lg-3" and "col-lg-10" shrinks to "col-lg-8" (with jQueryUI's switchClass() ). For animated effect on show() and hide() I use jQueryUI. But during animation and column resizing the contents of #content flicker (disappear and shown again when the animation is over).
HTML is:
<div class="row">
<div class="col-lg-1" id="menu-1">
Toggle
<ul>
<li>
...
</ul>
</div>
<div class="col-lg-1" id="menu-1">
Toggle
<ul>
<li>
...
</ul>
</div>
<div class="col-lg-10" id="content">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
Cleaned JS is something like:
if ($col.hasClass('col-lg-3')){
// hide on second click
$col.switchClass('col-lg-3','col-lg-1');
$content.switchClass('col-lg-8', 'col-lg-10');
}else{
// open
var $sibling = $bar.siblings('.col-lg-3');
if($sibling.length == 1){
// close sibling if it's open
$sibling.switchClass('col-lg-3','col-lg-1');
}
$col.switchClass('col-lg-1','col-lg-3');
$content.switchClass('col-lg-10', 'col-lg-8');
}
Could you suggest a fix? Or recommend another solution?
UPD:
JSFiddle
Browser: Firefox 27.0.1
I'd like to add an 'Are you sure?' confirm dialog to links on a jQuery mobile page.
Here's my code - it's straight outta the jQuery docs, all apart from the links with the confirm dialogs on them.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
Back<h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>Back to foo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
Currently the confirm dialogs have no effect :(
Anyone know how I can add these with jQuery mobile?
Thanks!
It's nicer if you give IDs or classes to your buttons and bind events to them in your jQuery ready function, or wherever you dynamically create your forms (if you do).
Assuming you give the following id attribute to the back and home buttons and remove the inline onclick attribute, add this to a script tag:
$(function(){
$('#btnBack').click(function(){
if(!confirm("Leave page?")) return false;
history.back();
});
$('#btnFoo').click(function(event){
return confirm("Leave page?");
});
});
When the back button is clicked, it only returns false if the user cancelled the operation. If they clicked ok, you DO want to execute history.back() to go back to the previous page.
On the foo link, you have to return false to avoid automatically following the hyperlink.
Also note that the confirm function is synchronous, unlike most user interactions that you do in javascript through the DOM. This means when the dialog pops up, your code execution is on hold until the user presses a button, and the function evaluates to the result of that click. This is in fact what you need in this situation.
Edit: Removed preventDefault() on #bazmegakapa's suggestion.
I was facing the same problem and just solved it now.
I hope my example can help you and others having the similer problem.
Delete
function delComment(commentSno) {
...
// save
var nextUrl = "/deleteComment.do";
$("#frm").attr("action", nextUrl);
showConfirm("Are you sure to delete?", function() {
$("#frm").submit();
}
);
}
<div data-role="dialog" id="confirmbox">
<div data-role="header" data-icon="false">
<h1>Confirmation</h1>
</div><!-- /header -->
<div data-role="content">
<h3 id="confirmMsg">Confirmation Message</h3>
<br><p>
<center>
Yes
No
</center>
</div>
function showConfirm(msg, callback) {
$("#confirmMsg").text(msg);
$("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
$("#confirmbox").dialog("close");
callback();
});
$("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
});
$.mobile.changePage("#confirmbox");
}