How to insert a HTML page into an APEX Region? - oracle-apex

I have the following HTML page which works perfectly fine as a HTML page; however when I try put it into APEX by entering the code into a Region it just goes all wrong.
When the submit button is pressed, it takes the user to a new page with the IFRAME on rather than just refreshing the page as it does in a HTML page. The other issue is the aesthetics, it looks perfect in Firefox but in IE the IFRAME is half way down the page. When investigating in Firebug I see no attributes which would cause this.
Is there a method of embedding a HTML page into an APEX form page?
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<form action="http://ukserver/orderlist.asp" target="orderResults">
Enter Order Number: <input id="ord" type="text" name="ord" maxlength="50" size="20"/>
<input type="submit" value="Submit"/>
</form>
<iframe id="orderResults" name="orderResults" src="blank.html" width="100%" height="50%">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
This is the page in FireFox which as you can see looks ok.
This is the page in IE which is incorrect
Update:
The HTML page seems to work perfectly in the HTML header of the APEX page but its above my tabs and region which isnt the place where i want it. I tried to find an order (1112) and it returned the following 'File not found' which is correct.
Hi Tony, I created another IFRAME and i guess I'm half way there. I now just have to get the HTML form working, please see below:

It sounds like you have a PDF file in a folder on a server somewhere for each order. If the names of the files are predictable given the order number then you should be able to generate a link something like this:
1) Create an item to accept the order number e.g. P12_ORDER_NUMBER.
2) Create a button to submit the page
3) Create a report that displays when P12_ORDER_NUMBER is not null and selects:
select '//server/path/fileprefix' || :P12_ORDER_NUMBER || '.pdf' as url
from dual;
4) Convert the report column into a link via the column attributes so that clicking on it launches the file.

Related

Google Data Studio - Refresh data on embedded website

I've embedded data studio report on a html page. I refresh the iframes' after an interval, but the reports do not update. The report on the embedded page gets updated only by going to the report on data studio's website and clicking "Refresh data" icon.
How can the report on html page be refreshed without manually clicking Refresh data icon on data studio website?
HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div>
<iframe id="TODOcombined" width="800" height="600" src="https://datastudio.google.com/embed/reporting/1L5PqnHOl0kv3-bwMMVGcNgBi0cdaSMUN/page/Kj0j" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div>
<iframe id="TODOmultipage" width="800" height="600" src="https://datastudio.google.com/embed/reporting/19ErM9ElRIHD18oBKo0gGTdrmU5ayXn3H/page/Kj0j" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<script>
function refreshFrames() {
console.log("Refreshing frames at:" + new Date);
document.getElementById('TODOcombined').src = document.getElementById('TODOcombined').src;
document.getElementById('TODOmultipage').src = document.getElementById('TODOmultipage').src;
}
setInterval(refreshFrames, 20000);
</script>
</body>
</html>
When you create a datastudio report you can control whether you use caching (at the report settings level) and how fresh you want your data to be (at the connection level, with options ranging between 1, 4 and 12 hours).
Simply refreshing the page does not override these so you will need to change them to meet your needs.
See Manage Data Studio data freshness for details.
Hello, the first solution could be install a plugin in the chrome extensions called "Data Studio Auto Refresh" site here and set it up. (PD:For use this plugin its necessary to keep your page the chrome available, you could use one server for that or whatever you decide)
The second solution is create a script in jquery, ajax etc to reload the mark element without refresh the whole page.
Hope it works!

Facebook Profile Picture not showing in Chrome

I am having issue with loading Facebook Profile Images in my application. I get list of my friends fromt the graph API and then display the relevant Friend Info and their public profile images
My HTML is as below.
<div id = "profile_picture" style="float:left; width:100px;height: 100px" >
<img src="https://graph.facebook.com/{{providerUserId}}/picture?width=100&height=100"/>
</div>
<div id="user_basic_info" style="float:left;margin-left:14px;">
<div id="name" style="font-size:16px;font-weight:bold;margin-bottom:6px;">{{name}}</div>
<div id="email" style="margin-bottom:6px;width:400px;">{{email}}</div>
<div id="address"></div>
</div>
The {{}} are Mustache templates which get populated via the model.
For some reason the images don't load up in Chrome; but work fine in Chrome Canary, Firefox, Safari.
It doesn't make a difference if I pass in hardcoded userId also.
Any guidance??
Check to see if you have any chrome plugins causing the issue by opening the url in incognito mode, that is assuming you have all the extensions disabled in that mode.
I noticed that the disconnect extension hid the images as you described.

