Ref: Tablesorter
Issue: expand-child element remains visible when select page number clicked
Hi
The problem I'm facing is best described in steps
1.) I have nested tables inside a parent table
2.) I'm using the 'toggle' class on a tr followed by a tr with the class 'expand-child' (structural association) - jquery hides all nested tr's onload
3.) If the hidden tr (expand-child) is clicked open and the outer parent table's (holding the nested table) 'select page number' is clicked the 'expand-child' tr remains open while it's associated toggle tr has moved onto the previous page
I need to pass the associated expand-child tr to the previous page so it can be with it's associated toggle tr so that it too is not visible until the page it's on is in focus
Many thanks
I think the easiest solution would be to hide all child rows after the pager page changes. Try something like this (demo):
$('.tablesorter').on('pageMoved', function(){
$(this).find('.expand-child td').hide();
});
Related
I'm using PagedFilterTable in Vaadin to manage pagination. When loading default page, I have set something like this - and I include sorting by some field:
if(this.sortField != null){
table.setSortContainerPropertyId(this.sortField);
table.setColumnWidth(this.sortField, 80);
table.setSortAscending(true);
table.sort();
}
So that happens when the page is loaded and that is fine. After I submit new entry (entries are being added through new, popup window), table gets new row, but the table loses it's sort order in view after popup closes, so sorting is no longer keeped. Problem is I do not know how to get to that table element from that popup window and set sorting again. Why table is being updated and I see it, and sort doesen't? Problem is bigger because I have both windows in separate files and seems to me I can't grab table element easily without modifiying the logic because I am in another window.
How to reload table so that the sort stays same?
I managed to do this after submit:
getUI().getPage().reload();
With that it works, but I am not satisfied. After that line of code, everything reloads again (meaning all queries execute again). Result is good but I don't want after submit whole reloading of page happens (also because none of my other buttons do reload). So I would like only to reload table in parent window.
How can I grab table object from outside window and for example set it's change to immediate and correct change?
Something like this I suppose needs to be written:
getParent().getUI().setImmediate(true);
?
Or better question, how to manage to table sort remains the same after inserting new entry through new window?
I managed to solve it. On the parent window in the windowCloseListener I just added:
myTable.refreshTable(data);
myTable.sortTable(); // my custom method that was Invoked on the page load too
So I have a listview with multiple items, so when each item is clicked it will go to a detail page, but how do I fill out the detail view with dynamic contents? Specifically, how do I capture the key, which is the clicked item's inner html, and when I query some dynamic contents, how do I put them in the detail view? The methods I tried include 1) use click event for each item, but the event does not trigger, is that normal? 2) I tried the live event on the detail view page with pagebeforeshow, but it does not trigger either. Please help.
Many approaches exist to do this. Here is one idea that may help you:
In your listview, specify a data ID for each of the hyperlinks in the list item. The definitions could look like:
<li><a data-id="some-identifier">My Title</a></li>
For all the items the <li> items in the list, you then have a single click handler, which would use the data-id to initialize the detail page. The click handler would look something like this (my apologies if this is out of data, I have not recently used jQuery Mobile, so there may be an updated, better approach):
$('#my-listview-id').delegate('a', 'vclick', function () {
alert ('user selected something: ' + $(this).attr('data-id'));
});
The alert will show you the ID the user selected. So in the click handler you can update the detail page.
I'm starting with jQuery mobile and have some problems with my buttons.
The web application is a shopping list. It displays a list of items to shop and in the footer buttons on actions I can perform on the items.
The actions are:
increment number of items to buy
decrements number of items to buy
move item up in list
move item down in list
add new item
delete item
modify item text description
The actions are implemented in javascript and works fine. The problems I have is with controlling the buttons and the associated actions.
By experience, I have see that for the increment and decrement it is more convenient to have a button with an active state, for the other operations it is preferable to have a selected item and apply the action on the selected item when the button is pressed. When adding an item, the item would be inserted before the selected item, and if pressed when no item is selected, the new item is appended to the list.
I would also like to have 2 modes. In one mode, only the increment and decrement buttons are shown and the user can update the number of items in its list. In the other mode the user is modifying its list. It is in the second mode that the selected item is required.
I managed to associate a default action my item lists by using the .on() method as a delegate.
$('#itemList').on( "click", ".item", function(evt)
{ ctrl.doAction($(evt.currentTarget)); });
Here is the html code I use to test the first mode.
<!-- footer -->
<div data-role="footer" data-position="fixed" class="ui-bar" id="btnBar" >
Plus
Minus
</div>
<!-- /footer -->
What should I put as href value ? I don't want the page to be reloaded. In some examples I see "#".
This is how I associate the action to the button:
$('#btnPlus').on( "tap", function(evt)
{ ctrl.doAction = ctrl.increment; });
Another problem I have is that there is no feedback on the button click action. When I click a button I would expect to have it highlighted for a short time. This doesn't happen.
The browsers have also different behaviors. In firefox, the clicked button gets a blue halo apparently showing that it has the focus. But the button isn't displayed as active.
If I put "#!" as href (don't know what it means) on Android, the clicked button is shown active.
Should I use click or tap as event type ? How could I write click or tap ?
How could I implement a two state button displayed as active and inactive ?
How is an action button used : always displayed inactive and feedback when pressed ?
I solved the problem my self.
to switch between sets of buttons in the footer, I create multiple footers in my HTML document with style="display:none" in the hidden footers. The one without this will be shown. I assigned a specific id to each footer so that I can write $("#footer1").hide(); $("#footer2").show();
I have buttons to switch between footers. The footer switching event handler must be called with the "mouseup" event. This is required for it to work on the iPad and Android phones.
To change appearance, don't use .button() as suggested here. Use:
$("#myButton")
.removeClass( "ui-btn-up-a ui-btn-down-a ui-btn-hover-a" )
.addClass("ui-btn-up-b")
.attr( "data-theme", "b" );
Note: There was a bug in my code which caused desperate hair pulling
I m using a Ajax Tab panel in my application.
There are 4 tabs on Left hand side and a partial view on right hand side.
In each of these tab I m displaying some data and there is a select link button on each tab.
when I click on any of the select link button I m filling the partial view with some information.
When this happens my view is completly loaded again.
A B C D
eg these are the tabs.
let us suppose that I m on tab B and now when I click on the select link button My view is completly loaded with information.
but the tab loose the focus at this point. I comes back to the default value.
so I want help on this
1) either I have to refresh only the partial view without loading the complete page
2) or I need to maintain active tab index value on click on select link button
Please help me with this problem
and provide me examples
jQuery Tabs - Load contents only when clicked
Here is the example which loading content of the tabs dynamically by Ajax. It is for PHP what you need to change is put controller/action instead of URL of the PHP page.
$.get("controller/action", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml");
or else instead of Ajax.ActionLink
use <a onclick="LoadTab(#item.ID)">Item #item.ID</a>
and jquery function to change the tab and load data dyanamicaly
function LoadTab(id){
//Change tab here Ex: $('#tabs').tabs('select', index);
$.get('ajax/test.html', {Id, id},function(data) {
$('#Partial_Controller_Name').html(data);
});
}
Write an ajax call on click event of tab and load the partial view in the container of the tab
This can be done using RjsResult class
if using mvc1 u can use RjsResult.cs
by this..you can update as many div you want in a page...
use this for implementation
public ActionResult Some_Method(){
RjsResult r = new RjsResult();
ViewData["SomeData"] = Some_Function();
r.update("DIV_id","PartialPagePath",ViewData,ControllerContext);
return r;
}
so when you click on somethink..this function will be implemnted and will refresh you div with tht partial
View part
<div id="DIV_id"></div>
you can update as many dv as you want with a single click :)
I have a page that's like a discussion where you can make posts and reply to those posts. When there are more than 2 replies, I show the two most recent ones and hide the rest by default. There's a button that will let you expand/collapse the extra replies that uses jQuery's slideToggle function. It's operating on an unordered list of tables, where each table contains the comment along with the user's name and some other info.
Here's the problem: While the tables are actually sliding up or down, the first table in the list looks like its width has been set to auto, so it shrinks. Once it's done sliding, the formatting looks fine; it's just during the actual sliding that this happens. I'm assuming it's being set to 'display:block' or something during the slide but I don't know that for sure.
Is there a way to control what the display type is during the animation?
//this is what happens when you click the 'View all X replies' or 'Hide replies' button
$(".expandOverflow").click(function()
{
$(".overflowlist" + overflowListTarget).slideToggle(16000/*, function(){$(this).css('display', 'inline');}*/);
});