In Primefaces DataTable script to get current page row count WidgetVar.paginator.cfg.rowCount it show all rows count but I need current page row count (i.e) first page 20 records and second as 3 records when I click paginator for 2 second I need result 2 second page row count result 3.
<p:ajax event="page" oncomplete="getRowCount();"/>
This can be done with some small client side jquery javascript where you count the number of <tr> tags in the datatable data <tbody>
Try this
console.log($('#form\\:carTable_data').children());
#form:carTable_data is the full id of the corresponding body in the lazy loading showcase where the id of the datatable is carTable and the data body gets _data appended to it. In jquery the : needs to be escaped with a double backslash if the : is an actual part of the id. Otherwise it is interpreted as a pseudoselector.
Related
I have a select2 element on a create view that has nothing selected initially.
When entering the select2 element, the select2 element fires off a remote ajax call to an endpoint that returns paginated values.
The list of x amount of values is then displayed on the screen for selection within the select2 element.
How would I populate a selected value (single is fine) during a dusk test?
I've tried things like
type('#item-type-id-select','Figures')->
waitForTextIn('#item-type-id-select', 'Figures')->
But I can't seem to get it right.
$output = $browser->script('$("#item_condition_id").select2("trigger","select", {data: { id: "3" }});');
I have a html which has some textboxes and a list. I then added paging for my list but whenever I try to click on the next page for list, it reloads the entire page which then results to an error because the page requires an id that becomes null when the paging is cliked. How do I resolve this? I'm using MVC and razor(cshtml).
provide required id in url so that you can get it on other page
for eg.
http:://localhost/abc.html?id=xyz
I have a ui:repeat of auction items inside a table. It is a regular html table because when you click on a Bid commandLink a row opens right under the selected auction item, and displays a bidding component. The Bid commandLink is using ajax like this:
<f:ajax listener="#{bean.addBidView(lot)}" render="bidView" />
addBidView is updating a map of auctionItems and that's how the correct selected row opens up. When the user clicks on the same Bid link again, the addBidView figures it out and closes the bidding component.
Now let's say the user clicks on several rows, and thus opens several bidding components. They all open, but only one is active. So here's my question: how do I get the entire loop to render when I use the above ajax, so that opening a bidding component would automatically close the other open ones. (the auction items map is reflecting the correct bidding component, but only this one bidding area is rendered, so the others aren't effected. If I'm refreshing the whole page, the display is correct, and the problem only exists when I'm using ajax.)
This is the structure of the elements on the page (all this is inside an h:form:)
<table id="bidstable">
<h:panelGroup id="entireLoop">
<ui:repeat id="repeatAuctionItems" var="auctionItem" varStatus="status" value="#{bean.auctionItems}">
<td>... a bunch of td's with the auction item values ... and then:
<h:commandLink id="bid" rendered="#{some conditions}">
<f:ajax listener="#{bean.addBidView(auctionItem)}" render="bidView"/>
</h:commandLink>
</td>
</ui:repeat>
</h:panelGroup>
</table>
I tried pretty much every combination of elements in the "render" -- for example:
render="bidView bidsTable"
or
render="bidView bidsTable:entireLoop:repeateAuctionItems"
and every other trail I can think of. Nothing works. Any ideas?
You have specified a client ID in the <f:ajax render> attribute which is relative to the current NamingContainer component. Client IDs which do not start with the naming container separator character, which defaults to :, are relative to the current NamingContainer component. The <ui:repeat> is such a component. So the client ID has to refer a child of <ui:repeat>. But the component which you are trying to reference is actually outside the <ui:repeat>. You'd need to reference it with an absolute client ID instead.
To find the absolute client ID, you need to open the page in the browser, rightclick and do View Source and then locate the generated HTML of the closest parent JSF component outside <ui:repeat>, which is in your particular case the <h:panelGroup id="entireLoop">. It'll look something like:
<span id="someId:possiblyOtherId:entireLoop">
Take exactly this client ID and prefix it with : for usage in <f:ajax render>.
<f:ajax ... render=":someId:possiblyOtherId:entireLoop" />
If it contains a dynamically generated ID like j_id_123, then you'd need to give all parent NamingContainer components like <h:form> a fixed ID like <h:form id="someId">.
Note that it is not possible to reference the client ID of a plain HTML element like <table id="bidsTable">. It has to be a fullworthy JSF component like <h:dataTable id="bidsTable">.
I am using jquery 1.6.4 and I have a table. Initially in the table, a user is presented by only one row and a few columns. I, then, let users add as many rows as they would like using by doing this
$('.add').live('click', function(e){
e.preventDefault();
var $parentRow = $(this).parents('tr');
$parentRow.clone().insertAfter($parentRow);
$parentRow.next().find('input').val('');
$(this).replaceWith('-');
});
I also let them delete the rows on fly doing this
$('.delete').live('click', function(e){
alert("removing");
e.preventDefault();
$(this).parents('tr').remove();
});
However now I want the values that they are entering in these columns to be collected. I am not sure how to collect those values when they hit submit button as in my view source all I see is this
<tr>
<td class="actions">+</td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><textarea rows="1"></textarea></td>
</tr>
In the page source it shows only one row where as in my view I definitely see three rows added. Not sure what am I missing and how to get the values
You don't have ids so it will be difficult to tell what you are actually collecting, but to get the values of the inputs, both static and dynamic, you can use this:
//submit code
$('input[type=submit]').click(function(){
$('table input').each(function(index,item){
//for testing you could just output to a div
//$('#output').append($(this).val());
});
});
From what I can tell, your input fields don't have names, so you're not going to get much when submit is pressed.
Also, you won't see DOM updates in your view source. View source will only show you what the page looked like when it first loaded.
To get a live view of the page, you can either use FireBug, for FireFox, or if you're using Google Chrome, there are developer tools under the "View" menu that you can use to see how the html looks live.
I have made a sortable list.
Based on the order of the sortable list i want to insert text into a textarea #notes.
is there anyway I can have text sorted based on the list so even if i change the order. the text in the textarea should change accordingly
eg
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
entry 1 = "this is line 1"
entry 2 = "this is line 2"
I am not sure if i have to use Ajax or something to have this done. since i want each list item to have predefinded text.
I am trying to learn Jquery and would really apprieciate any help.
any hints on how i can have this done.
Question
Where and how do i store these predefined values ?
How to get the text in the text area sorted ?
can someone please point me in the right directions
Maybe write a javascript function to refreshTextarea() that you will use initially to fill the textarea and every time the sorting changes it will "refresh" it by emptying and refilling depending on the sort order of the list.
ok, to associate values with your list items, give your ul an id and your li unique ids
<ul id="the-list">
<li id="item-1">entry 1</li>
...
</ul>
then for each list item, create a hidden input with an id that corresponds in some way
<input type="hidden" id="item-1-data" value="this is where you put info for the list item entry 1" />
Then with jquery you programmatically associate them by looping through your list items and refreshing your textarea after any sort is made.
$('#the-list li').each(function() {
//get the id of the list's data field
var li-data-id = $(this).attr("id") + '-data';
// get the actual data associated with this list item
var li-data = $(li-data-id).val();
// append next list's data in the textarea
$('#id-of-textarea').val($('#id-of-textarea').val() + "\n" + li-data)
}
A textarea is just a blob of text. You'd have to have some way of determining what constitutes a "sortable" line in there. Or regenerate the entire contents anytime the list is changed.