Good morning,
It appears that the jQuery UI Layout is resetting my options after a call to sizePane(). When I load the following into FireFox, then click the "Resize" button, the north pane suddenly becomes resizable, and the hotkeys are suddenly enabled again. Am I doing it wrong? Or is this a bug?
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
function documentReady(){
jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
resizable: false
},
center: {
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="jQuery('body').layout().sizePane('north',100);" />
</div>
</body>
OK, I believe I've found the solution. Calling jQuery('body').layout() a second time appears to replace my previous "layout" object with a brand new one, resetting all the options.
The solution is to maintain a reference to the original declaration and operate on that object, like so:
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
var myLayout;
function documentReady(){
myLayout = jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
},
center: {
enableCursorHotkey: false,
closable: false,
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="myLayout.sizePane('north',100);" />
</div>
</body>
</html>
Also, the "resizable: false" options have to be removed because otherwise the call to sizePane() will not have any effect.
You can add this option to pane:
animatePaneSizing: true
Related
I have problem in using ui-grid with components in angularjs version > 1.5. Can someone help me to give me a method to do that? Because I don't use scope and in the documentation of ui-grid is for angular last than 1.5
I tried this code and doesn't show the table with information :
(function(){
'use strict';
angular.module('app', ['ngTouch', 'ui.grid'])
.component('exampleComponent', {
controller: MainController,
controllerAs:'vm',
templateUrl:'index.html',
bindings:{
propertyToBind: '='
},
template: `
<div>
<p>PropertyThatIWantToBindAndShowInComponentInCellTemplate: {{ ctr.propertyToBind }}</p>
</div>
`
});
function MainController($http,$log){
vm.gridOptions = {};
vm.gridOptions.columnDefs = [
{ name: 'ShowScope',
// <example propertyToBind="ValueOfTheProperyThatIWantToShow"></example>
// cellTemplate:'<div title="{{COL_FIELD}}"> {{row.entity.id}} </div>'
//'<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">'
cellTemplate:'<p propertyToBind ="{{row.entity.name }}"></p> '
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
vm.gridOptions.data = data;
});
}
})();
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<example-component>
<div ui-grid="gridOptions" class="grid"></div>
</example-component>
<script src="app.js"></script>
</body>
</html>
The jQUery UI draggables sample named Default says that:
Enable draggable functionality on any DOM element.
But I'm not able to make them work on buttons elements.
I modified the Default sample to look like this:
I just changed the div element to a button one with type="button":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<button type="button" id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</button>
<div class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div>
</body>
</html>
How I can make the draggables functionality work on a button element?
Using cancel: false seems to work for me.
$(function() {
$( "#draggable" ).draggable({
cancel: false
});
});
jsfiddle
I guess without the cancel only the default click event of the button fires and with cancel you prevent the default click event.
From what I read, the $(#selector).dialog("destroy") is supposed to remove all the added jquery ui elements and return the element, the dialog attached to, back to its original DOM position. I wrote a test html and it is not doing either. In firebug, after I clicked close, it simply makes it becomes invisible (display:none). Am I doing something wrong? Below is my test html:
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<style type="text/css">
.modalDialogPopup {
display:none;
border:1px solid #4f8cc5;
}
</style>
<script src="/resources/default/1_0/js/jquery.js?v=081814" type="text/javascript" ></script>
<script src="/resources/default/1_0/js/jquery-ui-1.8.20.custom.min.js?v=081814" type="text/javascript" ></script>
<script>
var testPopUp = {
popUpID : '#testPopUp',
close:
function() {
$(this.popUpID).dialog("close");
},
open:
function() {
$(this.popUpID).dialog({
modal: true,
autoOpen: false,
title: 'Test Outer Pop Up',
dialogClass:'modalDialogPopup',
resizable: true,
close: function( event, ui ) {
$(this.popUpID).dialog( "destroy" );
alert('outer Pop Up Destroyed? '+$(testPopUp.popUpID).attr("class"));
}
});
$(this.popUpID).dialog("open");
}
}
$(document).ready(function() {
});
</script>
</head>
<body>
<div id="OuterDiv">
<a href="javascript:void(0)" onclick="testPopUp.open(); return false;" >Open PopUp</a>
<div id="testPopUp" class="modalDialogPopup">
<div id="testPopUpDiv" style="overflow: auto; display: table;">
<div id="testPopUpContent" >
This is a Pop Up Test
<br/>
<br/>
<a href="javascript:void(0)" onclick="testPopUp.close(); return false;" >Close PopUp</a>
</div>
</div>
</div>
</div>
</body>
</html>
Found two problems that cause the destroy to not working:
1) on this line ==>
close: function( event, ui ) {$(this.popUpID).dialog( "destroy" );
I shouldn't use this.popUpID. It should be testPopUp.popUpID, like below,
close: function( event, ui ) {$(testPopUp.popUpID).dialog( "destroy" );
Once I did that, it starts to remove all the added jquery ui elements. But it still does not put the element (id="testPopUp") back to it's original DOM position, which is resolved after I done #2 below.
2) Change my jquery ui version to jquery-ui-1.10.4.custom.min.js.
Want to implement simple dialog with jquery-mobile on phonegap: http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html
but my LogCat tells me (when I press the button):
05-10 15:02:37.960: V/webview(10536): singleCursorHandlerTouchEvent -getEditableSupport FASLE
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=600; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Prototyp_V.2.0</title>
<link rel="stylesheet" href="js/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="js/jquery.mobile-1.0a3.min.css" type="text/css" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
.ui-page {
background: #ffffff;
}
</style>
</head>
<body onload="init();" id="stage" class="theme">
<script type="text/javascript">
function test() {
alert("test");
$(document).delegate('#simplestring', 'click', function() {
$(this).simpledialog({
'mode' : 'string',
'prompt' : 'What do you say?',
'buttons' : {
'OK': {
click: function () {
$('#dialogoutput').text($('#dialoglink').attr('data-string'));
}
},
'Cancel': {
click: function () { },
icon: "delete",
theme: "c"
}
}
})
})
}
</script>
<div data-role="page" id="id0">
<div data-role="header" data-theme="c">
<h1>Heading</h1>
</div>
<div data-role="content">
<div id="twitter_"><center>Dialog Box</center>
<p>You have entered: <span id="dialogoutput"></span></p>
Open Dialog
</div>
</div>
</body>
</html>
the alert "test" is called, but I always get this cursor event !
What do you mean "cursor event" ? and
use button lik this:
Open Dialog
And
your function should like this
$(document).delegate('#dialoglink, 'click', function() {
/// Your other code goes here
});
use outside the test function
I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this
<script>
//to hide the dialog box on loading
$j(function() {
$j( "#dialog" ).hide();
});
$('.button').click(function(){
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="Basic dialog">
<p>Dialog box</p>
</div>
The button
But the dialog won't open by clicking the link... Everything is included well.
EDIT
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>
Are you referencing jQuery and jQuery ui library? You can autohide when initializing:
$("#dialog").dialog({ autoOpen: false });
$('.button').click(function() {
$('#dialog').dialog('open');
});
Demo: http://jsfiddle.net/pxQ8j/
You can use this code for your purpose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
function myfuncation()
{
// Here is your ajax request to db related work.
var ajaxresponce = "Sucessfully Insert Form";
$('#dialog-message').html(ajaxresponce);
$( "#dialog-message" ).dialog();
}
</script>
Hope it helps you. Please let me know if you have any query.
Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.
Just change your code to do:
$('#dialog').dialog()
If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.
Notification dialog function like alert().
function msgbox(text,buttontext) {
buttontext = buttontext || "OK"
$( "<div>" + text + "</div>" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: buttontext,
click: function() {
$( this ).dialog( "close" );
$(this).remove();
}
}
]
});
}
call function
msgbox("test dialog");
or
msgbox("test dialog", "I agree");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();
function myfuncation()
{
alert("hai");
// Here is your ajax request to db related work.
$( "#test" ).show();
//var ajaxresponce = "Sucessfully Insert Form";
//$('#dialog-message').html(ajaxresponce);
// $( "#dialog-message" ).dialog();
}
</script>