I want to close popup window with Esc key. Is it possible to close with Esc key when I have set data-dismissible="false". The Popup should not close when clicked outside of the Popup (that's why I have set data-dismissible="false" and it works great). Only problem is I am not able to close with Esc key. Here is my code:
$(document).keydown(function(e) {
if (e.keyCode == 27) {
namePopup.close();
}
});
Try this, popupBaisc is the id of the popup.
$(document).ready(function() {
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$("#popupBasic").popup("close");
}
});
});
HTML
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="false">
<p>This is a completely basic popup, no options set.</p>
</div>
Related
I have a JQUERYUI Dialog in a popup page. I want this Dialog to be opened as a new window ( like window.open) Is this possible ??
Don't use jquery dialog at all, it's just a floating div with higher z-index.
<script>
function nWin() {
var w = window.open();
var html = $("#toNewWindow").html();
$(w.document.body).html(html);
}
$(function() {
$("a#print").click(nWin);
});
</script>
<div id="toNewWindow">
<p>Your content here</p>
</div>
Open
Reference
When I call fadeOut on my dialog it only does a partial fade and leaves the grey header area where the dialog title is. I've tried removing the title as well as the various attributes that disable the exit button in the upper right corner of the dialog, but that didn't work. As you'll see in my script below, I want the dialog to close after the form submission has been validated.
//HTML
<div id="dialog">
<form id="form">
<p id="thanks">Please provide a contact number. It will only be shared with the
host</p><input id="number" name="number" type="text"/>
<button id="submit" type="submit">Submit</button>
</form>
</div>
//JS
if(myConditional){
//FORM IS HIDDEN ON PAGE LOAD AND SHOWN ON CLICK
$('form').show();
$('#dialog').dialog({
//These parameters are meant to disable the dialog close button
closeOnEscape: false,
beforeclose: function (event, ui) { return false; },
dialogClass: "noclose",
title: "Thanks For Volunteeering",
minWidth: 500
});
$('button').button();
}else{
//other code
}
//Validate the phone number before saving it to local storage
$("#form").validate({
rules: {
number : {
required: true
customvalidation: true
}
},
messages: {
number : {
required: "enter a phone number"
}
},
submitHandler: function(form) {
var number = $('#number').val();
localStorage.setItem('number', JSON.stringify(number));
//THIS FADE OUT ISN'T FULLY FADING THE DIALOG
$('#dialog').fadeOut();
} //closes submit handler
});//close validate
Ok I figured it out.
I got rid of the beforeClose parameter in the dialog init code, and in the form validation submit handler I added this:
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
});
//The fadeOut method has a call back function you can use with it to do something after the fade is completed.
I have a problem with jquery mobile code. I am using the code above to append a dynamic html code for my application.
$("#tab3").click(function() {
$('#HaberIcerik').html(" <img src='img/izto_header.png' height=auto width=100% class='img2' > ");
$('#HaberIcerik').append(" <div class='zoomTab'><a href='#' data-role='button' class='plus'>+</a><a href='#' data-role='button' class='minus'>-</a></div>");
});
When the page loads first, everything works perfectly. However when I move to the main page and click my tab3 page again buttons are shown only as links,not with button styles.
Can you help me to solve this problem?
In your code you're not refreshing your button's styles. So, you must add it after append()
$(document).on("click", "#tab3", function (e) {
e.preventDefault();
$('#HaberIcerik').html("<img src='http://www.ndaccess.com/Sample/Images/Image1.jpg' height=auto width=100% class='img2' > ");
$('#HaberIcerik').append("<div class='zoomTab'><a href='#' data-role='button' class='plus'>+</a><a href='#' data-role='button' class='minus'>-</a></div>").promise().done(function () {
//wait till everything is appended
$(this).find("a").buttonMarkup("refresh");
});
});
For more info see docs : http://api.jquerymobile.com/button/#method-refresh
And here's a demo : http://jsfiddle.net/hungerpain/cTdkN/
In a jQuery Mobile application, I'm using Ajax to load a page with dynamic content. Now, I want to add a "reload" button to that page.
Consider index.html:
<div data-role="page" id="home">
<div data-role="header"><h1>Home</h1></div>
<div data-role="content">Time</div>
</div>
And time.php:
<div data-role="page" data-add-back-btn="true" id="time">
<div data-role="header"><h1>Time</h1></div>
<div data-role="content">
<p><?= date(DATE_RFC822)?></p>
Reload
</div>
</div>
I can now navigate back and forth between the "home" and "time" pages, and the time will be updated when arriving on the "time" page, but I would like the "Reload" button to reload the "time" page. That is: it should do an Ajax request for time.php, and recreate the "time" page from the response (and meanwhile show the "page loading" indicator).
How can I do that?
After looking at the code of changePage and loadPage I came up with a simpler solution:
$('.reload').live('click', function(e) {
$.mobile.changePage($.mobile.activePage.jqmData('url'), {
reloadPage: true,
changeHash: false,
transition: 'none'
});
e.preventDefault();
});
Note that JQM will still transition between the old version of the page and the new version; it is best not to use a transition that has a stronge sense of direction (like 'slide').
The preventDefault does not seem strictly necessary, but I added it for good measure.
This does not seem to be possible when using the hijax-style links. You can however use a multi-page HTML document and load the dynamic page content yourself in the pagebeforechange event.
So in index.html, I already add the "time" page with empty content:
<div data-role="page" id="home">
<div data-role="header"><h1>Home</h1></div>
<div data-role="content">Time</div>
</div>
<div data-role="page" data-add-back-btn="true" id="time">
<div data-role="header">
<h1>Time</h1>
Reload
</div>
<div data-role="content"></div>
</div>
Next, I intercept the pagebeforechange event: in case of the "time" page, we will load the page content from URL time.php.
$(document).bind('pagebeforechange', function(e, data) {
if(typeof data.toPage == 'string') {
var u = $.mobile.path.parseUrl(data.toPage);
if(u.hash == "#time") {
loadPageContent($('#time'), 'time.php', data.options);
e.preventDefault();
}
}
});
Since I want to wait for the Ajax request to come back before changing the page, I prevent the page change; loadPageContent will have to do this.
I can do a similar loadPageContent for the "Reload" button:
$(document).ready(function() {
$('#time .reload').bind('click', function(e) {
loadPageContent($('#time'), 'time.php', undefined, $(e.target).closest(".ui-btn"));
});
});
This is the code of loadPageContent:
function loadPageContent(page, url, options, button) {
if(typeof button != "undefined")
button.addClass($.mobile.activeBtnClass);
$.mobile.showPageLoadingMsg($.mobile.loadingMessageTheme, $.mobile.loadingMessage, $.mobile.loadingMessageTextVisible);
var content = page.children(':jqmData(role=content)');
content.load(url, function(response, status, xhr) {
if(status == "success") {
page.page();
content.trigger('create');
$.mobile.hidePageLoadingMsg();
if(typeof button != "undefined")
button.removeClass($.mobile.activeBtnClass);
$.mobile.changePage(page, options);
} else {
$.mobile.hidePageLoadingMsg();
$.mobile.showPageLoadingMsg($.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true);
setTimeout(function() {
$.mobile.hidePageLoadingMsg();
if(typeof button != "undefined")
button.removeClass($.mobile.activeBtnClass);
}, 1000);
}
});
}
This is already quite an elaborate version: it will display the page loading message, and it will display an error message for 1s when the request fails. At the end of a successful request, it will enhance the content with the create trigger, and it will do the page change. If the reload button is passed along, it will mark this button as active while the operation is in progress.
I am wanting to pass a variable to a jquery dialog window. I am using classic ASP and have onyl really touched on the world of jquery. I have spent a few hours researching and tring to use the .data method but are having trouble. Your time and assitance would be very much apriciated!
Here is my stripped down page:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
show: "slide",
hide: "fade",
width: 452,
modal: true,
buttons: {
"Ok": function() {
PostItNote.submit();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
and this is how I call the window:
<a href='#' id='dialog_link' CLASS='OrangeButton'> Show Window </a>
and the contents of my window:
<div ID="dialog" TITLE="Periodic Report">
stuff here
</div>
Why can I not do this:
<a href='#' id='dialog_link(someValue)' CLASS='OrangeButton'> Show Window </a>
Thank you in advance
How it is used in the ASP loop is:
do until Products.EOF
--other code here---
<a href='#' id='dialog_link(Products(0))' CLASS='OrangeButton'>
--other code here---
products.moveNext
loop
The dialog is just a div on your page, so it can't really be "passed" a value. It can be manipulated by any JavaScript variables in scope though. You could change your click handler to use a variable to manipulate the dialog:
var myVariable = "Some new text for the dialog";
$('#dialog_link').click(function(){
//New code to "pass" a value to the dialog
$('#dialog').text(myVariable);
$('#dialog').dialog('open');
return false;
});
Or you could use the open member of the dialog:
...
width: 452,
open: function() { $('#dialog').text(myVariable); },
modal: true,
...
To make changes to the dialog div whenever it is opened.
The code id='dialog_link(someValue)' will not do anything, as the id attribute cannot make function calls, only event handlers like onchange can do that. Even if it could, dialog_link is not a function that can be passed a value. It is just the id of another element.
I'm sure you're probably already aware, but the jQuery documentation is very useful- here are the docs for dialog.
Edit
In response to your comment: I would drop the $('#dialog_link').click(); statement and change the link code to the following:
<a href='#' class='OrangeButton' onclick='openDialog(someValue);'>Show Window</a>
And then add the JavaScript function to be called on the click event:
function openDialog(value) {
$('#dialog').text(value);
$('#dialog').dialog('open');
}
Edit 2
Inside of the ASP loop something like this should do the trick:
Response.Write("<a href='#' onclick='openDialog(" & Products(0) & ");'>Show</a>")
This will create an <a></a> element on the page with an onclick handler that passes the desired value to openDialog, making it accessible by the dialog.
I changed the code for the link slightly so that it all fit on one line, but you could always add back the class='OrangeButton' and all that if you'd like.