Retaining changes made using Javascript to the page - javascript

I have a page which is having 2 tabs.
On first tab i have a table which contains some 'n' rows.
Each row is having a text box and depending on value entered in that text box, values in other cells for that row are calculated using JavaScript.
Now the problem is whenever i am moving to second tab after updating the text boxes and again coming back to first tab, then the values which are calculated using JavaScript are not retained whereas values entered in text box are retained.
How to retain those calculated values?

I would either re-trigger the javascript that does these calculations in an onblur event handler, or store the calculated values in cookies/session.

You could store this data in a cookie - this type of thing is exactly what they're for.

Related

Getting Updated Value from Input with JQuery

I am writing a page with Jquery / Javascript that dynamically adds rows to a table. The table contains input fields for date and time. There is a button to add a new line and I've been able to write code so that a new line that picks up the previous date and time.
The problem is, if the user changes the value in one of the inputs, an added row doesn't pick up the new, displayed value but the value that was there when the row was first added. E.g. if the row was created with 2015-01-19 and the user changed it to 2015-01-20 then new row doesn't pick up that displayed value but the original value.
I've hunted everywhere and have tried a .on( "change") command but it's not working. Any ideas?

Passing value of select list through Jquery in Oracle Apex 4.2

The following classic report which when we select specific row pops up with new modal region called addExtraDetails with some data grabbed from row and some new additional info required from user:
When (+) is being clicked the new modal region pops up, with populated values taken from the report row. So: in Column link I put:
javascript:function_to_add_to_basket('E',#ID#, 'Extra#ROWNUM#', #PRICE#,'DUMMY');
Then external js function is responsible for passing information. The problem is it does not refresh every time (+) is populated instead it keeps values of the first input.
I found better solution(and cleaner), upon clicking (+) Column Link is passing:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
javascript:$s('P4_SET_TYPE','E');
javascript:$s('P4_SET_OBJECT_ID','#ID#');
javascript:$s('P4_SET_ELEMENT_ID','Extra#ROWNUM#');
javascript:$s('P4_SET_COST','#PRICE#');
javascript:$s('P4_SET_DISCOUNT','DUMMY');
javascript:openModal('addExtraDetails');
Now it updates everytime when we select various rows HOWEVER since we have dropdown javascript grabs all possible value of Quantity column so for this code:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
the output is: '012345678910'.
How can I pass all values to modal region and make it to work with new values every time its being called ?
You need to retrieve the value of the select list when you click the modal button. The value is not static, unlike the other values. The substitution strings are replaced with their value when the page is rendered.
It isn't really necessary to do all those item sets if all you want to do is use them in a javascript function. Your first idea was probably just as good but I'll just run with openModal.
First, determine how to target the select list. You did not specify whether your report is a wizard-generated tabular form or a manual tabular form (ie used apex_item to make the select list). You could either target the select list by the name attribute, which refers to an array, or select by header of the column. Also see this article.
Eg, with the column name for the select list being QUANTITY, selecting the list would be:
td[headers=QUANTITY] select:visible
Alternatively, if you determine the array you can be more precise in targetting the element. Eg if the NAME attribute is set to f02 then you could select the select lists with
input[name=f02]
Then modify the openModal function to select the list value on the same row as pThis - which would be the triggering element, the anchor :
function openModal(pThis, pMethod){
//fetch the value of the select list on the same row
//I use the second method of selecting here
var lListValue = $(pThis).closest('tr').find('input[name=f02]').val();
...
}
You'll also need to adjust your call to openModal:
javascript:openModal(this, 'addExtraDetails');

Cannot pass Array elements to restore a form

I am beginner in JavaScript. For exercise, I try to restore a form (at page closed / page reloaded) using cookies. I take the following steps:
Create an array with form selections
Convert to string
Create cookie
Retrieve cookie
Extract string
Convert to array
... Until here everything goes perfect. But the next step doesn't work anymore...
Pass array values to restore the form elements
Regardless the form selections (present correctly in the retrieved array) after reloading page I get every time only last the radio button checked (even if I increase or reduce the number of buttons) and all checkboxes checked.
I tried anything I know to find the error but no success. I also converted the string "true"/"false" values to Boolean, but no change.
The real situation:
frm[0]=true
frm[1]=false // for two radio buttons
frm[2]=false
frm[3]=false // for two checkboxes
document.getElementById("myradio1").checked=frm[0]
document.getElementById("myradio2").checked=frm[1]
document.getElementById("mycheckbox1").checked=frm[2]
document.getElementById("mycheckbox2").checked=frm[3] // pass the array values to the form elements
But, as I said, any values I pass I always get selected the last radio buttons and all checkboxes.
Probably this code doesn't follow the "best practices" of JavaScript, but before I change it I want to understand why it behaves like this. I thank you in advance for your comments, because I want very much to clarify this issue.
It happens because for a radio button, only one radio button can be clicked in a group of radio buttons.
And for the checkboxes, you are using the same ID twice, so the change isn't actually reflecting on the other checkboxes.

Repositioning pagenumber field in the pager of a jqgrid

I am using jqgrid in my cshtml page. The problem is that the area for grid is narrow, and so I want the page number field in the pager of grid to appear somewhere else in the page near the grid. I need relocating the page number field only, not the pager itself.
The page number field is a part of the pager itself and so cannot be separated from the same. But there is a workaround for this. You can set the variable pginput to false as given on the link . It determines if the input box, where the user can change the number of the requested page, should be available. So on setting false it will not appear to the user. Using the code given below, you can get the current page number of the grid and set into any text box defined by you on the page.
$('#your_grid').getGridParam('page'); // get current page
When user changes the page number, all you need to do is set the page number using code below.
$('#your_grid').setGridParam({page:value}).trigger('reloadGrid'); // set page to grid and reload. value is the page number to be set
This code should be handled within keydown function of the text box defined by you to hold the page number.

jqgrid password field not only in edit mode

I'm trying to implement 2 things:
Adding edittype:'password' to one of my columns so I will be able to see *** instead of the actual value itself. The problem here is that I see *** only when I edit the row, but when I select another row, I save the old row, and disable it from editing mode, but now when it's not an input I can see the actual value - so it's like I never used password input. What do I need to do in order to see the value as password also when I'm not in edit mode??
I want to condition the password column not to be on all rows of this column, is that possible to do? I want to check another value from the row and only if it equals a certain value I want to set the field as password, and if it's not equals to leave it as a regular field. How can this be done?
1) When you select another row and change the old row to disable edit mode, replace all characters in the textbox with a '*' after saving the row. Since it's saved you don't need to maintain the value since it's not an input anymore.
2) use jquery selectors to selectively place the password attribute based on the value of the other row, also selected using a jquery selector. Since it seems like a grid you are working with all cells should have a unique identifier to use for selection.
The conditioning of the column would probably be easiest to set after rendering. Without having more information about the grid layout and specifics about the columns some of this is guess work.

Categories