Develop Reference

Populate page items based off an interactive grid

I am using oracle apex version 22.1 and i'm trying to populate a page item (P617_ROW1) with some client side interactive grid data from some javascript code. So far i've been able to successfully do this through the Selection Change [Interactive Grid] event that triggers this code:
var full_record
model = this.data.model;
if(this.data != null){
if(this.data.selectedRecords[0] != null){
full_record = model.getValue(this.data.selectedRecords[0], 'LIMITTYPE')+ "/" + model.getValue(this.data.selectedRecords[0], 'AMTPERTRANS')+ "/"
+ model.getValue(this.data.selectedRecords[0],'AMTPERDAY') + "/" + model.getValue(this.data.selectedRecords[0],'NUMPERDAY')+ "/"
+ model.getValue(this.data.selectedRecords[0],'AMTPERMONTH') + "/" + model.getValue(this.data.selectedRecords[0],'NUMPERMONTH') +"/" + model.getValue(this.data.selectedRecords[0], 'SECCODE');
}
}
apex.item("P617_ROW1").setValue(full_record);
The code successfully grabs the data in each cell and formats it correctly in my page item so I can then use it for processing. The only issue is that this event forces the user to unclick and re-click the interactive grid's row selector checkbox to populate the page item. It would be a lot more efficient if this code could be triggered by another event that would not require manual user interactions (key down, page change, etc...) and would populate the page item as the user types/right before they submit. I am not proficient in JS by any means so any links that would help build my understanding of using js in oracle apex to achieve goals like this would be appreciated.
I guess I should add that I have a maximum of 4 IG rows that I need to be able to select into their respective page items. So I use the code above 4 different times with the only difference being the selected record row number (this.data.selectedRecords[n]) and the page item (P617_ROWn).

Updating Displayed Text Elements After Dynamically Changing CSS Class With JQuery

