I have a fixed header on my jQuery mobile project that is set to data-tap-toggle="true".
<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-visible-on-page-show="false" data-tap-toggle="true">
<h1>My Title</h1>
</div><!-- /header -->
The header correctly toggles when tapping on the screen. The problem is that when I tap on a link to open a panel, the header also displays.
Test
Here's my panel:
<div data-role="panel" id="mypanel" data-position="right" data-display="overlay" data-theme="b">
<div class="ui-panel-inner">
<p>Content</p>
</div>
</div><!-- /panel -->
I've tried to blacklist the panel button like so:
$( document ).on( "pageinit", "#demo-page", function() {
$("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggleBlacklist: "a, button, input, select, textarea" });
});
I've also tried to create my own click event that changes the header tapToggle option to false as well as opening only the panel.
$('#panel_link').on('click', function (event) {
$("[data-role=header]").fixedtoolbar( "option", "tapToggle", false );
alert('test');
$( "#mypanel" ).panel( "open" );
event.stopPropagation();
});
try this:
$('#panel_link').on('click', function (event) {
$( "#mypanel" ).panel( "open" );
event.stopImmediatePropagation();
});
See the difference between stopPropagation and stopImmediatePropagation jquery: stopPropagation vs stopImmediatePropagation
Related
Solution Here: http://jsfiddle.net/lookitstony/24hups0e/6/
Crimson's comment lead me to a solution.
I am having an issue with KO and the Jquery UI dialog. The dialogs are not being destroyed with the template that loaded them.
I was previously storing an instance of the dialog and reusing it over and over without using the binding handler. After reading a few posts about the included binding handler I felt perhaps that was the best way to handle the dialogs. Am I using knockout wrong? Should I stick with the stored reference or does KO have a better way to handle this? If this was an SPA, how would I manage this if I was swapping between pages that may or may not have these dialogs?
You can witness this behaviour by checking out my example here: http://jsfiddle.net/lookitstony/24hups0e/2/
JAVASCRIPT
(function () {
ko.bindingHandlers.dialog = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
setTimeout(function () {
options.close = function () {
allBindingsAccessor().dialogVisible(false);
};
$(element).dialog(options);
}, 0);
//handle disposal (not strictly necessary in this scenario)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).dialog("destroy");
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
$el = $(element),
dialog = $el.data("uiDialog") || $el.data("dialog");
//don't call open/close before initilization
if (dialog) {
$el.dialog(shouldBeOpen ? "open" : "close");
}
}
}
})();
$(function () {
var vm = {
open: ko.observable(false),
content: ko.observable('Nothing to see here...'),
templateOne: ko.observable(true),
templateTwo: ko.observable(false),
templateOneHasDialog: ko.observable(true),
showOne: function(){
this.templateTwo(false);
this.templateOne(true);
},
showTwo: function(){
this.templateOne(false);
this.templateTwo(true);
},
diagOpt: {
autoOpen: false,
position: "center",
modal: true,
draggable: true,
width: 'auto'
},
openDialog: function () {
if(this.templateOneHasDialog()){
this.content('Dialog opened!');
this.open(open);
} else {
this.content('No Dialog Available');
}
}
}
ko.applyBindings(vm);
});
HTML
<div id='ContentContainer'>
Experience Multiple Dialogs
<ul>
<li>Click "Open Dialog"</li>
<li>Move the dialog out of the center and notice only 1 dialog</li>
<li>Close Dialog</li>
<li>Now click "One" and "Two" buttons back and forth a few times</li>
<li>Now click "Open Dialog"</li>
<li>Move the dialog and observe the multiple dialogs</li>
</ul>
<button data-bind="click:showOne">One</button>
<button data-bind="click:showTwo">Two</button>
<!-- ko if: templateOne -->
<div data-bind="template:{name:'template-one'}"></div>
<!-- /ko -->
<!-- ko if: templateTwo -->
<div data-bind="template:{name:'template-two'}"></div>
<!-- /ko -->
</div>
<script type="text/html" id="template-one">
<h3>Template #1</h3>
<p data-bind="text:content"></p>
<div><input type= "checkbox" data-bind="checked:templateOneHasDialog" /> Has Dialog </div>
<button data-bind="click:openDialog">Open Dialog</button>
<!-- ko if: templateOneHasDialog -->
<div style="display:none" data-bind="dialog:diagOpt, dialogVisible:open">
The Amazing Dialog!
</div>
<!-- /ko -->
</script>
<script type="text/html" id="template-two">
Template #2
</script>
When using dialog inside template the init method will be called every time when the template is shown and hence multiple dialogs are appeared in your case. To resolve this place the dialog outside the template.
<div style="display:none" data-bind="dialog:diagOpt, dialogVisible:open">
The Amazing Dialog!
</div>
Place this outside the template and now the issue will be resolved.
Updated fiddle: Fiddle
Edit: I went through your code and found that the ko.utils.domNodeDisposal.addDisposeCallback has not been triggered in your case. And hence the dialog has not been destroyed on template change which in returns shows multiple dialog.
But why ko.utils.domNodeDisposal.addDisposeCallback has not called?
The ko.utils.domNodeDisposal.addDisposeCallback will be triggered when the element(rendered using custom binding) in the template is removed from DOM. But in your case, the dialog element is appended to the body instead of template and so it was not triggered
Solution
The jquery ui 1.10.0+ have option to specify where the dialog element has to be appended using appendTo option we can use that to resolve this.
diagOpt: {
autoOpen: false,
position: "center",
modal: true,
draggable: true,
width: 'auto',
appendTo: "#DesiredDivID"
},
<script type="text/html" id="template-one">
<h3>Template #1</h3>
<p data-bind="text:content"></p>
<div><input type= "checkbox" data-bind="checked:templateOneHasDialog" /> Has Dialog </div>
<button data-bind="click:openDialog">Open Dialog</button>
<!-- ko if: templateOneHasDialog -->
<div id="DesiredDivID"></div>
<div id="dlg" data-bind="dialog:diagOpt, dialogVisible:open">
The Amazing Dialog!
</div>
<!-- /ko -->
</script>
Now the dialog element will be appended to the #DesiredDivID and destroyed on template change.
See the updated fiddle: Updated one-April-1
Need help of fresh eye. Trying to position to the element. Not working, positioning to window. Testing on Safari as far as on Firefox.
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" class="todo-listview ui-listview">
<li data-row-id="1" class="outstanding ui-li-has-alt ui-first-child">
$(document).on('taphold', '.todo-listview a', function() {
console.log("DEBUG - Go popup");
var link_name = $(this).attr('data-view-id');
var $popUp = $("<div/>").popup({
dismissible: true,
theme: "b",
transition: "pop",
positionTo: '#link_name'
}).on("popupafterclose", function () {
//remove the popup when closing
$(this).remove();
});
$("<p/>", {
text: "Test!"
}).appendTo($popUp);
$popUp.popup('open').trigger("create");
});
Thank you for your time. It works indeed.
2 problems:
change positionTo: '#link_name' to positionTo: '#' +link_name
You then need to set the ID of the li <li data-row-id="1" id="1"...
Here is a DEMO
I'm trying to add an additional class to my jQuery dialog with the dialogClass property. Here's the javascript:
$(function(){
$( "#toogleMAmaximized" ).dialog({
title: 'Missions and Achivments',
autoOpen: false,
height: 500,
width: 700,
modal: true,
dialogClass: 'noPadding',
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
})
$( "#toogleMAminimized" ).click(function() {
$( "#toogleMAmaximized" ).dialog( "open" );
$( "#toogleMAmaximized" ).dialog({dialogClass:'noPadding'});
});
})
<div id="toogleMAminimized" style="" class="noPadding">
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div>
</div>
Just in case you need it, my html code
<div id="toogleMAmaximized" >
<div id="missions">
<div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone"> </div>
</div>
<div id="achivments">
<div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done"> </div>
</div>
</div>
As you can see, I've tried to add the class in many ways, I've tried all possible combinations but keep getting the same result: no noPadding class
Your noPadding class is being added successfully to the dialog. I have confirmed this by placing your markup and scripts within a fiddle, and loading jQuery UI 1.8.16 (the version you were testing with). This test is available online at http://jsfiddle.net/QHJKm/3/.
I suspect the confusion here is with the expected effect noPadding is going to have on the dialog itself. It could be that you interpreted its lack of effect as an indication it wasn't added to begin with. As you'll note in my example, I've got with a rather bold style, a red background. This quickly confirms that the class is indeed being added to the dialog.
I'd like to pop up a dialog that is not full screen, i.e., it "floats" above the page which opened it. Here is what I am trying:
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1">Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'
style='width:200px; height:100px; top:100px; left:100px;'>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Button1.onclick = function() {
//$.mobile.changePage($('#Dialog'))
$.mobile.changePage('#Dialog',{role:'dialog'})
}
Button2.onclick = function() {
$(".ui-dialog").dialog("close");
}
Even though I set the bounds on Dialog's div, it is still full screen.
Here's what I came up with (after some great hints from Jasper):
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1" >Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'>
<div data-role='header'id='Dialog_header'><h1>Dialog</h1></div>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Dialog_header.onclick= function(e){
$("#Dialog").fadeOut(500);
}
Button1.onclick = function(e) {
var $dialog=$("#Dialog");
if (!$dialog.hasClass('ui-dialog'))
{$dialog.page()};
$dialog.fadeIn(500);
}
Button2.onclick = function() {
$("#Dialog").fadeOut(500);
}
Button2 is a bonus: it shows how to close the dialog from code.
You can fiddle with it here:
http://jsfiddle.net/ghenne/Y5XVm/1/
You can force a width on the dialog like this:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
}
Notice I also removed the background so the dialog can appear on top of the other page. The only problem that remains is that when you navigate to the dialog, the other page is hidden so the dialog appears on top of a white background.
Here is a demo: http://jsfiddle.net/jasper/TTMLN/
This is a starting point for you, I think the best way to create your own popup is to manually show/hide the dialog so jQuery Mobile doesn't hide the old page.
Update
You can certainly use a dialog as a popup with a small amount of custom coding:
$(document).delegate('#dialog-link', 'click', function () {
var $dialog = $('#dialog');
if (!$dialog.hasClass('ui-dialog')) {
$dialog.page();
}
$dialog.fadeIn(500);
return false;
});
Where dialog-link is the ID of the link that opens the dialog as a popup.
Here is a slight update to the CSS to center the modal horizontally:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
left : 50% !important;
margin-left : -37.5% !important;
}
And here is a demo: http://jsfiddle.net/jasper/TTMLN/1/
here is a plugin that u can use..this plugin is also customizable with ur own html.
simpleDialogue plugin for jquery mobile
I would like to do the following:
1. tab-1 is selected when page load at first time
2. After clicking tab-2, form is submitted and page need to stay on the tab-2
I have tested two code snippets. However, both of them have errors (see at below):
<form id="target">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
<li>Tab-3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</form>
code 1-
It works with point2 and doesn't work with point 1
<script>
$(function() {
var $tabs = $('#tabs').tabs();
$tabs.tabs( "option", "selected", 1 );
$('#tabs-B').click(function() {
$('#target').submit();
});
});
</script>
code 2-
It works with point1, but form doesn't submit after clicking tab-2
var $tabs = $('#tabs').tabs();
$('#tabs-B').click(function() {
$('#target').submit(function() {
$tabs.tabs( "option", "selected", 1 );
});
});
use the [select][1] method
$( "#tabs" ).tabs({
select: function(event, ui) {
var data = $("#from1").serialize();
console.log(data);
// submit the for via ajax here
/*$.post("/path",{data:data},function(){
//clear the form fields or what ever you want to do
});*/
}
});
http://jsfiddle.net/5RMxZ/16/