Search jQuery

jQuery Forum

Screen name:
gbar

gbar's Profile

3 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

JQM 1.4 selectmenu widget overlay not set by data-overlay-theme option... always theme "a"
[0Replies]
- 20-Jan-2014 07:03 PM
- Forum: jQuery Mobile
I created an example at http://jsbin.com/IFolanOW/90/edit using the recommended github template. I'm using the new selectmenu widget in jqm 1.4. The issue appears in firefox, chrome As you can see there are several selectmenu widgets on the page. Two (Instruments and Genres) are long enough that they trigger the behavior where the select menu opens as a dialog. They are styled: data-theme='b' data-overlay-theme='b'.... It appears when I inspect that dialog that the body of the dialog page has a class that causes the style of the overlay to always be "a". Setting the data-theme-overlay option on the selectmenu widget per the docs has no effect. What did I do wrong? How can I style the overlay?

JQ Mobile event delegation works with 1.3.2, no longer works with 1.4
[1Reply]
- 23-Dec-2013 05:28 PM
- Forum: jQuery Mobile
Here is a jsbin demo of the problem: with jqm 1.3.1, delegation works when a new button is created. With jqm 1.4.0, newly created buttons no longer fire delegated click events. Just toggle the libraries in the head of the html, to duplicate the issue.

More detail and code samples:

I have a table (#venueTable), the last column of which contains a button that allows users to delete the row (both from the table and from the underlying database via AJAX).

A separate table with one row is used to insert new rows (and records). I then clone the new row and insert it into the main table. I update the data- attribute for each button so I know which row of the database to delete based on that value.

The delete button click is bound using delegation, and with version 1.3.2 of JQM it works as intended: if I click on the delete button in the newly inserted row, it fires my delete function (i.e. the binding is automatically there on newly added buttons).

After I updated to JQM 1.4 the newly added button no longer triggers the event (which is opening a popup, basically). If I refresh the page, the button works fine.

Here is that code block, located inside script tags in the content div of the page (I tried pageshow as well):

$(document).on ( 'pageinit', function(event) {

$("#venueTable tbody").on('click', 'button', function() { // delegated event so that newly inserted rows still have events...
// let the user delete a venue from the system
var vid = $(this).data('idvenue'); // the id of the venue to delete
var thisRow = $(this).closest('tr'); // a reference to the row to remove from the table

// are you sure?
$('#venue_popupDialog').popup('open');

$('#venue_delete_confirm').on('click', function() {
deleteVenue(vid, thisRow);
});

function deleteVenue(vid, thisRow) {
// delete is confirmed, so remove the record.

// call the delete function on the server
jQuery.post('somepage.php', {'delete':'delete', 'vid': vid} , function(data) {
// fade out then remove the row containing this button
thisRow.find('td').fadeOut(1000, function() {thisRow.remove();});

});
}

});

************

... here's the code that massages the "add" button to make it a "delete" button in the newly inserted, cloned row:

// change the add button to a delete button in the new row
$( '#venueTable tbody>tr:last>td:last' )
.html("<button class='deleteButton' data-icon='delete' data-iconpos='notext' data-idvenue='"+vid+"' title='Delete this venue'></button>");
$( '#venueTable tbody>tr:last>td:last button' ).button().button('refresh');

*********

here's a sample of what one of the delete buttons looks like in my html before the page is rendered:

<td><button class='deleteButton' data-icon='delete' data-iconpos='notext' data-idvenue='75' title='Delete this venue'></button></td>

*************

So... did something change about event delegation binding in version 1.4? Or... what am I doing wrong?

I should add that I had to change the way I used the popup as a confirmation dialog also, since that, too, seemed to work differently between versions of JQM. With 1.3.2 code execution pauses while waiting for a user to click to dismiss the popup. In 1.4 the code continues to run, so I had to find a different way to get the user's confirmation.... but I can't see any reason that would change the delegation issue...

I use id attributes, but I namespace them with the page name, so that shouldn't be an issue. And, the events fire correctly using version 1.3.2. But I want to use 1.4 so I can make the table sortable, filterable, and responsive (all of which works amazingly well).

Thanks in advance for any help,

Gene

sortable with <span> causes target placeholder to misbehave
[0Replies]
- 04-Dec-2012 06:33 PM
- Forum: Using jQuery UI
I made some <ul>'s and made them sortable in the usual way. I gave them a common class and connected them so I could move items between the lists.

I wanted to put a label on the lists (e.g. list 1 , list 2, etc.)

I did that by typing text after the opening <ul> tag, and it worked fine.

Then I wanted to style the labels, so I put them in a <span> tag and gave the span a class so I could style them all the same.

That breaks the way the sortable objects work: a target only opens on the fist or last element, and you can't sort the list items anymore. The new placeholder <li> is only created at the top or bottom of the list.

Removing the <span> fixed the issue, but it would be nice to have a good way to label the lists, and style the label.

My workaround was to put the list in a div, set some css on the text of the div, and that passed through to the label I typed in the <ul>.

Took me quite a while to figure out that was the issue, so maybe this will save someone else some headaches.... Here's a demo of the problem. Note that you can't sort items in the list that contains a <span>

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI setList - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<style>
#masterList, .sortList { list-style-type: none; margin: 5px,1px,1px,1px; padding: 1px; width: 25em; float: left;}
#masterList li, .sortList li { margin: 0 1px 1px 2px; padding: 2px; font-size: .75em; height: 1.2em; width: 25em; }
.setLabel {font-size:1em; font-weight:bold; color:#1C94C4; padding-left:.5em; padding-right:.5em; }
.ui-state-highlight { height: 1.2em; line-height: 1em; }

</style>
<script>
$(function() {
$( "#setList1, #setList2" ).sortable({
placeholder: "ui-state-highlight",
connectWith: "ul",
cursor: "move"
}).disableSelection();
$( "#masterList" ).sortable({
placeholder: "ui-state-highlight",
connectWith: "ul",
cursor: "move"
}).disableSelection();
});
</script>
</head>
<body>

<div id='listDiv' style='float:left; margin-top:1em; margin-left:3px; margin-right:15px; width:30%;'>
<ul id="masterList" class="connectedsetList">This works
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>

<div id='setsDiv' style='float:left;'>
<ul id="setList1" class="connectedsetList sortList">This works</ul>
<ul id="setList2" class="connectedsetList sortList"><span class='setLabel'>This doesn't work</span></ul>
</div>
</body>
</html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend