{JSF, JavaScript} controlling invocation order

{JSF, JavaScript} controlling invocation order

I put JSF and JavaScript in a set as the order in the set is not important, and in this post I will speak about the four types of invocation in JSF web application which are:

  1. JavaScript Call.
  2. JSF Call.
  3. JavaScript call, followed by JSF call.
  4. JSF call, followed by JavaScript call.

I will give a simple illustration of the usage of each one of the above a long with how you can achieve it.

  • JavaScript Call:

sometimes you want to call a javascript functionwhen some JSF buttons getting pressed, like the case opening a popup window for adding / editing something, or displaying a details for a seclected record.

and this is so simple you can simply put what you want in the onClick attribute of the JSF commandButton tag as follows:

<t:commandButton value="open Edit Popup" onclick="openEditPopup(#{record.id}) ;"  />

  • JSF Call:

some other times you want to directly invoke the JSF function when some button getting pressed, like the case when deleting the selected record or saving the changes you mad in the form or doing any server side calculation/validation/data fetching when this button is pressed. and this can be done by mapping the managedBean function to the action attribute found in the commandButton tag as follows:

<t:commandButton value="save Changes" action="#{form.save}" />

  •  JavaScript call followed by JSF call:

some times you want to call some JavaScipt functions before invoking the JSF server methods, like the case when confirming any delete action on any record and this can be done by placing the confirmation JavaScript method to the onClick attribute and assigning the delete action to the action attribute inside the commandButton tag as follows:

<h:commandButton id="deleteUser" value="delete" 
               onclick="if (!confirm('Are you sure you want to delete this record?')) 
                        return false"
               action="#{bean.deleteRecord}"/>

 

  • JSF call followed by JavaScript call:

some times you want to invoke server side method (JSF call) followed by Client Side Call (Java Script call),

Like the case when you want to make server side validation / calculation / or any code and after

the successful completion of this code you want to open poup else you want to open another poup.

ex: suppose you have a list of students displayed in datatable and after selecting any one of them you can

do some action on the selected record one of this action moving this student from his current class to another

class, but there is a small validation must be made that is if the courses that this student is assigned to is

available in another class the transfer popup should be displayed allowing the transfer to be made else another popup

should be opened getting the student request to store it for future available vacancies.

so this scenario have two parts:

1. server side validation (database data validation).

2. javascript open the correct popup based on the validation result.

and this can be made as follows:

place the validation method inside the action attribute in the commandButton you have

<t:co­mmandButton value="tranfere to another class"

                 action="#{managedBean.validate}" />

and inside the validate method set the name of the popup that should be opened based on the validation in attribute say

popupName as follows:

­  public String validate() {
    if(this.classAvailabel())
       this.setPopupName("transefer");     // transefer to another class poup    
    else
     this.setPopupName("save-request"); // save request poup    
  }­

­

and in the header of the page set the value stored in the poupName property to a hidden field

as follows:

­<%
  ManagedBean bean = (ManagedBean) FacesContext.getCurrentInstance().getApplication()
                   .getVariableResolver().resolveVariable(FacesContext.getCurrentInstance(),"managedBean");
  String popupName = bean.getPopupName();
  if(popupName != null) {    
%>
    document.getElementById('popupNameHidedenFieldID').value = <%=popupName%>;
<%
  }
%> 

and in the onload attribute of the page Body call to launchPopUp as follows:

<body onLoad="launchPopUp();">

and the launchPopUp code will be as follo­ws:

­

­ function launchPopUp () {    
   var popupName = document.getElementById('popupNameHidedenFieldID');    
   if(firedAction.value == "transfer") {    
       openTransferPopup();    
   } else if(popupName.value == "save-request") {    
       openSaveRequestPopup();    
   }    
}

thats it, or thats the way I use for handling the above scenarios if any body have better way for any scenario of the above please let me know it.

  watch Pixels online

 

s the way I use for handling the above scenarios if any body have better
way for any scenario of the above please let me know it.

The chic for artist handbags

The chic for artist handbags offered by branded http://www.cssaug.com companies like Louis Vuitton

it has been very informative

it has been very informative tutorial the presentation of {JSF, JavaScript} controlling invocation order is amazing and very well illustrated :)

Besides the PHP code was open

Besides the PHP code was open for viewing and manipulation purpose, to
further check out its practicality. The arrangement reportedly brought
about an improvement in PHP's coding standards.auto directory submitters

Boston webdesign

I would like to know if it possible do the same from the row selector within a row of a datatable to show the popup as you comment with a Yes or No and stop in case No.

Boston webdesign

Hello, I started with

Hello,

I started with programming and was wondering how to enable JavaScript to show things differently in two different browser? Thank you all for your help!


Thanks,

Web designers perth

What Do you mean with two diferent Browser?

Do you mean displaying different things based on the browser type (Firefox or IE)?

if so you can check about the browser type as follows:

­­­­­<script language="JavaScript" type="text/JavaScript">

if(navigator.a­ppName == "WebTV") {   alert("You're using the WebTV browse­r.")­ } else if(navigator.appName == "Netscape") { alert("You're using a Netscape browser.") } else if(navigator.appName == "Microsoft Internet Explorer") {   alert("You're using the Internet Ex­plorer browser.") } </script>­

and instead of the alert you can place whatever code you like.

Ali Abdel-Aziz.­

This was very helpful to me

This was very helpful to me thanks!

I have tried your example

I have tried your example and I would like to know if it possible do the same from the row selector within a row of a datatable to show the popup as you comment with a Yes or No and ­stop in case No.

http://www.realsofttech.com :: flyer design

You are welcome

You are welcome,

Nice to hear that this post helped you.

Ali Abdel-Aziz.

I was working on this for my

I was working on this for my assignment and thanks to your article, I am now able to fix the problems.

Frankly this is not a for

Frankly this is not a for Java newbie like only a pro can understand this but I think I shall ask my friend to have a look at this.
 Jessica

about your post

Hi.

 

I have tried your example and I would like to know if it possible do the same from the row selector within a row of a datatable to show the popup as you comment with a Yes or No and stop in case No.

 

Thanks

Can you post more details?

Hello David,

Can you post more details regarding your issue?

As I can't get what you are trying to do, so please post sample code of what you are trying to do, with the behavior you are expecting.

 --------------------------------------------------------------------

if what you are trying to do is 

something like what I posted in JavaScript call followed by JSF call...

if you did as below in case of no it will stop the invocation in case of yes it will proceed in the invocation of the "delete User".

<h:commandButton id="deleteUser" value="delete" 
               onclick="if (!confirm('Are you sure you want to delete this record?')) 
                        return false"
               action="#{bean.deleteRecord}"/>

 

Ali Abdel-Aziz.

Powered by Drupal - Design by artinet