Mittels JavaScript Methode aufrufen

[vanBraQ]

Hallo Leute

Hab da ein relativ großes Projekt am laufen und bräucht mal eure Hilfe

Ich habe mittels xhtml eine kleine Suche geschrieben:

<h:selectOneMenu id="schnellSuchTyp" value="#{schnellSucheController.schnellSuchTyp}">
<f:selectItems value="#{schnellSucheController.schnellsuchliste}" />
</h:selectOneMenu> 					
<h:inputText id="schnellSuchText" type="text" value="#{schnellSucheController.schnellSuchText}" size="14" />
						
<span>
<h:commandButton image="${lupeButton}" class="ufs-aktion-button" action="{schnellSucheController.schnellSuche}" title="Schnellsuche ausführen" />
</span>
<span>
<h:commandButton image="${addToPoolButton}" class="ufs-aktion-button" action="#{schnellSucheController.addToPool}" title="Schnellsuche ausführen und Suchergebnis zum Arbeitsbereich hinzufügen" />
</span>
<span>							                           
<h:commandButton value="Suche erweitern" styleClass="ufs-button" action="#{suchErgebnisController.sucheErweitern}"  />
</span>

Ich möchte nun mittels ENTER Druck die Funktion aufrufen die ich auch beim lupeButton aufrufen würde.

Ist das mittels JS möglich oder müsst ich das irgendwie anders machen?

mfg

vanBraQ

 

[Fant]

Sollte eigentlich möglich sein.
inputText hat ein onkeypress-Attribut, damit würde ich es versuchen. Einfach schauen, ob die gedrückte Taste der Enter-Button war und dann den passenden Button drücken.

Gruß Fant

 

[wurzelsepp]

Das wird nicht möglich sein. Java läuft auf dem Server; Javascript auf dem Client. Die ${lupeButton} steht am Client nicht zur Verfügung

 

[vanBraQ]

ein freund meinte es sollte auch mittles jQuery gehen hat da jemand eine ahnung davon ?

 

[Fant]

jQuery ist auch nur eine JavaScript-Bibliothek. Nur hierfür würd ich aber nicht darauf zurückgreifen.

Hast du meinen Vorschlag denn mal getestet?

 

[Wurzel]

Warum fragst du nicht deinen Freund, wenn er das meinte.

Aber er meinte wohl AJAX. Ja, damit kann man einen asynchronen Request senden und JQuery kann den Umgang damit vereinfachen.

Ajax – jQuery API

 

[vanBraQ]

Nein Fant dein Vorschlag funktioniert leider nicht so ganz weil es kein onkeypress attribut gibt :S

ich habe es jetzt mal so probiert:

var key = function keyHandler(e){
 	   e = e || window.event;

	   try {
		    var targ;
   	   		var KeyID = e.keyCode;	
	   		var bTriggerDefaultSubmit = false;
	   		
	   		if (e.target) targ = e.target;
	   		else if (e.srcElement) targ = e.srcElement;
	 
		    switch(KeyID) {
		      case 13:
		    	 if (targ) { 
		    		 if (targ.type && targ.type == 'textarea') {
		    			 bTriggerDefaultSubmit = false;
		    		 } else {
		    			 bTriggerDefaultSubmit = true;
		    		 }
		    	 } else {
					bTriggerDefaultSubmit = true;
		    	 }
		    	 
		    	 alert(targ);
		    	 
		    	 if (bTriggerDefaultSubmit == true) {
		    	 	if (document.getElementById('defaultSubmitButton')) { 
						document.getElementById('defaultSubmitButton').click();
						return false;
					} else {
						return false;
					}
				 }
		    	 
		    	 if (bTriggerDefaultSubmit == false ){
		    		 if (document.getElementById("schnellSuchText") != null){
// Hier soll dann die Funktion ausgeführt werden
		    		 }
		    	 }
		      break;
		    }
	   		
	   } catch (exception) {
		   alert('Exception' + exception);
	   }
	
};

 

[Fant]

Warum fragst du nicht deinen Freund, wenn er das meinte.

Aber er meinte wohl AJAX. Ja, damit kann man einen asynchronen Request senden und JQuery kann den Umgang damit vereinfachen.

Ajax – jQuery API

