I used jquery ui from this link http://jqueryui.com/demos/dialog/#animated for dialog which is not working in MVC4 application
This is my View
#{
ViewBag.Title = "Dialog";
}
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>
This is an animated dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Dialogs may be animated by specifying an effect for the show and/or hide properties.
You must include the individual effects file for any effects you would like to use.</p>
</div>
<!-- End demo-description -->
<div class="demo-description">
<p>
A modal dialog prevents the user from interacting with the rest of the page until
it is closed.</p>
</div>
<!-- End demo-description -->
You're not wiring up your javascript. Try this:
$('#dialog').dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$(document).ready(function(){
$('#opener').click(function () {
$('#dialog').dialog("open");
return false;
});
});
(remove the opening "$(function () {" and the closing "});" pair to this - your code wants to look like above.
Add $(documnet).ready and then define your function in it . . ..
$(document).ready(function () {
code goes here . .
});`
Related
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="reviewsPage">
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
});
});
</script>
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("mobileinit", function() {
});
$(document).bind('pageshow', '#twitterPage', function(event, ui) {
$(document).on('click', '[data-rel=back]', function() {
$.mobile.changePage('index.html');
});
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
Home
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
Here I have link when the link is clicked tweet.html file will be called. But when I clicked the back button I will be directed to the previous page without any error. But second time onwards when I click the back button I will be directed to the previous page and comes to the current page again.
$("#mybtn").unbind();`
unbind event will prevent this
I have a page called index.html, when I click the link in index html it will navigate to the another page which has Listview populated with data taken from Server. This Works without any error.
However, when I click the back button of current page, I will be directed to the previous page.
My question is, it refreshes current page and then go back to the previous page.
I need to prevent this.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: true, changeHash: true
});
});
});
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
$(document).bind('pagebeforeshow', '#twitterPage', function(){
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
unbind all events
` $("#mybtn").unbind();`
Here's my code in the <head></head>:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(function() {
});
$(document).ready(function () {
$('#dialog1')
.dialog({
position: 'center',
modal: true,
autoOpen: false
})
;
$('.panier')
.unbind('click')
.click(function(event) {
event.preventDefault();
$('#dialog1').dialog('open');
});
});
// ]]>
</script>
And the html code:
<div data-role="page">
<div data-role="header">
<h1>Choisissez vos pizzas !</h1>
</div>
<div data-role="content">
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a class="panier" href="/" data-role="button" data-icon="search">Voir panier</a></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="dialog" id="dialog1" class="app-dialog">
<div data-role="header">
<h3>A dialog</h3>
</div>
<div id="content" data-role="content">
<p>I am a dialog....!</p>
</div>
</div>
When I launch my page everything's fine until I click on the "panier" button: the error raised is:
Uncaught no such method 'open' for dialog widget instance
I really don't know why this doesn't work, because a dialog widget instance should have an open() method.
Any idea?
I think you are confusing the jquery mobile dialog with the jquery UI dialog. A jquery mobile dialog is really another JQM page just styled to look a bit more like a dialog (overlay, rounded corners). To display a JQM you just use the $.mobile.changePage('#yourDialog', optionalTranistion) method. That said JQM dialogs do have a close method (I'm not sure but there may have also had an open method at some point).
So for your code,
$(document).ready(function () {
/* $('#dialog1') this is JQUI code
.dialog({
position: 'center',
modal: true,
autoOpen: false
})
;*/
$('.panier')
.unbind('click')
.click(function (event) {
event.preventDefault();
//$('#dialog1').dialog('open');
$.mobile.changePage('#dialog1');
});
});
There is also a popup widget for JQM that is in development (and has been for a little while now).
You may also be interested in the simple dialog plug in for JQM.
Hey there, total javascript noob here. Just wondering, I've set up some buttons inside ul tags using jquery selectable, which change colour when I click on them. One problem though, how do I make one of them select on the load of the page?
Thanks!
edit: here's my code:
<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
setLink('single');
$('#target').load($('#single a:first').attr('href'));
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
</script>
<style type="text/css">
#selectable .ui-selecting {
background-image:url(../images/nav-li-bcg.png);
}
#selectable .ui-selected {
background-image:url(../images/nav-li-bcg.png);
}
</style>
<script>
$(document).ready(function() {
$("#selectable").selectable();
$document.getElementById('current1').click();
});
</script>
</head>
<body>
<div id="tabs">
<div id="navigation">
<div id="single">
<div class="anchor1">
<ul id="selectable">
<li class="current1" id="current1"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li></ul>
</div>
<div class="clear"></div></div></div><!-- navigation -->
<div class="info">
<div class="top"></div>
<div id="target">
</div>
Simulate a click on document ready?
$(document).ready(function() {
$(".selectable .buttonSelector:first").click();
});
$('#myListItem').addClass('ui-selected');
I tried add click function on item, but seems that does not work correctly.
$(document).ready(function(){
$("#vibrateBtn").click(function() {
window.alert('test');
});
});
I tried also disable Ajax loading, with>
$(document).bind("mobileinit", function(){
ajaxEnabled:false;
});
But with same result.
Where can be problem please?
Thanks for any advice.
in jquery mobile document.ready() doesn't work and use .live to bind the click event instead of using the short hard .click().
There are other event like pagebeforecreate, pagecreate. check the jquery demo for the list of event.
$(document).live('pageshow',function(){
$("#vibrateBtn").live('click',function() {
window.alert('test');
});
});
Please try this code
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>