Jquery datatables pagination issue - javascript

So I have a map defined where there are two tables as an example. When you click on one item in the first table, it will highlight the corresponding related item/row on the second table. The issue I am facing is that I have added Pagination on these tables. So lets say when I select an item in table 1 and if it corresponds to an item in table 2 which is on page 2, when I click on page 2 on the second table, it loses the highlight.
Now I have the function which essentially has the objects which I care about but I feel I am missing the right jquery function (onclick/something else??) that I need to call.
ForEg: Lets say I pass the information during the below function. What happens is that the below function works when I click on the current page twice. i.e. Once to go to page and second when I am on that page.
Scenario:
Click on item in table1 (that corresponds to item in table 2 on page 3)
Click on button 3 to view the corresponding page (Ideally the below function should have been called but it doesn’t)
Click on button 3 again and the below function gets called.
jquery(function1 + ‘ .page_button.current’).on(‘click’, function(e){
console.log(“Entering here”)
});
I want it to be called when I go to that page for the first time.
Can anyone please help me with what I am doing wrong. What function do I need to use apart from this ‘click’ which would help?

Related

Preventing Apex Button Double click

Hi I have a button that inserts empty records into an interactive grid. I want to prevent the user from being able to double click that button because it populates duplicate rows. I have a server side argument that says if there are rows the button does not appear however they are still able to double click the Populate_tables button before it vanishes. If there are any other solutions to this please sound off. I've tried everything from javascript to server-side but they are still able to double click no matter what. Here are the before and after pictures of the table.
$('#btnPopulateTbl').dblclick(function(e){
e.preventDefault();
});
The above code prevents the double click for a button. This is in jQuery.
Oracle Apex does not offer this functionality as a setting or etc.
However you can use
$('#button').click(function(event) {
if(!event.detail || event.detail == 1){
// This will be executed once even user clicks multiple times
}
});
Note that your selector must be the id or the class you provide to this button.
By default 'add row' button's classes are:
class="a-Button a-Toolbar-item js-actionButton"
Another solution would be to have apex handle this. Suppose this is on page 1.
Create a page item P1_POPULATE_ROWS_CLICKED with a default value of 'N'
In the page process that populates the table, add the following line before the actual load:
:P1_POPULATE_ROWS_CLICKED := 'Y';
Add a condition to the page process that populates the table of "Item not equal to value", P1_POPULATE_ROWS_CLICKED , Y
Yet another solution is to only execute the insert statement if no rows exist with that condition yet. I can't show you how to do it because you didn't show how the table is populated but happy to do so if you edit your question. This last option is propably the most suitable.

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

Index of list item clicked does not reset

On a fresh page load, the code works just fine and will display the correct information, but if you navigate backwards and try again, it displays the information from the first click. First off, here is the code and I will explain what I have...
$(document).on('pageinit', '#months', function(){
$('#listOfHolidays').on('click', 'li', function () {
listIndex = $(this).index();
$.mobile.changePage('#detail');
});
});
$(document).on('pageinit', '#detail', function(){
console.log(listIndex);
$('#ho').text(holidayNames[listIndex]);
$('#hi').text('The index of the list item clicked is: ' + listIndex);
});
I have 2 pages (divs with data-role="page") named #months, which is the one containing my list of items to select from, and #detail which is a page that I want to populate based on the user's choice from the list. The id for my listview is #listOfHolidays and the array which holds the values of each item in the list is called holidayNames. I then display this basic info in the detail page in divs called #hi and #ho (some of this will be changed, I am just trying to test my way out of this problem). I have a back button enabled in the header of detail also.
Like I said, when I load this fresh, the correct holiday name and index number show up in my detail page, but when I use the back button to navigate back and try again, it populates the detail page with the same info from the first click.
I would assume this is because jquery is initializing the detail page in the second $(document).on() function with 'pageinit' and since it is initialized with the first index and holiday name I choose, it just doesn't need to initialize again and draws the data from the first request when I click another list item.
That is my vague understanding of what is going on, so please correct me where I'm wrong and guide me in the right direction!
Thanks!
The 'pageinit' event only fires when the page is introduced to the DOM. Thus the code you have bound to replace the holiday text with the new one, only fires on the original click. The next few clicks do not cause that function to fire.
If you bind to the 'pagebeforeshow' then it will trigger everytime you change pages and you can bind the same function there and it should work correctly.
$(document).on('pagebeforeshow', '#detail', function () {
console.log(listIndex);
$('#ho').text(holidayNames[listIndex]);
$('#hi').text('The index of the list item clicked is: ' + listIndex);
});
I removed some things to simplify the example.
JSFiddle example

Javascript - getting all links in specific DIV elements in a class on a HTML page and creating an array

I am trying to create an automation to perform some action to a HTML page. This page contains a complex table wit a lot of divs inside divs. Every line of this page is clickable and will open another page. I have already created the automation that will perform tasks on this page that opens, but I need to automate clicking on every line on this first table first.
Analyzing the first column of this page, I have this Xpath for the first 3 cells of the first colum:
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[3]/DIV[1]/DIV[2]
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[4]/DIV[1]/DIV[2]
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[5]/DIV[1]/DIV[2]
and this for the last cell of the first column:
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[102]/DIV[1]/DIV[2]
You can see that there's just one element varying from 3 to 102.
All cells in the first column have this HTML
<div style="float:left;" class="ajaxListColumn ajaxListColumnInternal ajaxListColumn_2 ajaxListSearchable ajaxListRowDivActionable ajaxListRowDivColumnActionItem default-to-first-column">
<span class="left">Item 1</span>
</div>
what varies from cell to cell on the first column is this Item 1, 2, 3, etc...
What I need is, to create an array of elements, so I can click them with Javascript and then perform the automation I already have on each page that will open for each click on a line of this table. How do I get this array? Thanks.
I am not sure what other informations you guys need to answer this. Please ask me and I will post here.
If you just want an XPath which will select all those rows, just take your second example and remove the "[102]".
Here: ↓
/HTML[1]/BODY[1]...blah blah.../DIV[2]/SPAN[1]/UL[1]/LI/DIV[1]/DIV[2]
This will select all those LI elements.
I will update this answer if I've got the wrong end of the stick.

How to remember the previous sorting order in jQuery Table sorting

I'm using jQuery for sorting the tables.
I open a page and click a columns to sort in desc or asc order and in the same page I click on a sub link to view some related data. Then I click back and come back to my same page (page1). At that moment the sorting which i did before I click the sub link is not there. I want the sorting to be remembered when I click the back button.
Example:
Page1 has column names as : Id, Name, Total_Marks. (Here Total_Marks have a link which opens a page for detailed marks(page2). The page2 has a back button which will redirect to page1.)
Step 1 : I sort the Name column in descending order.
Step 2 : I click on the Total_Marks link and navigate to next page for detailed report.
Step 3 : Now Im coming back to page1 by clicking the back button link.
Now the table in the page1 should be sorted by Name in descending order. (As i did before leaving the page1 to page2)
Is there a solution for this?
One option is to display your page of related data in a jQuery UI .dialog() instead of on a separate page. Then the user, instead of clicking the back button, simply dismisses the jQ dialog. The underlying page has not changed. This may be much easier than setting up a structure to maintain state: obtain it in $(document).ready(), update it on every change in sort order, etc.

Categories

Resources