Hier wird nix asynchrones benötigt. Er klickt doch sowieso einen h:commandButton. Wieso jetzt plötzlich AJAX-Funktionalität einbauen wollen?

Einfach per JS den Button klicken und gut ist.

 

[vanBraQ]

Ob AJAX oder nicht ist doch egal es soll doch nur das ausführen was ich will oder ?

Oder ist es überhaupt nicht möglich hier jetzt noch das codestück einzubauen das ich benötige ? :S

 

[Fant]

Nein Fant dein Vorschlag funktioniert leider nicht so ganz weil es kein onkeypress attribut gibt :S

Laut Spezifikation gibt es das sowohl für <h:form> als auch für <h:inputText>
Alternativ gibt es auch noch onkeydown bzw onkeyup.

 

[vanBraQ]

if (bTriggerDefaultSubmit == false ){
                     if (document.getElementById("schnellSuchText") != null){
document.getElementById("lupe").onclick();
                     }
                 }

so in der art meinst du ?

 

[Fant]

if (bTriggerDefaultSubmit == false ){
                     if (document.getElementById("schnellSuchText") != null){
document.getElementById("lupe").onclick();
                     }
                 }

so in der art meinst du ?

Im Grunde ja.
Aber wieso fragst du denn überhaupt ab, ob das entsprechende Element gefunden wird? Du kennst du doch Elemente deiner Seite?

Kurz und knapp könnte das denke ich etwa so aussehen:
[c]<h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:buttonid').click(); return false; }">[/c]

Bin aber nicht wirklich fit in JS, aber die Idee dürfte klar sein.

Gruß Fant

 

[vanBraQ]

da ich die funktion nur ausführen möchte, wenn ein text eingegeben wurde daher die abfrage != null

 

[vanBraQ]

hab das jetzt mal so gemacht wie du sagtest aber hab noch ein problem:

er übernimmt nicht den String aus dem Suchfeld sonder sucht "leer" nach allen datensätzen uns spuckt dadurch 40000 Datensätze aus ...

€dit: Es hast 1mal funtkionier und jetzt nicht mehr -.- was is da los ^^

 

[Fant]

Möglicherweise passt der Scope von deinem Controller nicht? ViewScope reicht (bei dieser Lösung) nicht aus.

Mit deiner Abfrage, fragst du aber doch ab, ob das Element mit der ID schnellSuchText gefunden wird, und nicht ob der Inhalt von diesem Textfeld leer ist ... oder doch?

Außerdem solltest du evtl noch bedenken, dass dein Suchstring auch leer sein kann, also "" statt null. Spätestens, wenn du den Button klickst, wird eh der leere String "" in das entsprechende Feld in den Controller geschrieben. Das würde ich an deiner Stelle also auch noch abfangen, wenn gewünscht.

 

[vanBraQ]

Frage jetzt nach dem Wert des Textfeldes und prüfe es auf ""

Doch ich bekomme jetzt jedesmal wenn ich ENTER drücke eine Meldung von IE wo steht:

Object HTMLInputElement

Da kann ich auf ok klicken aber irgendwie passiert dann nichts mehr ich habe das schon überprüft indem ich breakpoints gesetzt habe aber es passiert dannach wirklich ncihts mehr ...

woher kommt jetzt dieser Fehler schon wieder ?

 

[Fant]

Zeig doch mal deine JSF-Seite samt JavaScript.

 

[vanBraQ]