APEX 3.2: Embed HTML Region into HTML Region

I found the following javascript example for uploading multiple files in one session:
Upload multiple files with a single file element
My question is that in my APEX 3.2 page, I currently have a region that looks like this:
And I want to take out the default 'File Browse' and put in the multiple file upload portion in it's place.
Is there a way to put a region within a region? If not, how can I add an HTML item within a region?
Here is the code that I have in the second screen shot (html region):
<form enctype="multipart/form-data" action="your_script_here.script" method = "post">
<input id="my_file_element" type="file" name="file_1" >
<input type="submit">
Files:
<div id="files_list"></div>
<script>
var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>
</form>
You can create a "Display as Text" item and set your HTML code as the source. Make sure that the item is not set to escape HTML, otherwise you will just see the HTML and not the controls.
The result comes out like this (I have a text item "Request Title" followed by the display item based on your HTML:

Passing url to django to be used as variable?

So when I'm trying to pass url to django views it cuts it. For example, I have a webpage which shows statistics of downloads for users sorted by download amount. Then I want to get details about some user, for example for "Yousuke Kataoka". I press the link and go to user page. Url should be and is mysite.com/user/Yousuke Kataoka, but in the webpage I see "Details for Yousuke", it kinda cuts the url. So of course I can't get any details, because the username is cut.
Here is part of urls.py:
(r'^user/(?P<username>[*_a-zA-Z0-9./-=]+)', 'dq2.web.usermon.views.user')
And here is user.html template:
<html>
<head>
<title>Detailed information for {{usr}}</title>
<script src="/dq2/media/js/sorttable.js"></script>
</head>
<body>
<p>Detailed information for {{usr}}</p>
<table width="30%">
<tr><td>File Downloads (1HR)</td><td align="right">{{file_events_1h}}</td></tr>
<tr><td>File Downloads (24HR)</td><td align="right">{{file_events}}</td></tr>
<tr><td>File Downloads (7D)</td><td align="right">{{file_events_7d}}</td></tr>
<tr><td>File Downloads (30D)</td><td align="right">{{file_events_30d}}</td></tr>
<tr><td>Operations (1HR)</td><td align="right">{{op_events_1h}}</td></tr>
<tr><td>Operations (24HR)</td><td align="right">{{op_events}}</td></tr>
<tr><td>Operations (7D)</td><td align="right">{{op_events_7d}}</td></tr>
<tr><td>Operations (30D)</td><td align="right">{{op_events_30d}}</td></tr>
</table>
And so on..
What should I do?
Try adding a space in your regex. And are you sure you meant to have /-= in there?

Django: How do I position a page when using Django templates

I have a web page where the user enters some data and then clicks a submit button. I process the data and then use the same Django template to display the original data, the submit button, and the results. When I am using the Django template to display results, I would like the page to be automatically scrolled down to the part of the page where the results begin. This allows the user to scroll back up the page if she wants to change her original data and click submit again. Hopefully, there's some simple way of doing this that I can't see at the moment.
It should already work if you provide a fragment identifier in the action method of the form:
<form method="post" action="/your/url#results">
<!-- ... -->
</form>
and somewhere below the form, where you want to show the results:
<div id="results">
<!-- your results here -->
</div>
This should make the page jump to the <div> with ID results.
It is complete client site and does not involve Django, JavaScript or similar.
You need to wrap your data into something like this:
<div id="some-id">YOUR DATA TO BE DISPLAYED</div>
and if you make redirect in your view you need to redirect to url: /some-url/#some-id
if you don't make redirect you need to scroll to the bottom using javascript (but note that redirect is preffered way to use in view after saving data).