Interactive report Oracle apex passing string attribute to JavaScript variable - javascript

I have an interactive report in Oracle Apex 4.1. I need to pass a column value to an apex item when i click a link button on that interactive report.
I have searched on Google and found a solution :
onclick="$s('P4_PAGEITEM', #COLUMN_NAME#); return false;"
But it seems it's only working for numbers. When I try passing a string value it always returns wrong number format.
Also, can I access an interactive report column value from JavaScript?

#COLUMN_NAME# is a substitution string. It will literally put the value of the column for that row in the string.
When the value is a number, it will generate
onclick="$s('P4_PAGEITEM', 9875); return false;"
Now, if the value would be a string
onclick="$s('P4_PAGEITEM', ALLEN); return false;"
To deal with this, alter your link with adding quotes around #COLUMN_NAME#
onclick="$s('P4_PAGEITEM', '#COLUMN_NAME#'); return false;"
Also, can I access an interactive report column value from JavaScript?
All HTML on the page you see is accessible from javascript/jQuery and only requires you to use the correct selector. You do need to understand HTML and the DOM though.
A good start is always using a browser with the correct tools which will allow you to inspect elements, html, dom, javascript, css,... An example is the Firebug plugin for Firefox.
Targeting values in a report requires you to know its markup which you can find by inspecting the generated page html. Keep in mind that page and region templates can make a difference depending on the theme you are using.
If you are stuck on this, post a new question about it and provide html and an explanation of what you are trying to get at.
This question is an example of targetting values in a table: How to select a row element value from Oracle APEX 4 Classic Report (row element from a table tags)

have you tried using quotes arround your column value ? :
onclick="$s('P4_PAGEITEM', '#COLUMN_NAME#'); return false;"
It works for me.

Related

add a javascript query dynamically change the button label in Oracle Apex

I have created a button named "Freeze".
I want to create a dynamic action that changes the name from "Freeze" to " "UnFreeze" on click.
I have set the static id for the button as "Freeze_StaticID" and then created a dynamic action for the click event.
Under True condition, I want to add a javascript query for the same.
Can anyone please tell me the query I need to add for the same?
I tried adding the code below but it didn't work.
$("#Freeze_StaticID").attr ('value', 'UNFREEZE')
It depends on the HTML implementation. When it's a <button> element, then it works like this: $('#Freeze_StaticID').text('UNFREEZE')
Btw: It's jQuery behind the scenes. You can toggle the browser's developer console (F12) and execute the appropriate getter and see what the result is for:
$('#Freeze_StaticID').text();
$('#Freeze_StaticID').attr ('value');
When undefined is returned, it's the wrong approach because it should return the current title of the button.
Details:
https://api.jquery.com/text/
https://api.jquery.com/attr/
Just use the JavaScript API for Apex
apex.item("Freeze_StaticID").setValue("UNFREEZE");

How to pass html content of a div as form parameter to the server

What is the best way to pass HTML data to server.
I have a htmlPage which has a div.I want to pass the innerHTML of this div to the server so that I can save it in session and recreate that div later during the edit flow.
I have created a hidden field:
<input type="hidden" name="selectedTemplateHtml" id="selectedTemplateHtml" />
In this hidden field I want to set the HTML of that div and post to server.
Please suggest.
I tried simple passing the html from div using $("#divName").html() but when in edit flow we retrieve the stored value it gives exception since it is not able to store the html in the javascript variable as the HTML spans many lines.
Please suggest.
In my case I am able to post the request with newlines and I am able to get back the html which I had posted but when I try to store it back in a javascript variable due to new line characters and double quotes it gives error
#Alexander
Following code is used to display html in edit flow:
cdHtml="${postAdBean.cdHtml}";
templateId="${postAdBean.templateId}";
$("#"+templateId).html(cdHtml);
It gives exception in browser console on the first line ie.:
cdHtml="${postAdBean.cdHtml}";
This is because it is not able to convert the html returned from server to a javascript string.
Okay I got it to work thus:
From client before setting the html in hidden field I encode it :
selectedTemplateHtml=encodeURIComponent(selectedTemplateHtml);
$("#selectedTemplateHtml").val(selectedTemplateHtml);
This is neccessary to escape certain characters like & in the HTML which may otherwise cause issues.
In java:
String
cdHtml=URLDecoder.decode((request.getParameter("selectedTemplateHtml")),"UTF-8");
cdHtml=cdHtml.replace("\n"," ").replace("\r", " ").replace("\t", " ");
cdHtml=cdHtml.replace("\"", "\\\"");
ie. first i decode the html then replace all the newline characters and escape the double codes. Then i send the html back to browser and it is readily assignable as in javascript without any issues.

Submit javascript dynamically added elements to controller method like Stackoverflow