header:

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:ufs="http://java.sun.com/jsf/composite/ufs"
	xmlns:rich="http://richfaces.org/rich">
	<head>
		<title>header</title>
	</head>
	<body>
	
		<ui:composition>
		
			<f:metadata>
				<f:event type="preRenderView"
					listener="#{schnellSucheController.prepareSchnellsuche}"></f:event>
			</f:metadata>
		
			<div id="head">
				<div style="display: table; height: 25px; #position: relative; overflow: hidden; width: 100%; border-bottom-color: #abc8e2; border-bottom-style: solid; border-bottom-width: 1px; ">            
		          <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">              
        			<div style=" #position: relative; #top: -50%">
						<dl id="info">
							<dd>
								<ufs:mitarbeiter value="#{userBean.angemeldeterUfsMitarbeiter}" />
							</dd>
							<dt>/</dt>
							<dd>
								<h:outputText value="#{userBean.angemeldeterUfsMitarbeiter.aussenstelle.wert1}" />
							</dd>
							<dt>/</dt>
							<dd>
								<h:outputText value="#{userBean.rollenString}" />
							</dd>
						</dl>
					</div>
					</div>
					<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle; right: 10px;">              
            		  <div style=" #position: relative; #top: -50%; right: 10px;">
						<ul id="info2">
							<!-- 
						Hinweis: durch float:right wird in der GUI
						oben rechts zuerst Logout und dann (rechts)
						daneben das Datum angezeigt, weil eben float: right!  
						 -->
							<li style="float: right;">
								<ufs:outputDate value="#{vertretungController.aktuellesDatum}" />
							</li>
							<li style="float: right; background-color: #{ufsDataSource.username == 'ufsdbe' ? '#ff0000' : ufsDataSource.username == 'ufsdbt' ? '#00ff00' : ''}">
								<h:outputText value="#{ufsDataSource.username == 'ufsdbe' ? 'ENTWICKLUNGSSYSTEM' : ufsDataSource.username == 'ufsdbt' ? 'TESTSYSTEM' : ''}" />
							</li>
							<li style="float: right;">
								<h:commandButton id="btnLogout" value="Logout" styleClass="ufs-button" onclick="window.close();" action="#{transitionController.logout}" />
							</li>
							<li style="float: right;">
								<h:selectOneMenu value="#{vertretungController.vertretenerId}" rendered="#{userBean.vertretungsmodusMoeglich}">
									<f:selectItems value="#{vertretungController.vertretene}" />
								</h:selectOneMenu>
							</li>
							<li style="float: right;">
								<h:commandButton value="Vertretung starten für" styleClass="ufs-button"
									action="#{vertretungController.vertretungStarten}" rendered="#{userBean.vertretungsmodusMoeglich}"/>
							</li>
							<li style="float: right;">
								<h:commandButton value="Vertretung beenden" styleClass="ufs-button"
									action="#{vertretungController.vertretungBeenden}" rendered="#{userBean.vertretungsmodus}"/>
							</li>
							<li style="float: right;">
								<h:outputText value="Vertretung von " rendered="#{userBean.vertretungsmodus}" />
								<ufs:mitarbeiter value="#{userBean.vertretenerMitarbeiter}" rendered="#{userBean.vertretungsmodus}" />
							</li>
						</ul>
					</div>
				</div>
			</div>
				
				<div style="clear:both">          
          <div class="header-services">              
            <div class="service-box">
             <menu class="service-content">                  
                <li>Kontakt
                </li>                  
                <li>Sitemap
                </li>                  
                <li>Impressum
                </li>                
              </menu>              
            </div>
            <div class="service-box">
            	<menu class="service-content">
            		<li>Build-Datum:</li>                  
                	<li>#{userBean.version}</li>                  
              </menu> 
            </div>              
            <div class="service-box" />                
            <div class="service-box" />
          </div>          
          <div class="header-links">
            <h:graphicImage url="/resources/img/Logo_UFS_Verfahren_v2.jpg" alt="UFS-Verfahren"/>
          </div>          
          <div class="header-rechts">
            <h:graphicImage url="/resources/img/UFS_ssp_cmyk.jpg" alt="Unabhängiger Finanzsenat (UFS)" style="width:200px; float:right;"/>
          </div>        
        </div>
				
		<div>           
          <div class="quickserach">              
            <div style="float: left; margin:0px; padding:0px; display:block;height:28px;">                
              <div style="clear:both;height:28px;padding-left:4px;padding-top: 4px;">
              
							<h:selectOneMenu id="schnellSuchTyp" value="#{schnellSucheController.schnellSuchTyp}">
								<f:selectItems value="#{schnellSucheController.schnellsuchliste}" />
							</h:selectOneMenu> 					
							<h:inputText id="schnellSuchText" type="text" value="#{schnellSucheController.schnellSuchText}" size="14"/>
						
							<span>
								<h:commandButton id="lupe" image="${lupeButton}" class="ufs-aktion-button" action="#{schnellSucheController.schnellSuche}" title="Schnellsuche ausführen" />
							</span>
							<span>
								<h:commandButton image="${addToPoolButton}" class="ufs-aktion-button" action="#{schnellSucheController.addToPool}" title="Schnellsuche ausführen und Suchergebnis zum Arbeitsbereich hinzufügen" />
							</span>
							<span>							                           
                    			<h:commandButton value="Suche erweitern" styleClass="ufs-button" action="#{suchErgebnisController.sucheErweitern}"  />
                    		</span>  
							
						</div>                  
		            </div>		             
        		  </div>
							
					<div style="float: right;">
							<h:commandButton value="1"
								style="#{screenController.activeScreen1 ? 'background-color: lime;' : 'background-color: gray;'}"
								action="#{screenController.activateScreen1}" disabled="#{screenController.activeScreen1}" />
							<h:commandButton value="2"
								style="#{screenController.activeScreen2 ? 'background-color: lime;' : 'background-color: gray;'}"
								action="#{screenController.activateScreen2}" disabled="#{screenController.activeScreen2}" />
							<h:commandButton value="3"
								style="#{screenController.activeScreen3 ? 'background-color: lime;' : 'background-color: gray;'}"
								action="#{screenController.activateScreen3}" disabled="#{screenController.activeScreen3}" />
					</div>
				</div>
				
				<!--  -->
				<div style="clear:both">
              
          <div class="kartei-leiste" style="float:left; padding-left: 4px; margin-top:3px; margin-left:300px;">

			<!-- 
			Hier müsse alle Files eingebundne werden und im jeweiligen File wird überprüft, ob etwas angezeigt wird.
			Das ist notwendig, weil der Import über eine Variable nicht funktioniert (wenn der Aufrufer den Wert von reiterPfad 
			aus einer Variable nimmt und keinen String übergibt). Problem: es wird nicht das richtige File eingebunden, sondern
			das vorhergehende File.
			 -->
			<ui:include src="/faces/verfahren/reiter.xhtml" />
			<ui:include src="/faces/senv/reiter.xhtml" />
			<ui:include src="/faces/admin/reiter.xhtml" />
			<ui:include src="/faces/berichte/reiter.xhtml" />
			<ui:include src="/faces/suche/reiter.xhtml" />
			<ui:include src="/faces/uebersicht/reiter.xhtml" />
			<ui:include src="/faces/verfahren/eingangReiter.xhtml" />
			
			<ui:include src="/faces/verfahren/einAusgangReiter.xhtml" />
          </div>
               
          <div class="pfad-leiste" style="height:20px">                
            <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle; right: 10px;height:20px; padding-left:4px">                  
              <div style=" #position: relative; #top: -50%; right: 10px;color:#FFFFFF">                    
                <h:outputText value="#{title}" escape="false" /> | <h:outputLabel value="#{titleRight}" />
              </div>                
            </div>             
          </div>        
        </div> 
				
			</div>
		</ui:composition>
	</body>
