Jquery function calls in page html header

Hi ,
I have included the Jquery Js files in my page template as follows :
<script type="text/javascript" src="#IMAGE_PREFIX#js/jquery-1.3.2.min.js"></script> Now If I use a function like below in my template, it works perfectly well
<script>
$(document).ready(function(){
$("#dialog2").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true
</script>
{code}
However if I call the above script in my Page html header it throws an error
<b> $ is not defined </b>
but works well if I add in the tempalte.
If I look at the page source , i notice that the page html header is displayed and then the page template header section and seems like that is the reason why the error comes when I call Jquery functions in my page html header....
Now I do not want to add individual functions to the template since they are page specific.
How do I handle this issue ? Should I include the call to the Jquery JS in my Page html header ?
Appreciate any pointers/suggestions.
Thanks,
Dippy

Becuase the order of execution.
Once way is move your javascript to region header, otherwise call jquery in page header instead of template

Similar Messages

Where Should the JavaScript Go if I'm Calling from the Page HTML Header?

In the Application Express User's Guide under "Calling the JavaScript File from the HTML Header Attribute" point 4 says:In HTML Header, call the JavaScript file using the following syntax:
<script src="/my_images/custom.js" type="text/javascript"></script>However, it doesn't say where my_images is located.
Where should the .js file be stored?
Thanks,
Gregory

naviagte to shared component in the application edit screen and upload your .js file to static files.
now you can ref. this file as
In HTML Header, call the JavaScript file using the following syntax:
<script src="#WORKSPACE_IMAGES#custom.js" type="text/javascript"></script>
{?code}

Pass a value from a PL/SQL function to a javascript (html header) ? ?

Hey Guys,
Have a question regarding how to pass a value from a PL/SQL function to a javascript in the HTML Header.
I have created a PL/SQL function in my database, which does looping.
The reason for this is: On my apex page when the user selects a code, it should display(or highlight buttons) the different project id's present for that particular code.
example= code 1
has project id's = 5, 6, 7
code 2
has project id's = 7,8
Thank you for your Help or Suggestions
Jesh
The PL/SQL function :
CREATE OR REPLACE FUNCTION contact_details(ACT_CODE1 IN NUMBER) RETURN VARCHAR2 IS
Project_codes varchar2(10);
CURSOR contact_cur IS
SELECT ACT_CODE,PROJECT_ID
FROM ACTASQ.ASQ_CONTACT where ACT_CODE = ACT_CODE1;
currec contact_cur%rowtype;
NAME: contact_details
PURPOSE:
REVISIONS:
Ver Date Author Description
1.0 6/25/2009 1. Created this function.
BEGIN
FOR currec in contact_cur LOOP
dbms_output.put_line(currec.PROJECT_ID || '|');
Project_codes := currec.PROJECT_ID|| '|' ||Project_codes;
END LOOP;
RETURN Project_codes;
EXCEPTION
WHEN NO_DATA_FOUND THEN
NULL;
WHEN OTHERS THEN
-- Consider logging the error and then re-raise
RAISE;
END contact_details;
/

Jesh:
I have made the following modifications to your app to get it to work as I thing you need it to.
1) Changed the source for the HTML Buttons Region(note use of id vs name for the Buttons)
<script>
function hilitebtn(val) {
//gray buttons
$x('graduate').style.backgroundColor='gray'
$x('distance').style.backgroundColor='gray'
$x('career').style.backgroundColor='gray'
$x('photo').style.backgroundColor='gray'
//AJAX call to get project-ids
var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=GETPROJECTS',0);
get.addParam('x01',val)
gReturn = get.get();
var arr=gReturn.split(':'); //dump into array
get = null;
for (i=0;i<arr.length;i++) {
// alert('val=' + arr);
if ( arr[i]==5)
$x('graduate').style.backgroundColor='red';
if ( arr[i]==6)
$x('distance').style.backgroundColor='red';
if ( arr[i]==7)
$x('career').style.backgroundColor='red';
if ( arr[i]==8)
$x('photo').style.backgroundColor='red';
</script>
<table cellpadding='0' cellspacing='0' border='0'>
<tr><td>
<input type='button' id='graduate' value='Graduate'>
</td>
<td>
<input type='button' id='distance' value='Distance'>
</td>
<td>
<input type='button' id='career' value='Career/Tech'>
</td>
<td>
<input type='button' id='photo' value='Photos'>
</td>
</tr></table>
2) Defined the application process GETPROJECTS as DECLARE
IDS varchar2(1000);
l_act_code varchar2(100) :=4;
begin
IDS:='';
l_act_code := wwv_flow.g_x01;
for x in(
SELECT ACT_CODE,PROJECT_ID
FROM ASQ_CONTACT
where ACT_CODE = l_act_code)
LOOP
IDS := IDS || X.PROJECT_ID|| ':' ;
END LOOP;
HTP.PRN(IDS);
END;
3) Changed the 'onchange' event-handler on p1_act_code to be 'onchange=hilitebtn(this.value)'
4) Added the JS to the HTML Page Footer <script>
hilitebtn($v('P1_ACT_CODE'));
</SCRIPT>