I am coloring each user's text submissions to my application based on a color they choose. To do this, I dynamically add rules to a stylesheet as new users choose their color.
The problem I'm trying to solve is updating this color using AJAX without reloading the page.
I apply the color by assigning a class that corresponds to each user and the story they are submitting to:
<span class="<%= "contrib-u#{snippet.user.id}-s#{#story.id}" %>">
(code to display text submission)
</span>
I create classes for each user that match this contrib-u1-s2 format (contribution for user 1, story 2) using JQuery once when the application loads:
$(document).one 'turbolinks:load', ->
build_contribution_styles()
build_contribution_styles = ->
req = $.get('/contributions/index')
req.done (data) ->
user_sheet = document.styleSheets[5]
for contribution in data
user_sheet.addRule(
".contrib-u" + contribution['user_id'] + "-s" + contribution['story_id'],
"color: #" + contribution['color']
)
So far, this works great. Each user's submission for each story is correctly colored based on these dynamically created classes.
Next, I provide the user a text field so they can select a new color for their submissions:
<%= text_field_tag :snippet_color,
current_user.get_contribution_color(#story),
class: "jscolor centered-text",
data: {user_id: current_user.id, story_id: #story.id}
%>
Then, in JQuery, I attach an event listener to this text field to update the database and the classes with the newly selected color:
$(document).on 'turbolinks:load', ->
$('#snippet_color').change (e) -> handle_snippet_color_change(e, #)
handle_snippet_color_change = (e, input) ->
data = {
contribution: {
story_id: $(input).data('story-id'),
user_id: $(input).data('user-id'),
color: $(input).val()
}
}
req = $.post('/contributions/update', data)
req.done (data) ->
els = $('.contrib-u' + data['user_id'] + '-s' + data['story_id'])
els.css('color', data['color'])
This also works nicely, but only after I reload the page. The updates to the class are not applied to the elements until then.
This is somewhat confusing to me, because there are a number of other cases where I change the CSS style of an element dynamically with javascript and it changes without any page refresh. For instance, many times in this application I select an element and toggle its display property to hide it or show it.
I've found a few sources of information about "reloading a CSS style without a page refresh", but none of them seem to correct this particular problem. One suggestion was to place these new CSS rules into a style tag on the page with these elements to get them to automatically updated without a reload, but that does not appear to make any difference in my case.
EDIT: Working Solution
I have it working now by removing the previous rule and adding an updated rule to the stylesheet:
req = $.post('/contributions/update', data)
req.done (data) ->
selector = '.contrib-u' + data['user_id'] + '-s' + data['story_id']
sheet = document.styleSheets[5]
rules = sheet.cssRules
for i in [0...rules.length]
if rules[i].selectorText is selector
sheet.deleteRule(i)
sheet.addRule(selector, "color: #" + data['color'])
The problem was that I was just updating the styles for the existing elements. I'm still not sure why their updated styles were not applied immediately, but this new approach achieves the desired functionality.

Textfield not displaying variable from javascript function

I am attempting to get the data displayed from a database (it displays it on a dynamic page within a table) and have it as the value for a textfield on a different html page (map.html).
The value will be some sort of postcode/address and I want that to go into my google map page within the destination textfield. So when users check the location of the event they press the 'View on Map' button which will open up the page of the map and the data from the event should already be populated within the textfield.
However nothing appears and instead it remains blank, even when I just put in some dummy text it still doesn't populate. I know that the location value is being fetched as the alert correctly displays the location, but the problem is having it populate in the textfield.
I am using JQuery Mobile/Cordova/JavaScript/JQuery/HTML. The app is a one-page structure, with the exception of map.html which has it's own page.
Any ideas?
Fetching the location value:
$(document).on("click", ".btnMap", function(e){
var location = $(this).data("rowlocation");
viewMap(location);
});
Snippet of Button:
<a data-rowlocation='" + response.rows.item(i).Location + "' href='map.html' onclick='viewMap(location)' data-role='button' rel='external' data-mini='true' class='btnMap'>View on Map</a></td></tr>"
viewMap Function:
function viewMap(location) {
alert(location);
$("#target-dest").val(location);
}
HTML:
<input type="text" name="target-dest" id="target-dest" />

the simplest way of passing the location to a new page - using your existing code would be to append the location as a query string to the href in the link.
<a ...href='map.html?loc='" + response.rows.item(i).Location + "'...
and then on the destination page - use JS to grab the querystring from the URL, split it from the rest of the UURL and pass it to the textbox.
//js on destination page
var locn=location.href;
var locationPortions = locn.split("?loc=");
$('#target-dest").val(locationPortions[1]);

Because the trigger for this is clicking an <a>, the link is causing a loading of the map.html page which negates the updating of the contents of the textbox:
<a ...href='map.html'...
This is taking precedence over the onclick event. You need to either change the link into a button and trigger the function as an onclick event or prevent the link from performing its normal function as other posters have noted with e.preventDefault().

check to see if div is already showing, and hide it

I am working on the responsive design of my website for mobile phones. I have an "img" tag inside of an "a" tag for 3 icons, like this:
<img src="images/webIcon.png" data-attr="webIcon">
On all other screen sizes, when a user hovers over the icon, a description appears, and then disappears again when they mouse-off. But on mobile phones, by the time they scroll down to view the description, it's gone, so I'm changing it to a click event on the "a" tag. I've successfully added the content where I want it when the user clicks on the appropriate icon, but I'm having trouble hiding it when the next icon is clicked, or if they click the same one again.Here is what I have:
$('#mobileServices a').hover(function(e) {
e.preventDefault();
//Grab the corresponding description for the icon
data = $(this).children('img').attr('data-attr');
section = $('#' + data + '').html();
//Plop in the new section containing the description below the icon
$(this).after('<section class=' + data + '>' + section + '</section');
//So I figured perhaps I should store-off the new sections for later use
newSection = $('section.' + data + '');
});
So then I thought: I'll use a simple if statement to check if the newSection is visible, and if it is, hide it (or slide it up, or slideToggle it), but that logic isn't working. I'm getting into the if statement, because I checked it with console.log(s). I tried something like:
if('section:visible') {
newSection.slideToggle();
}
But obviously that doesn't work, because it just slides it down and then up right away. So, now I'm stuck... Any help is greatly appreciated!!!!!

I think your issue may lie with the if statement you're trying to use. You'll want to get the element(s) first, with $('section') and then do .is(":visible");. So, to tie it together:
// Checks for display:[none|block], ignores visible:[true|false]
if($('section').is(":visible")) {
$('section').hide();
}
This will hide all the sections, and should achieve something close to what you're looking for. Then, you can show your new one with newSection.slideToggle() and be good to go.

Javascript: Using a function with rows

I have a table of data being produced with JavaScript. At the end of each row is an image, which is clickable. When clicked, a popup appears containing information based on the row.
I am using the second example on here: http://www.abidibo.net/projects/js/moopopup/demo
Basically, how I have it setup now is this:
The function;
function popup() {
var mp_instance = new moopopup({
overlay: true,
title: 'Copy server address',
html_node: 'mynode',
});
mp_instance.display();
}
make the popup, appear, using a div which is initially hidden
<div id="mynode" style="display:none">Content.</div>
The image then uses onclick to make the popup run.
onclick='popup();'
Now this works with static data, however each row has different content I want to put in to the popup. So i'm confused about how I would make each popup individual to the row, without creating loads of functions with an ID on the end, which basically all do the same thing.
http://www2.lethal-zone.eu/servers/tf2-servers
The image at the end of each row; when clicked shows some extra content...

You generally would want to pass some information to the one function as parameters and then use those parameters to choose the content. For example, pass some ID to the function:
onclick="popup(1);"
function popup(id) {
// do something with id to choose the content
// snip...
}