</html>

util.js:

var key = function keyHandler(e){
 	   e = e || window.event;

	   try {
		    var targ;
   	   		var KeyID = e.keyCode;	
	   		var bTriggerDefaultSubmit = false;
	   		
	   		if (e.target) targ = e.target;
	   		else if (e.srcElement) targ = e.srcElement;
	 
		    switch(KeyID) {
		      case 13:
		    	 if (targ) { 
		    		 if (targ.type && targ.type == 'textarea') {
		    			 bTriggerDefaultSubmit = false;
		    		 } else {
		    			 bTriggerDefaultSubmit = true;
		    		 }
		    	 } else {
					bTriggerDefaultSubmit = true;
		    	 }
		    	 
		    	 alert(targ);
		    	 
		    	 if (bTriggerDefaultSubmit == true) {
		    	 	if (document.getElementById('defaultSubmitButton')) { 
						document.getElementById('defaultSubmitButton').click();
						return false;
					} else {
						return false;
					}
				 }
		    	 
		    	 if (bTriggerDefaultSubmit == false ){
		    		 System.out.println("Er ist hier herrein gegangen1!");
		    		 if (document.getElementById("schnellSuchText").toString()!= ""){
		    			 document.getElementById("lupe").onclick();
		    			 System.out.println("Er ist hier herrein gegangen2!");
		    		 }
		    	 }
		      break;
		    }
	   		
	   } catch (exception) {
		   alert('Exception' + exception);
	   }
	
};
document.onkeydown = key;

 

[Fant]

