I'm adding rows to a split listview with jQm, and I can only get the first row (not dynamically added) to trigger a click event. I assume there's a refresh function somewhere that I need to call, but I can't figure out what - I'm already refreshing the listview, which I expected to solve it...
Here's the fiddle:
http://jsfiddle.net/z36fy/1/
and here's the code:
<ul data-role="listview" data-split-icon="minus" id="list">
<li>
Item Description
remove
</li>
</ul>
Add item
JS:
var itemcount=1;
$('#addbtn').click(function() {
var addstr = '<li>Item Description '+itemcount+'remove</li></ul>';
$('#list').append(addstr);
$('#list').listview();
$('#list').listview('refresh');
itemcount++;
});
$('#list a.ui-li-link-alt').on("click",function() {
alert('delbtn clicked');
});
What am I missing?
Because you are dynamically adding DOM elements, you can't bind ahead of time. Instead use event delegation (https://learn.jquery.com/events/event-delegation/):
$('#list').on("click", ".delbtn", function() {
alert('delbtn clicked');
});
This says bind the click event to any items with class delbtn within the list even if they don't exist yet.
Updated FIDDLE
Related
I'm trying to load dynamic pages with jQuery, following this example.
(EDIT): Updated the code to provide a better view of the context
Here is a code sample
<div data-role="page" id="pageSample">
<div data-role="header">title</div>
<div data-role="content">
<a href="#home" data-role="button" data-transition="slide" data-direction='reverse'>Home</a>
</div>
<div data-role="footer">Footer</div>
</div>
$(document).bind( "pagebeforechange", function( e, data ) {
// Generate dynamic content of targeted pages...
$.mobile.changePage($(page), {
transition:"slide",
dataUrl:url,
reverse:reverse
});
});
The back button may be dynamically generated or not (such as this snippet). In both cases, it does not work reverse, as changePage is triggered through pagebeforechange.
Therefore, I inserted a reverse variable in changePage() options.
I can't find a way to retrieve the data-direction value of the clicked item.
I tried this just before changePage():
reverse = false;
$('a[data-direction="reverse"]').on("click", function(){
reverse = true;
});
But the reverse value is not updated in changePage(). I guess both codes run synchronously.
Is there a way to update the reverse value in changePage() ?
Final update
As per our discussion and your example http://jsfiddle.net/Iris/UZBhx/21/
Change this
$('a').on("click", function()
to
$(document).on("click", 'a', function()
Another update
Binding the $.mobile.changePage to pagebeforechange triggers all your code twice. Thus you lose the value of reverse or it gets neglected when the command executes the first time.
Try binding it to pagebeforehide as below.
$(document).bind( 'pagebeforehide', '[data-role="page"]#PageId', function( e, data ) {
// Generate dynamic content of targeted pages...
$.mobile.changePage($(page), {
transition:"slide",
dataUrl:url,
reverse:reverse
});
});
Update
To use reverse effect on specific buttons, you can follow this method.
First, assign a class for buttons with reverse effect, e.g. ui-reverse and add the below script.
$(document).on('click', '[data-role='button'].ui-reverse', function() {
$.mobile.changePage( url, {
transition:"slide",
reverse: true,
dataUrl:url
});
});
"Back" button links - Jquery Mobile
data-direction="reverse"
Is meant to simply run the backwards version of the transition that will run on that page change, while data-rel="back" makes the link functionally equivalent to the browser's back button and all the standard back button logic applies.
data-rel="back"
This will mimic the back button, going back one history entry and ignoring the anchor's default href.
Adding data-direction="reverse" to a link with data-rel="back" will not reverse the reversed page transition and produce the "normal" version of the transition.
In your case, you want to reverse transition, use the below code.
$.mobile.changePage($(page), {
transition:"slide",
reverse: true, // this will reverse the affect of the transition used in the page.
dataUrl:url
});
Read more about it here.
I have a list of objects. Each object has its own values. On webpage they are presented as rows. What I want to do is to add JQuery dialog that pops up when a link on a specific row is clicked. What is the best way to do that? Is is better to define a dialog in every row or just use one? Problem is I can't reach elements inside dialog to fill them with row data. Is there any good example concerning this? Thank you
Just use one dialog, it should be initially hidden anyway:
<div id="rowDialog" style="display:none">
<div id="rowDialogDiv">in here we are
</div>
<button id="rowDialogButton>Custom button</div>
</div>
initialize dialog, not showing it at first:
$('#rowDialog').dialog({ autoOpen: false });
put in an event handler for the row:
$("tr").click(function(){
var rowClicked = $(this);
$('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
$('#rowDialog").dialog("open");
});
Strongly suggest you give the table and ID and then access the table rows from that for speed and, just in case you have multiple tables etc.
You can also have event handlers for the dialogs elements:
$('#rowDialogButton').click(function(){
//do button stuff
});
something like this maybe?
<div id="myDialog">
<input id="myElementThatICanAccess" />
</div>
The jQuery Code:
$("#myDialog").dialog({
options:....
});
$("tr").click(function(){
$("#myElementThatICanAccess","#myDialog").val($(this).val()); // or whatever value you want
$("#myDialog").dialog('open');
});
I have a table in the following form on a side-panel:
<table>
<tr title='term1'><td>one</td></tr>
<tr title='term2'><td>two</td></tr>
<tr title='term3'><td>three</td></tr>
<tr title='term4'><td>four</td></tr>
</table>
When someone clicks on a row of that column, the title of that row is passed as an argument to a function which displays the search results in the main-panel.
$("#content-display").on('click', 'tr', function (){
searchResults($(this).attr('title'));
});
The title of that row is the search term used in a get request
function searchResults(searchTerm){
$.ajax({
url: "search.php",
data: {term: searchTerm},
success: function(data){
$("#content-display").html(data);
},
dataType: 'html'
});
}
Whenever someone clicks on a row in the table, the new search results replace the old in the #content-display div.
I would like to improve this functionality with jquery ui tabs so that each click on a <tr> element would create a new tab with those search results inside of it instead of replacing the existing search results whenever a new search is done.
How can I write the callback function to the add event so that it would append the dynamically generated content of the search query (search.php?term=dynamicString)?
Here's some sample code of callback function to the add event that adds static content:
var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui){
var tab_content = "testing";
$(ui.panel).append(tab_content);
}
});
You can try this.
jQuery UI Tabs support adding new tabs dynamically (you already added code for this).
It provides "add" method to add new items using AJAX
So, if I do this
$( "#tabs").tabs("add", "filename.php", "Search Heading");
It will load content from "firlename.php" when we click on that tab.
Also, we can select any tab using JavaScript.
$('#tabs').tabs('select', tab_index);
It will select any tab with the specified index.
In your case, I assume these two will fit nicely.
Example code will be :
$( "#tabs").tabs("add", "search.php?term=" + search_var, search_var);
$('#tabs').tabs('select', last_index);
You can try this from Google Chrome developer tools' console by going to this URL
http://jqueryui.com/demos/tabs/manipulation.html
Just add the following code in the console.
$( "#tabs").tabs("add", "collapsible.html", "Collapsible"); $('#tabs').tabs('select', 1);
Please let me know if I am missing something.
Friends, please suggest better solutions if any.
Thanks.
I defined my jQuery tabs like this:
$('#serviceTabs').tabs({
idPrefix: 'ui-subtabs-',
spinner: 'Retrieving data...',
cache: false,
select: function(event, ui) {
if(checkServiceTabs(ui.index))
{
$('#ui-subtabs-'+(currentDetailTab+1)).html(" ");
currentDetailTab = ui.index;
return true;
}
else
return false;
},
collapsible: true
});
Unfortunately after reloading my page the index of my tabs is raised incrementally.
So on first request my TabID's look like:
#ui-subtabs-1, #ui-subtabs-2, #ui-subtabs-3
after reloading my page it looks like:
#ui-subtabs-4, #ui-subtabs-5, #ui-subtabs-6
The side effect is, that the tabs are locked after reload. The select event doesn't work anymore.
FYI: The tabs are in a DIV and merged with $.get function.
So i don't reload the whole page but only the div.
Before the new request I already blank the div with .html(" ") and I also tried
$('#serviceTabs').tabs("destroy");
Does anybody have an idea how to delete the TabID cache ?
Unfortunately, the tabIndex variable from which the TabID is coming from is encapsulated in the anonymous function of the Tabs plugin, making it totally invisible to the outside world. It is only incremented and the plugin offers no method to be able to reset it. Even destroying the instance of the plugin would not help.
On the overview page of the plugin's documentation though, it is specified that the tab containers can be references using the Title attribute of the <a> elements serving as tab buttons.
You would have then this kind of markup for the tab buttons:
<li> ... </li>
This will create tab containers with the title as ID (replacing spaces with underscores):
<div id="My_Tab_1"> ... </div>
You would have then to modify you select method accordingly.
I am using the sortable demo in jquery-ui. I am trying to add an item to the sortable list at runtime, like:
<ul id='panelSortable'>
</ul>
$("#panelSortable").sortable({
distance: '15'
});
function generatePanel() {
var html = "<li>";
html += "<p>hello!</p>";
html += "</li>";
return html;
}
function addPanel() {
var element = $(generatePanel());
element.appendTo("#panelSortable");
element.sortable();
element.disableSelection();
}
the new element gets added to the sortable list ok. I can strangely drag the "p" element though, separately from the parent "li" element (which is also draggable). I want to restrict dragging to just the "li" element.
If I just declare a few "li" items in the page, they all work the normal way, where you can only drag the "li" items, not their "p" child:
<ul id='panelSortable'>
<li><p>I work normally!</p></li>
</ul>
so I must be messing up the calls here to make the "p" elements also draggable?
Thanks
Argh ok you don't need to call sortable() on element, that should just be done on the parent "ul" item it looks like. If you remove that and just add the element as shown above, sorting is enabled on it just fine.
Thanks