Create a function in my page model header

Hi everybody,
I’m trying to do a function. This is my function :
function Test()
if(document.getElementById(item.value != "")
put my item disabled
Element <i>p32_id_feuillet</i>
html form element attributes
<b>onClick="javascript:Test();"</b>
How I can do this ?
Thanks Bye

Check out this page mate
http://www.reumann.net/struts/lesson1.do

ItemStateChanged function calling on page load - How to avaoid?

Hi,
I have one combo box in my application. When i m going to select combo box value, the listener will be called. Now what my issue is i have to avoid to call itemStateChanged() function when the Frame is opening in first time. Pls anyone give solution to solve this issue.
package timer;
import java.awt.event.*;
import javax.swing.*;
import java.awt.*;
public class SelectItem extends JFrame implements ItemListener {
    BorderLayout bord = new BorderLayout();
    JTextField result = new JTextField(27);
    JComboBox pick = new JComboBox();
    public SelectItem() {
        super("Select Item");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        pick.addItemListener(this);
        pick.addItem("Navigator");
        pick.addItem("Internet Explorer");
        pick.addItem("Opera");
        pick.setEditable(false);
        result.setHorizontalAlignment(SwingConstants.CENTER);
        result.setEditable(false);
        JPanel pane = new JPanel();
        pane.setLayout(bord);
        pane.add(result, "South");
        pane.add(pick, "Center");
        setContentPane(pane);
        pack();
        setVisible(true);
    public static void main(String[] arguments) {
        JFrame frame = new SelectItem();
    public void itemStateChanged(ItemEvent evt) {
        System.out.println("Inside Item Event...");
        Object source = evt.getSource();
        if (source == pick) {
            Object newPick = evt.getItem();
            result.setText(newPick.toString() + " is the selection.");
        repaint();
}Thanks & Regards,
S Senthilkumar

I would guess:
//package timer;
import java.awt.event.*;
import javax.swing.*;
import java.awt.*;
public class SelectItem extends JFrame implements ItemListener {
    JTextField result = new JTextField(27);
    JComboBox pick = new JComboBox();
    public SelectItem() {
        super("Select Item");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        pick.setEditable(false);
        pick.addItem("Navigator");
        pick.addItem("Internet Explorer");
        pick.addItem("Opera");
        pick.setSelectedIndex(-1);
        pick.addItemListener(this);
        result.setHorizontalAlignment(SwingConstants.CENTER);
        result.setEditable(false);
        JPanel pane = new JPanel(new BorderLayout());
        pane.add(pick);
        pane.add(result, BorderLayout.SOUTH);
        setContentPane(pane);
        pack();
        setVisible(true);
    public static void main(String[] arguments) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                new SelectItem();
    public void itemStateChanged(ItemEvent evt) {
        System.out.println("Inside Item Event...");
        result.setText(evt.getItem() + " is the selection.");
}

Calling a page process by clicking a link

I have an Apex report with multiple rows and a link column in. I'd like to be able to call a page process to do some work on the row with the clicked link... I also need to pass a couple of parameters somehow to the page process as it calls a procedure which requires the parameters to function correctly.
So -
When I click a link on a row.. perhaps a couple of hidden page items get set.
The page is then submitted and my process calls the procedure, using the values of the set items above as its parameters.
Control is submitted back to the original page.
So basically I'm trying to give a user the ability to carry out repetitive actions on each row.
My thought was to use a URL in the link and maybe Javascript.. or am I barking up the wrong tree and is there a better way rather than a link?
Thoughts?
Cheers
Ken

You have the right idea. JavaScript is the way to go. Assuming that the values that are being passed are part of that row of data, you can construct the call to a JavaScript process.
Create two hidden items on your page, make sure they are not protected.
say P1_CITY and P1_STATE
Say your query included city and state, define a column in the report as a link of target URL with the following url
javascript:myFunction('#CITY#', '#STATE#');
Then define a javascript function in the page HTML Header section
function myFunction(pCity, pState) {
$x_value('P1_CITY', pCity);
$x_value('P1_STATE', pState);
doSubmit('RUNPROC');
Then have a process on the page does what ever you want and that is conditional on the REQUEST = 'RUNPROC'

Page HTML Body Attribute - can there be more than one in this area?

In "Oracle Database Application Express Advanced Tutorials", Release 3.0, B32469-01 on page 10-10, in the section labeled "Create a Call to the disFormItems Function" in step 6........it reads:
//start citation
In the Page HTML Body Attribute, enter the following:
onload="disFormItems(); first_field();"
//stop citation
My questions are:
Can there be more than one "onload" statement?
If yes, how do you string them together?
Assume the second function I want to add is "disFormItems_local()"
Thank you,
Maggie

Okay, I have figured it out, I believe. So, I will provide my own answer in case someone else is looking for this type of situation in the future.
I edited the page definition by adding another function, disFormItems_local(), to the HTML Header Attribute.
Next, I edited the item's HTML Form Element Attributes to call the function, onchange="disFormItems_local()"
Then, I created a call to the disFormItems_local function in the page HTML Body Attribute, onload="disFormItems(); first_field(); disFormItems_local();"
Other stuff that you will need to know is to be found in Chapter 10 page 8, Enabling and Disabling Form Elements of the 3.0 Advanced Tutorials.

Can we have javascript function in the HTML header of Page 0

Hello,
I want to have a javascript function implemented on page zero, Can anyone help me out with this issue.
Thanks,
Orton

There is no HTML Header on Page Zero. The equivalent would be to use the page template.
It's also possible to place JavaScript in HTML regions on Page Zero, but I wouldn't consider this a good practice. JavaScript is better kept in external files and referenced using the SRC attribute.

Page failure when attempting to save java script in html header

Currently there is java script code for a function that is seeded in the html header of a forms page by apex when the form is generated. This code is for the chicken test for the DELETE button.
The function works as designed, but if I try to "APPLY CHANGES" to the the page definition I get the The page cannot be displayed "Cannot find server or DNS Error". "the url is http://nldg-3.appl.devjones.com:7777/pls/apex/wwv_flow.accept" If I remove the script coding from the HTML header the page will save just fine, but of course no more java script.
I need to add a java script function to the page and I am unable to do so at this time because of this issue. I can reproduce this error on any of the sample apps that I have loaded into apex.
the Apache error log contains:
[Fri Feb 13 06:11:06 2009] [error] [client 172.16.85.122] [ecid: 1234527066:192.168.211.127:31922:0:17188,0] mod_plsql: /pls/apex/wwv_flow.accept HTTP-500 Error Reading Data from Client!!
The Apache access gets:
172.16.85.122 - APEX_PUBLIC_USER [13/Feb/2009:06:23:47 -0600] "POST /pls/apex/wwv_flow.accept HTTP/1.1" 500 653
Apex is version 3.1.2.00.02 and uses on iAS on a Linux server. The Database is 10g. The browser is IE 6.0.2900.2180.
I have been developing for about 3 months in Apex and this is the first issue of this kind that I have run into. Any help will be greatly appreciated as I have no clue at this time.

Luis,
All the forms are created by Apex with a default function in the html header for a delete chicken test as follows:
<scrpt language="JavaScript" type="text/javascript">

Even though the function is already a part of the page, if I try to save it, it will fail. I will look into the "black list" a little deeper. I have asked around abit as I also had suspected that, but so far all the answers were that it should not be a problem. If I take out the "SCRIPT" word I can get the page to save, but of course the code is worthless at that point.
Keith

How can I submit the page from javascript in html header?

I followed
http://www.oracle.com/technology/products/database/htmldb/howtos/htmldb_javascript_howto2.html#client
It says "doSubmit('Delete');" to submit the delete action.
If I do the same in the java script that is embededed in html header, it does not work.
I am assuming 'Delete' is the name of the button here.
I also tried:
document.forms[5].submit(); --> does not work
document.formname.submit(); --> does not work
I want to know:
how I get the form name. I am assuming that this is the name in Name field in "Page definition" or is this page number?
how to sumit a form from the javascript in html header

sudheshna,
function deleteConfirm(msg)
should be
function Confirmdelete(msg)
cheers
KIM

Limit to HTML Header text in APEX Page

I have an APEX page that has a fairly large amount of javascript in the HTML header. After I added some more, the page blows up. Is there a limit to how much you can add. It doesn't look like Page 0 has the limitation. Is there one one on either?
What is the best way around this? Adding the individual page javascript to Page 0 or creating a .js that gets included on that page only.
Thanks!

Large page sizes will DESTROY your perceived performance. High performance apps go way out of their way to improve page load times by:
- Minifying or compressing javasript
- Making sure it is cache-able
- Loading the minimum amount of javascript you need for the page to function, then "lazy loading" (background loading) the rest
- Lazy loading all of the JavaScript files you need for the app on the login page or first page to cache them
- Using gzip compression in the app server
- Using a Content Delivery Network (CDN)
- Reducing HTML size using CSS and other techniques
- Reducing the number of network requests for images using CSS sprites. (more info here: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/ )
Storing JavaScript in the head of the page flies in the face of almost everyone of those concepts. Have a look at this if you have time:
http://developer.yahoo.com/performance/
Tyler Muth
http://tylermuth.wordpress.com
"Applied Oracle Security: Developing Secure Database and Middleware Environments": http://sn.im/aos.book

HTML header Page zero

Hello all,
We are trying to add a reference to a jquery image on page zero of our app. We are supposed to add this to the html header. We do not have an html header on page zero and we cannot figure out how to create or access it. Any help would be greatly appreciated.
Thanks

It is not possible to add an HTML Header to page zero. Including the required element(s) in the HTML <head> in the page template(s) would be equivalent.

Page 0 : HTML Header : Javascript

Hello,
I've written a little bit of Javascript that pops up a custom window.
Now, I can put this in the html header of an individual page and it works.
However, I thought that I could put this in the html header of page 0 and it would then be inherited by every other page in the application.
This would then mean if I needed to change it, I could change one reference, as opposed to one reference per page.
It would also mean I could keep all my javascript in one place.
This doesn't work for me, does this mean that only page items are inherited onto every page?
Thanks.

Hello,
Page 0 will not replicate JavaScript code in the HTML header page or the On Load section. It will replicate JavaScript code within a region's HTML header or footer.
However, I don't think using page 0 to make JavaScript code available to all pages is the right way to go. The "best practice" is to maintain an external JavaScript code file, and load it on every page using the page template. This is the technique the APEX builder using to load its built-in JavaScript functions. In the Header section of your relevant page template, just add something similar to the following:
<script src="/i/javascript/MyScripts.js" type="text/javascript"></script>This will give you all the benefits you mentioned in your post.
Regards,
Arie.

Calling a function in OAF page

Hi Frnds,
Iam trying to call a function in oaf page but somehow its not working , can u please identify mistake in my code .
the below is CO code:
public void processRequest(OAPageContext oapagecontext, OAWebBean oawebbean)
super.processRequest(oapagecontext, oawebbean);
OAApplicationModule am=oapagecontext.getApplicationModule(oawebbean);
OAViewObject vo = (OAViewObject)am.findViewObject("CandidateApplicantDetailsVO");
String Nationality =null;
CandidateApplicantDetailsVORowImpl row =null;
int i=0;
if(vo!=null)
int cnt= vo.getRowCount();
oapagecontext.writeDiagnostics(this, "row count is:"+cnt,1);
if (cnt > 0)
RowSetIterator rs=vo.createRowSetIterator("rs");
if(rs!=null)
while(rs.hasNext())
row=(CandidateApplicantDetailsVORowImpl)rs.next();
if(row!=null)
Nationality = row.getNationality();
oapagecontext.writeDiagnostics(this, "Nationality is :"+Nationality,1);
String outputVal;
try
OADBTransaction txn = am.getOADBTransaction();
CallableStatement cs = txn.createCallableStatement("BEGIN :1:= hr_general.decode_lookup(:2,:3);END;",2);
oapagecontext.writeDiagnostics(this, "Inside the try block",1);
System.out.println("3");
cs.setString(2,Nationality);
cs.setString(3,"NATIONALITY");
cs.registerOutParameter(1,Types.VARCHAR);
System.out.println("4");
cs.execute();
System.out.println("executed");
outputVal=cs.getString(1);
oapagecontext.writeDiagnostics(this,"The Nationality Value is:"+outputVal,2);
cs.close();
//txn.commit();
catch(Exception e)
//cs.close();
System.out.println("6");
throw new OAException(e.getMessage());
} // row loop
} // while
} //rowset loop
}// count loop
}//viewobj loop
} // End of PR
public void processFormRequest(OAPageContext oapagecontext, OAWebBean oawebbean)
super.processFormRequest(oapagecontext, oawebbean);
when i run this page , the controller was going inside the try block but the Output was not getting. can somebody figure out where iam missing.
Thanks to all in advance
have a good day :)
GK.

Hi Frnds,
I got the problem,
Iam trying to send a Default value NATIONALITY in setString
cs.setString(2,Nationality);
cs.setString(3,"NATIONALITY");
I have changed the lines to
String lookup_type="NATIONALITY"
cs.setString(2,Nationality);
cs.setString(3,"Lookup_type);
now i got the o/p, hope this may help others

How to call jquery function when i close modal dialog box ?

Hello,
I need to call one jquery function when I click on close button of modal dialog box.Can anyone please let me know how can I implement it ?
Thanks,
Dipti Chhatrapati

Hi Dipti,
If my understanding is correct, you are using SP Modal Dialog and want to track the close event of this dialog. Then you may use
dialogReturnValueCallback parameter of Options variable. Follow is the code sample:
function ShowModal() {
ExecuteOrDelayUntilScriptLoaded(function () {
var options = {
url: 'page1.aspx',
tite: 'Add Title',
width: 800,
height: 450,
allowMaximize: true,
showClose: true,
dialogReturnValueCallback: scallback
SP.UI.ModalDialog.showModalDialog(options);
}, 'sp.js');
function scallback(dialogResult, returnValue) {
if (dialogResult == SP.UI.DialogResult.OK) {
// call your Jquery method here...
Thanks, Ram

Jquery function calls in page html header

Similar Messages

Maybe you are looking for