Oracle APEX - passing IG column value to javascript - javascript

I have an IG with a link column where the target is set to URL and I use it to call javascript.
What I want to accomplish is whenever a link column is clicked, grab a value of another - hidden column and set a page item to that value:
javascript:$s('P1_ITEM',#COLUMN2#);alert($v('P1_ITEM'));
but what happens, if I reference COLUMN2 value using just #COLUMN#, I get a javascript error and if I wrap it in single quotes, the value of P1_ITEM literally gets set to #COLUMN2#.

The first thing I would recommend is that you move to a Dynamic Action rather than trying to put all the code in the link. Also, I think buttons are a better than links (and they can be styled to look like links).
Start by going to https://apex.oracle.com/ut. Navigate to Reference > Button Builder and build the button you want. Then copy the value from the Entire Markup field.
Change the Type of the Link column to HTML Expression and paste the HTML from the Button Builder in the HTML Expression field. I styled my button to look like a link (as you had it), added a custom class to the class property named my-button, and added a data-attribute for the primary key value (my table was EMP, so the PK was EMPNO). It looked like this in the end:
<button type="button" class="t-Button t-Button--link my-custom-button" data-id="&EMPNO.">Click me!</button>
Give the Interactive Grid a Static ID value of my-ig.
With that done, create a new Dynamic Action. Set Name to .my-button clicked, Event to Click, Selection Type to jQuery Selector, and jQuery Selector to .my-button. Finally, set Event Scope to Dynamic, which will use event delegation to keep the event binding working if the report refreshes (see this for details).
In the action, set Action to Execute JavaScript Code. Enter the following code in the Code field:
var id = $(this.triggeringElement).data('id');
var model = apex.region('my-ig').call('getViews').grid.model;
var record = model.getRecord(id);
var job = model.getValue(record, 'JOB');
$s('P1_ITEM', job);
alert($v('P1_ITEM'));
This code starts by obtaining the value of the primary key from the data- attribute on the button using jQuery's data method. Next, a reference to the model that is used by the IG is obtained. Then the model's getRecord method is invoked and the primary key value is passed in. Finally, the model's getValue method is used to get the 'JOB' value from the record. I went after the JOB column since I was using the EMP table, but you would go after whatever column you need.
You can learn more about the model methods here:
https://apex.oracle.com/js > Interfaces > Model.

Related

How to make js generated elements interact properly with static html elements?

Js student here.
I have made an example CODEPEN.
In this test case,as you can see in the above code on the right side i have 6 hardcoded html inputs,3 for first name and 3 for last name.
On the left side i have a <button> which is called ADD,and with every click of this button (with a maximum of 3 clicks) the function addInputs() generates a <li>element inside <ol id="originContainer"></ol>.
This generated <li> element contains 2 html inputs,one for the first name and one for the last name,every generated input gets a unique id using a counter variable (var inputscounter=0;).
The goal is to copy dynamically,whatever i type in the generated inputs -to the left- to the hardcoded ones -to the right-,first name to first name,last name to last name,all that by using the function changeValues() which runs with every keyup of the generated inputs.
My problem is,the function changeValues() works fine but only after i generate all 3 of the elements ( As its visualized in THIS picture ) on the left,but not with just one of them,or 2 ( like THIS )
What am i missing ?
When you try to get the value of an element that is not created yet, the function throws an error. That is, in your changeValue function where you try to get the value attribute on FnameX when it is undefined (since it can't find the element in the DOM). Same for adding the click handlers on undefined elements.
You could fix that by either checking if Fname1 etc are defined before you try to get their value.
A nicer approach would be to store in an array which elements you have generated so far. Then loop over those elements and transfer its values.
You can either store an array of ids you can use to find an element when you don't need to access them that often. In this case I would store the objects themselves.
Also you don't have to add click handlers on every element, every time you add one.

How do you access the 'Select All' checkbox?

I've got it set up on my grid so that each individual checkbox selects the object present in that row, and that is working. However, when you click the 'Select All' checkbox that Kendo UI automatically provides when you add a columns.Select() to your grid, it only grabs the object present in the first row.
My initial thought was I could set up an event binding that tied back to the ID of that specific checkbox, but when I tried this, I realized the ID for that checkbox was being randomly generated every time, so this strategy wasn't going to work.
I can't use this.selectedKeyNames() as this doesn't refer to the right object in the current context.
Basically, I'm wondering if there's a better way of accessing that 'Select All' checkbox so I can throw some extra code in to grab every single object I have present in my grid.
You always have the possibility to select an element by it's tag and DOM tree, e.g.:
$('.k-grid input[type="checkbox"]').first()

xpages - how to set a scope variable from client side javascript?

I'm trying to set an XPages scope variable from Client side JavaScript. I have an XPage which contains several sections which are shown or hidden using Dojo. On this XPage I have a button which executes some server side JavaScript. Once the SSJS behind the button executes, the section of the XPage which is visible by default is again visible, rather than the section which was visible immediately prior to the button being clicked. I would like the section which was visible prior to the button being clicked to also be visible after the SSJS behind the button has executed.
To do this I have thought of using a scope variable - use client side JavaScript to calculate which section of the XPage which is currently visible, set this value in a scope variable and read the scope variable in the onClientLoad event of the XPage to again make this section visible (and hide all other sections).
However, I have found no way of setting a scope variable from client side JavaScript. I have tried adding
var xyz = "#{javascript:viewScope.put('sectionDisplay','Section')}"
to the onClick client event of the button but this sets the scope variable regardless of whether the button is clicked or not.
Before XPages, I would have used the querystring to pass variable from one page to another. How can I now do this?
You cannot set the CSJS variable this way: If you add this code to your CSJS, it will be calculated before sent to the browser. That is why the variable is set regardless of a click onto the button.
But you can add some SSJS code to your button which sets the viewScope variable. You can send the value from the browser with a parameter as described here: http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_events_and_partial_or_full_refresh#Run+a+partial+update+from+client+javascript
EDIT:
You can access different parameters with the param object in SSJS. F.e. if you add the parameter value in your CSJS...
XSP.partialRefreshGet( id, {
params: { 'value': 'some string'}
});
... you can access the parameter in SSJS like this:
param.get("value");
Depends on your use case. If you want to set it with partial/full refresh, you can simply put Hidden edit into XP, bind it to anyScope.variable_name and set its value with CSJS:
var field = document.getElementById("#{id:hiddenInput1}");
field.value = "new Value";
Every refresh will submit its value to model and will be available in scoped variable.
Another option is to use event handler anywhere with SSJS to set scoped variable based on hidden input value or submitted value, as stated in Sven's answer.
One other approach: perhaps you don't need the scope variable at all, if you just want to hide something, you can set it's style property to "display:none".
For example, you have this div: <xp:div id="mydiv">...</xp:div>
Then you can use the following CSJS in a button:
dojo.byId("#{id:mydiv}").style.display="none"
XSP.partialRefreshGet( id, {
params: { 'value': 'some string'}
});
... you can access the parameter in SSJS like this:
param.get("value");
I am passing a UNID from a grid to a dialog box. I can get param.get('unid') but I can't get it set to the document datasource unid. So that the fields would populate with values from backend document. There are many fields so I'd like to somehow populate that datasource without having to write values in each field.
How can I get the document datasource to recognize the param.unid? I am trying with a hidden input as you described but the value is not submitted either.
Is that possible?
XSP.partialRefreshGet(dialogId,
{
params: xspParams,
onStart: function(){
//dojo.style(loadingGifId,'display','block');
XSP.getElementById("#{id:inputText1}").innerHTML = unid; //not working
XSP.getElementById("#{id:inputText1}").value = unid; //not working either
},
onComplete: function(){
dijit.byId(dialogId).show();
//dojo.style(loadingGifId,'display','none');
}});
<xp:panel id="dialog">
<input id="inputText1"
value="#{javascript:sessionScope.personUNID;}">
</input>
<xp:this.data>
<xp:dominoDocument var="docPerson" action="editDocument"
formName="fUserName">
<xp:this.documentId><![CDATA[#{javascript:sessionScope.personUNID ;}]]></xp:this.documentId>
</xp:dominoDocument>
</xp:this.data>
<xp:inputText id="cfParams"
value="#{javascript:param.get('unid');}">
</xp:inputText>
</xp:panel>

Binding dynamic select list with asp.net MVC

I have a ViewModel of a form (Name, Address) etc and it's all bound to controls on my page (using Spark engine) - e.g.
!{ Html.DropDownList() }
That works fine. However, there is one DropDownList which is bound that has no values in it to begin with, the values are populated using Ajax (by selecting previous drop downs)
The problem lies when I submit the page and there's a validation error. The page loads and my select list has no values in it (as it hasn't been triggered to get them).
How can I set it up so that the ViewModel knows about values got dynamically so that it can populate the select list on page load?
You'll either need to:
Do this server side by using the Html.DropDownList() call that allows you to pass values in:
Html.DropDownList(string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes)
Or the other way would be to just trigger the same ajax call when the page loads so you don't have duplicated logic.
I'd actually recommend the second way, as it'll keep you from doing the same thing multiple ways, but it does mean that there'
You can add a property of selectlist type in your viewmodel, populate it in constructor, and call it through Html.DropDownList function in your view page. Further since this selectlist is dependent on another list(i.e another property of you viewmodel). in your constructor you can write code like,
say if first listbox is connected to list1 property of type int and allowed values are >0
<code>
if (list1!=0)
{
write code to populate second list based on your first list parameter and also set
the selected value as if selected by the user at submit its stored in the other
property linked to the second list box.
}
</code>
if you are still not clear, write here the concerned code of your viewmodel, and server side database call of your second list, I may help you by editing your code.

RoR + How to refresh Javascript value when Ajax refreshes the textbox value

In my web page, I am using ajax + RoR to refresh the contents of the textbox using searchtool. All the value I am accessing, such like superset value for the current page. Means for example there is headquarter and it has many stations. When I am trying to access the value of headquarter at station then corresponding values changes at textbox.
Here, we are displaying the global value of head-quarter, due to less space I am showing telephone number and its quality on Tool-Tip. When page changes the value of station then whole contents changes but the tooltip remains same.
Sample of code:
<div class="divFloat" id="populate_phone1" onmouseout="UnTip()"
onmouseover='Tip("<%=GlobalPartnersHq.globally_phone_type(#station_hq.is_global_phone1, #station_hq.phone1_type_id) %>")' >
<%=GlobalPartnersHq.global_phone(#station_hq.is_global_phone1, #station_hq.phone1)%>
</div>
How can I refresh the JavaScript onmouseover value when ajax updates the value of textboxes?
I'm not following your code entirely, but it sounds like Ajax is updating the DOM and you want to trigger some additional code. What I recommend is that you emit a custom event and write separate handlers. If you are using jQuery check out trigger docs. You can do something like $.trigger('myEvent') then bind multiple handlers to it (e.g. $('selector').bind('myEvent', function() {});) to update various parts of the page.

Categories

Resources