jQuery mobile: add confirm dialog to links? - javascript

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");
}

Related

Integrating Animate.CSS with Reveal.JS

I've been looking online now for a couple of weeks but can't seem to find a simple solution that works. I want to use Animate.CSS with Reveal.JS
I have the following code already:
<div class="reveal">
<div class="slides">
<!-- Intro -->
<section data-transition="zoom">
<div class="headlines-intro">
<p class="animated zoomIn">Headlines</p>
<h2 class="decorated animated fadeInDown delay-1s"><span><div id="day"></div> <div id="month"></div></span></h2>
</div><!-- headlines-intro -->
</section>
<!-- /Intro -->
<!-- Greeting -->
<section data-transition="zoom" data-autoslide="5000">
<h1 class="greeting wow hinge">Goedemorgen!</h1>
</section>
<!-- /Greeting-->
</div><!-- /slides -->
</div><!-- /reveal -->
All the animations now trigger when the page loads but I want them only to be loaded when the active section is in view. How do I achieve this? My JS/Jquery skills are very basic.

Hidden div is displayed briefly - how to prevent that to happen?

I have 2 divs on my page, one should be displayed if javascript is disabled, and another if the javascript is not disabled.
My problem is : even when javascript is NOT disabled, the div which contain message that javascript is disabled is briefly displayed, and
it hides few seconds after, when page is loaded.
Here is the html (simplified version) that I have:
<html>
<head>
<body>
<!-- This div is displayed only if the JavaScript is DISABLED -->
<div class="wrapper-page" id="no-js">
<p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
</p>
</div>
<!-- end no-js div -->
<!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
<div class="wrapper-page" id="wrapper-page" style="display:none;">
<p>My regular content goes here...</p>
</div>
<!-- end wrapper page -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
<!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the
Disabled JavaScript error message is displayed. -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
</body>
</html>
Here is the content of the JavaScript file:
$(document).ready(function () {
$("#no-js").hide();
$("#no-js").css('visibility','hidden');
$("#no-js").css('display','none');
$("#wrapper-page").css("display", "block");
});
I tried to move the JS and jQuery on the top, I tried to switch the order of the html divs, nothing so far didn't help me.

Use noscript tag for content displayed only if js is disabled
<html>
<head>
<body>
<!-- This div is displayed only if the JavaScript is DISABLED -->
<noscript>
<div class="wrapper-page">
<p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
</p>
</div>
</noscript>
<!-- end no-js div -->
<!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
<div class="wrapper-page" id="wrapper-page" style="display:none;">
<p>My regular content goes here...</p>
</div>
<!-- end wrapper page -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
<!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the
Disabled JavaScript error message is displayed. -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
</body>
</html>

Your code works fine. Look the following code
$("#no-js").hide();
$("#no-js").css('visibility','hidden');
$("#no-js").css('display','none');
$("#wrapper-page").css("display", "block");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This div is displayed only if the JavaScript is DISABLED -->
<div class="wrapper-page" id="no-js">
<p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
</p>
</div>
<!-- end no-js div -->
<!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
<div class="wrapper-page" id="wrapper-page" style="display:none;">
<p>My regular content goes here...</p>
</div>
<!-- end wrapper page -->
Is there any issues displayed in console.
Look if the file path used for javascript files are correct by verifying in source code.

I would use the noscript tag as stated in waldemarle's answer, but here is an alternative:
Using document.write, you can put a container div around my body content with a class of js, then you can style js things from the beginning without it "flashing":
.js .no-js,
.js-show {display:none;}
.js .js-show {display:block;}
<script>
document.write('<div class="js">'); // goes after start body tag
</script>
<div class="no-js">hide if js enabled</div>
<div class="js-show">hide if js disabled</div>
<script>
document.write('</div>'); // goes before end body tag
</script>

try something like this
<div id="content">
Javascript is enabled
</div>
<noscript>
<div>
Javascript is disabled
</div>
</noscirpt>
<script>
$("#content").show();
</script>
noscript tag has been around as long as I can remember.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

Div not displaying properly with angularjs

I am trying to show/hide a div element. So it will list a hopspital, and then when it is clicked, it should display the following information using angularjs. If I delete 'ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"' the dropdown effect will work, but obviously no data from my JSON object. If I delete 'class="drop-panel animated fadeIn"' then you don't need to click on the hospital name, all the information will be displayed for you (no dropdown effect). I can't quite figure out what I am doing wrong. I just want to be able to click on the hospital name, and then have the information associated with that hospital to display underneath it.
localHospital.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="drop-panel animated fadeIn">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->
style.css
.drop-panel {
display: none;
}
.drop-panel.show {
display: block !important;
}

Try changing ng-if to ng-show. ng-if will add the element to the DOM only when the user clicks on it, which means it could be screwing up the style's show/hide behavior.

I ended up solving it by using the ng-show command, but I didn't just switch the ng-if with ng-show. I ended up getting rid of the drop-panel css class in the div, and adding 'ng-click="showDetails = ! showDetails"' and then and 'ng-show="showDetails"', which would toggle on and off as the div was clicked.
It was from this Show hidden div on ng-click within ng-repeat
localHospitals.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question" ng-click="showDetails = ! showDetails"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="animated fadeIn" ng-show="showDetails">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->

Pass dynamic image parameter to modal-dialog

I am implemeting a system where the user clicks on an image and is redirected to another website. Before redirecting a modal dialog appears and confirms that they will be redirected to another website.
The images are added dynamically from the back-end by the client and the client adds a unique service link to each image resulting in:
<!-- image #1 -->
<a href="#openModal"> <!-- opens the modal dialog -->
<div class="service">
<img src="img.png"> <!-- unique image -->
</div>
</a>
<!-- image #2 etc -->
<a href="#openModal"> <!-- opens the modal dialog -->
<div class="service">
<img src="img2.png"> <!-- unique image -->
</div>
</a>
<!-- clicking on image #1 -->
<div id="openModal">
<p>You will be now redirected to the service provider home page</p>
Order<!-- link entered in the back end of service that is unique with each service provider image -->
</div>
How could I achieve this without knowing a certain ID to each image?
Thanks O.

Can you please take a look at below fiddle link:
https://jsfiddle.net/pw8w1x6d/4/
HTML Code:
<a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
<div class="service">
<img src="img.png"> <!-- unique image -->
</div>
Open Modal</a>
<!-- image #2 etc -->
<a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
<div class="service">
<img src="img2.png"> <!-- unique image -->
</div>
Open Modal</a>
<div id="openModal" class="modalDialog">
<div> X
<div class="selectedImage"></div>
Submit
</div>
</div>
jQuery Code:
$(document).ready(function(){
$(document).on("click", ".openlink", function(){
var imagePath = $(this).find("img").attr("src");
$(".selectedImage").text(imagePath);
});
});

jQuery mobile dialog modal not opening on second time

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');
})
}

Categories