Put it simply: I'd like to let the user to select some tags in JS and submit it to my controller. Here are my suggestions:
Create a hidden input for every inserted tag with naming convention like: Tag123 (123 = this tag's unique identifier) and iterate through FormCollection in my action method to find out which tags have been selected. Cons are obvious: using FormCollection instead of ViewModel and iterating through the FormCollection to get my desired data seems bad to me.
Create one hidden input and append every selected tag to it. This can become messy on tags deletion since I should find the right id from the input's current value and delete it. But the Pro is that I only have one element and can put it in a viewmodel to access it in controller action.
Curious to see if anyone knows how SO does it. They're kind of defning the standards now. Would love to know how they do it.
Thanks.
I have a website running with the option of adding tags, much like SO.
My approach to the problem, however, led to me create one input field for each added tag, and increment a javascript index variable every time a new input is added, then making use of a ViewModel to bind a IList<TagDTO> tags { get; set; } (forms tend to get complex over time anyway, so a viewmodel is almost always a good way to go). Here is an example of the html hidden inputs created in the page:
name=tags.Index, value=0
name=tags[0].tagid, value=201
name=tags.Index, value=2
name=tags[2].tagid, value=307
This has one great advantage to me: Internationalized tags and possibly disallowing nonexistent tags.
What I mean is that every tag has an ID, and in my "Tags" table in the database there is one column for the name of this tag in each language I support. Such as:
tagid | name_ptBR | name_en
201 | animais | animals
307 | educacional | educational
This is only my approach to the problem, but it has worked out ok so far.
Stack Overflow just has one text input field, which is enhanced with autocompletion by JavaScript. When it's sent to the server, the field is split by spaces, and the corresponding tags are looked up by name. I recommend you do that, as it's the most accessible of all the options.

Transfer possibly unsafe user input from hidden input field to DOM

The following is a simplified example of a page a user has created at a site (they created it by filling out a form and then they get a URL for the page; the below is the HTML for the page they created).
In the example, I'm taking the value of a hidden input field and then putting it into the DOM as is. That results in an alert, simulating an XSS attack.
What's the best way to prevent things like this? The value of #sourceinput was previously input by the same or a different user who's viewing the page below, and the user's input wasn't filtered to remove tags. (The actual case involves the jquery.tooltip.js plugin and it's bodyHandler callback; on mouseover a bodyHandler callback would get the hidden input and display it to the user.)
One way to deal with this would be to strip tags on input; I control what goes in the hidden textfield so that would seem to solve it.
Another way would be to strip tags in Javascript, but some of these don't seem to be 100% effective:
Strip HTML from Text JavaScript
Is there some sort of best practice that I'm missing, or are those two the best ways?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.1");</script>
<script>
$(document).ready(function() {
var badHTML = $('#sourceinput').val();
$('#destinationdiv').html( badHTML );
//$('#destinationdiv').text( badHTML );
});
</script>
</head>
<body>
<input type="hidden" id="sourceinput" value="<script>alert('hi');</script>" />
<div id="destinationdiv" style="width:10px;height:10px;background-color:red;"></div>
</body>
</html>
UPDATE: The solution I'm going with for now has three parts:
When the page the user has created is saved, I run PHP's strip_tags() on their input. These are just short text strings like titles and blurbs, so few users will expect they can enter HTML. That might not be appropriate for other situations.
When the page the user created is displayed, instead of putting what the user had entered in an input value attribute, I put their input inside a div.
I take the value out of that div using .text() (not .html() ). I then run that through the underscore function (see below).
Testing this out - including simulating skipping the first step - seems to work. At least I'm hoping there isn't something I missed.
Here's the escape function used by Underscore.js, if you don't want to use the entire Underscore library of functions:
var escape = function(string) {
return (''+string).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g,'/');
};
Used like
var safe_html = escape("<b>Potentially unsafe text</b>"); // "<b>hello</b>"
$("#destination").html(safe_html);
It's written well and is known to work, so I'd advise against rolling your own.
I would say what you commented out (using text() from jquery is the better option). That will make sure the text stays text which is what you want. Filtering or stripping may have unwanted side effects like removing a mathematical expression in the input (" x is < 5").
Do Nothing.
You are trying to protect the user from himself. There is no way the user A can harm user B. And for all you care, user A might as well type javascript:alert('hi') on the address bar and xss himself. And no matter what javascript escape function you create, a savvy user can always bypass it. All in all, its a pointless pursuit.
Now, if you start saving what the user entered on the server side, then you should definitely filter things. Don't build anything on your own. Depending on your server side language, there are several options. OWASP's AntiSammy is one such solution.
If you do choose to save user entered html on the server side, make sure to run it by antisammy or a similar library before saving it to the database. On the way out, you should simply dump the HTML without escaping, because you know whatever is in the database is sanitized.

Change The Value of InputFromTextBox SharePoint control using JavaScript

Dear All,
Can anyone show me how to change (clear) the value of InputFromTextBox SharePoint with full rich text enabled, I can't reach to the object by its id hence it puts the text in a seperate IFRAME, gives it an ID [Control ID + iframe], when I access the IFRAME I can't reach the inner tag hence innerhtml property = ""
I'm turning around myself since yesterday, it must be easy but I'm soo down now.
Thanks for help
You can use function defined here or here to reference form field.
Remember that with full rich text enabled cleared value is <div></div> if i remember correctly.

Categories