Öhm... wie gesagt, ich kann JS nicht wirklich, aber das sieht für mich so aus, als würdest du gnadenlos JS und Java durcheinander schmeißen.

- Wohin soll er denn mit System.out.println() schreiben? JS wird nur beim Client ausgeführt! Testausgaben solltest du mit alert() hinbekommen.
- Den Inhalt eines Textfeldes bekommst du mit ".value".
- Einen Button klickst du mit ".click"


Beim nächsten Mal aber bitte deine Quellcodes auf das nötigste kürzen. Da steht ja ne Menge drin, was mit dem Problem gar nichts zu tun hat

 

[vanBraQ]

Hab jetzt soweit mal meine "dummen" Fehler verbessert... nun stehe ich immer noch vor dem Problem das wenn ich auf ENTER drücke mir vom IE jedes mal ein kleines Fenster geöffnet wird wo drinnen steht:

Object HTMLInputElement

Warum bekomme ich diese Meldung überhaupt ?

Wie ich auch bemerkt habe geht er mir überhaupt nicht in dieses if rein:

Weil von anderen Seiten aus funktioniert die eingabe mit ENTER (es kommt zwar trotzdem das selbe Fenster wie oben), doch es führt den defaultSubmitButton aus und nicht die Funktion die ich möchte.
Liegt es vllt an meinem verpfuschten JS oder irre ich mich grad total ?

 

[Fant]

Ich weiß ja nicht, wie dein JS-Code nun aussieht...

Wenn der default-Button geklickt wird, dann ist ja zwangsläufig bTriggerDefaultSubmit==true. Was du da zusammengebastelt hast, versteh ich auch nicht so wirklich..


Mein Vorschlag ist ja immer noch sowas:

<h:form id="formid">
        <h:inputText id="inputid"
		onkeydown="if (event.keyCode == 13) { if (document.getElementById('formid:inputid').value != '') {
			document.getElementById('formid:buttonid').click();
			return false;
		}}" />
	<h:commandButton onclick="alert('geklickt');" id="buttonid" value="klick"
		type="button" />
</h:form>

 

[vanBraQ]

jetziger code sieht so aus:

if (bTriggerDefaultSubmit == false ){
       if (document.getElementById("schnellSuchText").value() != ""){
	                document.getElementById("schnellSuchStart").click();
       }
}

anscheinend wird bei mir der bTriggerDefaultSubmit nie true dadurch wird nie in dieses if hinein gegangen ... aber normalerweiße sollte doch bTriggerDefaultSubmit hier:

if (targ) { 
		    		 if (targ.type && targ.type == 'textarea') {
		    			 bTriggerDefaultSubmit = false;
		    		 } else {
		    			 bTriggerDefaultSubmit = true;
		    		 }
		    	 } else {
					bTriggerDefaultSubmit = true;
		    	 }

auf true gesetzt werden oder ?

 

[Fant]

Dann teste halt mal mit alert-Ausgaben, was an welcher Stelle jeweils in den Variablen drinsteht. Einfach mal oben anfangen und mit den Werten vergleichen, die du erwartest.

 

[vanBraQ]

habs geschafft DD für alle die wissen wollen wie der code nun richtig geht:

var key = function keyHandler(e){
 	   e = e || window.event;
	   try {
		    var targ;
   	   		var KeyID = e.keyCode;	
	   		var bTriggerDefaultSubmit = true;
	   		
	   		if (e.target) targ = e.target;
	   		else if (e.srcElement) targ = e.srcElement;
	 
		    switch(KeyID) {
		      case 13:
		    	  alert(targ.id);
		    	  if (targ && targ.type && ('' + targ.type).indexOf('text') != -1
		    			  && targ.id == document.getElementById('schnellSuchText')) {
		    		bTriggerDefaultSubmit = false;
		    	  }
		    	 
		    	  if (bTriggerDefaultSubmit == true) {
		    	 	if (document.getElementById('defaultSubmitButton')) { 
						document.getElementById('defaultSubmitButton').click();
						return false;
					} else {
						return false;
					}
				  } else {
					  document.getElementById("schnellSuchStart").click();
					  return false;
		    	  }
		      break;
		    }
	   		
	   } catch (exception) {
		   alert('Exception' + exception);
	   }
	
};

danke an fant der mir sehr geholfen hat