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
Related
I'm trying to create dynamic dialog, with one input field and with some texts. Problem is, that dialog remembers value of old input fields and is not updating them. I created JSfiddle example of my problem. If you click on <li> element than dialog will come up. There is one input field, that is changing content of <li> element and some pointless text. Problem comes if, when you change content of input field and save it, from this time is stopped being dynamic and become pure static field. I totally don't understand why. PS Sorry for my bad english
HTML
<div id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text
</div>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
JavaScript
$('li').click(function () {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function () {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
},
Storno: function () {
$(this).dialog('close');
}
}
});
jsfiddle
Change the dialog to a <form>, then use its reset() method.
$('li').click(function() {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function() {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
this.reset();
},
Storno: function() {
$(this).dialog('close');
this.reset();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text</form>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
I think you can easily achieve what you want to achieve by setting the input value with the jquery val() method on the input.
Here is what i mean
Change this
$('#xxx').attr("value", $(this).text());
to this
$('#xxx').val($(this).text());
And here is a working jsfiddle http://jsfiddle.net/gzx3z6e5/
I'm using jQuery mobile 1.9.1 min on PhoneGap.
I have a list where each iten on click opens an actions popup:
function showActions(index){
selectedIndex = index;
$("#actionPopup").popup("open", {positionTo: '#list li:nth-child('+ index +')'});
}
<div data-role="popup" id="actionPopup" data-overlay-theme="a">
Close
<ul data-role="listview">
<li data-role="divider">Actions</li>
<li data-icon="false" onclick="showDetails();">action1</li>
<li data-icon="false">action2</li>
<li data-icon="false">action3</li>
<li data-icon="false">action4</li>
</ul>
</div>
When I press on action1 with showDetails() them method is called but the second popup isn't shown.
function showDetails(){
console.log("showDetails");
$("#infoPopup").popup("open");
}
<div data-role="popup" id="infoPopup">
Close
<div id="infoContent">
<table>
<tr id="eventcode">
<td>test1:</td>
<td> </td>
</tr>
<tr id="eventtype">
<td>test2:</td>
<td> </td>
</tr>
</table>
</div>
</div>
What can I do?
My solution
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
var afterClose = function() {
destinationElement.popup("open");
sourceElement.off("popupafterclose", afterClose);
if (onswitched && typeof onswitched === "function"){
onswitched();
}
};
sourceElement.on("popupafterclose", afterClose);
sourceElement.popup("close");
};
I used this simple function for the work-around:
function myPopup(myPage) {
history.back();
setTimeout(function () {
$(myPage).popup('open');
}, 100);
}
#Rakoo has a nice answer. Here is a leaner version:
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
sourceElement.one("popupafterclose", function() {
destinationElement.popup("open")
!onswitched || typeof onswitched !== "function" || onswitched()
}).popup("close")
};
If you don't need the onswitched feature and aren't adding it to $.mobile, It can be this short and simple:
$('#popup1').one("popupafterclose", function(){$('#popup2').popup("open")}).popup("close")
It seems that chaining popups is not possible.
The solution:
$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
popupafterclose: function() {
setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
}
});
});
I used this code to switch popup from popup it works fine.
function switchpop()
{
$( '#popupMenu' ).popup( 'close' );
$( "#popupMenu" ).bind({popupafterclose: function(event, ui)
{
$( "#notes" ).popup( "open" );
}
});
}
After four hours of fighting with this I reduced the problem to this:
This is in a button click function on the first popup
$('#popupCall').popup('close');
window.setTimeout(function () { $('#popupContact').popup('open') }, 50);
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
I am new to jQuery/jQuery UI. I am trying to create multiple tabs in a page(sample.html) which loads dynamic content(temp.html) via ajax. Desired effect is content in temp.html should change according to tab selected. I am using position to place some widgets in positions relative to each other.
The problem I am facing is when i click the first tab, everything is working fine. When i click on the second tab positioning does not work. I have added my code below.
Sample.html
$(function() {
$("#tabs").tabs({
ajaxOptions : {
error : function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab.");
},
cache : false
}
});
});
<div id="content" class="content">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
</div>
</div>
temp.html
#widget1 {
width: 150px;
height: 70px;
top: 20px;
left: 50px
}
#widget2 {
width: 150px;
height: 70px;
}
function resetPositions() {
$("#widget2").position({
my : "left top",
at : "right bottom",
of : "#widget1",
offset : "0 50"
});
}
$(function() {
$(".customAccordion").draggable();
$(".customAccordion").accordion({
collapsible : true,
fillSpace : false,
icons : {
header : "ui-icon-circle-arrow-e",
headerSelected : "ui-icon-circle-arrow-s"
}
});
resetPositions();
});
<div id="widget1" class="customAccordion">
<h3>Widget 1</h3>
<div>Widget 1</div>
</div>
<div id="widget2" class="customAccordion">
<h3>Widget 2</h3>
<div>Widget 2</div>
</div>
Please do let me know if i am making any mistakes.
Possibly a tricky part of jQuery UI, you need to make sure you initialize your accordion(s) BEFORE your tabs
$(".customAccordion").accordion();
$("#tabs").tabs();
Try first to remove your accordion, see if it helps.
Then try to initialize your tabs at the very end.
Then you need to verify loading your html page with AJAX will run its included Javascript... If not, you need to paste that initialization code into the select event of your tabs.
$("#tabs").tabs(
{
select: function(event,ui)
{
// initAccordions();
}
});
I am trying to implement the click of the first item of the selectable list.I can add the CSS
but unable to get the click event working when i try to pre select the first item (I need the click since ,onclick event has an ajax call to populate related information on another div..)
I even tried to use the the trigger method , but couldnt get this working on the fist item on the list. The code is standard stuff.
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<ol>
Jquery function
$(function() {
$( "#selectable" ).bind("mousedown", function (e) {
e.metaKey = false;
}).selectable({
selected: function(event, ui) {
alert("selected");
},
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
I can apply the css to the first list item like this
$('li:first-child').select().addClass("ui-selected");
But i cant get the click function to work (The click would invoke the 'selected' anonymous call back.) Any pointers would be helpful/.
After some trying i managed to get it working.Posting the solution as it may be useful.
I want to simulate the mouse click on the first item on the selectable list.For that we first need to bind
$( "#selectable" ).bind( "selectableselected", function(event, ui) {
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
alert("test");
});
});
Once you do that we need to fire the click.I put this in the create callback which is called as soon as the selectable is formed.
create: function(event, ui) {
setTimeout( function() {
$('li:firstchild').addClass("uiselected").trigger('selectableselected');
}, 100 );
the great thing about Jquery is that its so intutive.