ส่งข้อมูลแบบฟอร์มผ่าน JavaScript ไปยัง backing bean โดยใช้ JSF และไพรม์เฟซ

ฉันกำลังพยายามประมวลผลข้อมูลอินพุตสองสามบรรทัดโดยใช้วิธี JavaScript ที่ใช้บริการ Geocoding ที่ Google มอบให้ และวางข้อมูลที่ประมวลผลนั้นลงใน Backing Bean

ผู้ใช้จะเห็นหน้าเข้าสู่ระบบซึ่งพวกเขาป้อนรายละเอียดที่อยู่ของตน ทันทีที่คลิกปุ่มส่ง ฉันจะพยายามระบุพิกัดทางภูมิศาสตร์ของที่อยู่โดยการเรียกวิธี JavaScript วิธีนี้จะอ่านข้อมูลที่ผู้ใช้ป้อนและส่งไปยังบริการ geocode บริการนี้ใช้เวลาไม่กี่วินาทีในการดำเนินการ ทันทีที่เสร็จสิ้น ฉันต้องการจัดเก็บข้อมูลที่พบใน backing bean ของหน้าเข้าสู่ระบบ

ฟังก์ชัน JavaScript ต่อไปนี้ใช้เพื่อระบุพิกัดทางภูมิศาสตร์ของที่อยู่

    function codeAddress() {
        alert('coding address');
        geocoder = new google.maps.Geocoder();
        postcode = document.getElementById('loginForm:address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              alert('setting location: '+results[0].geometry.location);
              document.getElementById('loginForm:location').value = results[0].geometry.location;
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

มันเก็บค่าของมันไว้ในฟิลด์ที่ซ่อนอยู่ภายในแบบฟอร์ม ฉันไม่รู้ว่านี่เป็นสิ่งที่ดีที่สุดหรือไม่ มันเป็นเพียงสิ่งที่ฉันได้เห็นในหลายๆ ตัวอย่าง ฉันถือว่าการตั้งค่าขององค์ประกอบนี้จะเรียกตัวตั้งค่าตำแหน่งที่เกี่ยวข้องใน loginBean

    <h:inputHidden id="location" value="#{loginBean.location}" />

ฉันกำลังพยายามทำให้ทั้งหมดนี้เกิดขึ้นโดยใช้ปุ่มที่ใช้ในการส่งแบบฟอร์ม

        <p:commandButton id="submitButton" value="login"
            action="#{loginBean.doLogin}"
            styleClass="blue login" update="growl">
                <p:ajax event="click" onstart="codeAddress()" />
        </p:commandButton>

ฉันต้องเสริมว่าฉันไม่แน่ใจเกี่ยวกับการก่อสร้างนี้ การกดปุ่มส่งอาจเป็นการโหลดหน้าถัดไปทันทีโดยไม่ต้องให้โอกาสโทร ajax เลย

การพยายามทำสิ่งนี้ให้สำเร็จทำให้ฉันมีปัญหาหลายประการ การใช้โค้ดด้านบนจะไม่มีการเรียกใช้ฟังก์ชัน JavaScript เพื่อความเรียบง่าย ฉันได้ประกาศฟังก์ชันนี้ไว้ที่ด้านบนของหน้าในแท็กสคริปต์ ปัญหาที่สองคือฉันไม่ชัดเจนสำหรับฉันว่าอะไรคือวิธีที่ดีที่สุดในการส่งค่านี้จากวิธี JavaScript ไปยัง LoginBean ฉันควรวางแท็กที่ซ่อนอยู่ในแบบฟอร์มและเชื่อมโยงแท็กค่ากับคุณสมบัติ loginBean หรือไม่ ฉันควรเพิ่มผู้ฟังในองค์ประกอบ ajax หรือไม่


javascript primefaces jsf-2
person malebox    schedule 26.02.2013    source แหล่งที่มา
comment
นี่เป็นข้อผิดพลาดในการพิมพ์หรือคุณมี onstart="codeAddress" จริงๆ หากแทนที่ด้วย onstart="codeAddress()"   -  person partlov    schedule 26.02.2013
comment
ขออภัย นั่นเป็นการพิมพ์ผิดจริงๆ   -  person malebox    schedule 26.02.2013
comment
@malebox หาก js ของคุณไม่ถูกเรียก หมายความว่าคุณไม่ได้รวมมันไว้ในเพจของคุณ <h:outputScript name="js/myFile.js" target="head" /> ให้วางไฟล์ js ในโฟลเดอร์ WebContent\resource   -  person Daniel    schedule 26.02.2013
comment
@Daniel, OP กล่าวว่า js ของเขาถูกกำหนดไว้ในมุมมอง   -  person kolossus    schedule 26.02.2013

คำตอบ (4)


arrow_upward
0
arrow_downward

ฟังก์ชันการเรียกกลับ JavaScript ของบริการควรทริกเกอร์การส่งแบบฟอร์ม (เมื่อสำเร็จ) วิธีนี้จะทำให้มีเวลาทำให้เสร็จก่อนส่งเสมอ

person Christophe Roussy    schedule 26.02.2013

arrow_upward
0
arrow_downward

ฉันคิดว่าคุณเก่งจาวาสคริปต์

คุณสามารถลองใช้เคล็ดลับ

  1. นอกจากปุ่มคำสั่งแล้ว ให้ใช้ปุ่ม html ธรรมดาซึ่งจะมองเห็นได้และปุ่มคำสั่งซ่อนอยู่ใน div
  2. เมื่อผู้ใช้คลิกปุ่ม html ธรรมดา ทำการเรียกตำแหน่งทางภูมิศาสตร์ ajax เมื่อสำเร็จและหลังจากอัปเดตฟิลด์ที่ซ่อนแล้ว เพียงเรียก javascript เพื่อคลิกปุ่มคำสั่งที่ซ่อนอยู่โดยทางโปรแกรม

หวังว่านี่จะช่วยได้

person baba.kabira    schedule 26.02.2013

arrow_upward
0
arrow_downward

<p:ajax/> นั้นไม่จำเป็นและเป็นสาเหตุหลักที่ทำให้ไม่มีการเรียกใช้ฟังก์ชันจาวาสคริปต์ วิธีที่รวดเร็วและสกปรกในการดำเนินการนี้คือ กำจัด <p:ajax/> <p:commandButton/> ก็เพียงพอแล้วสำหรับกรณีการใช้งานของคุณเหมือนเดิม

    <p:commandButton id="submitButton" onclick="codeAddress();" value="login" action="#{loginBean.doLogin}" styleClass="blue login" update="growl"/>

โหมดการส่งผ่านตัวแปรของคุณจะใช้งานได้ แต่ไม่มีประสิทธิภาพหรือปลอดภัยเป็นพิเศษ

อีกทางเลือกหนึ่งคือใช้ javascript api ของไพรม์เฟซ addSubmitParam เพื่อส่งค่าที่สร้างขึ้นไปยัง backing bean เป็นพารามิเตอร์คำขอ

    function codeAddress() {
    alert('coding address');
    geocoder = new google.maps.Geocoder();
    postcode = document.getElementById('loginForm:address').value;

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          alert('setting location: '+results[0].geometry.location);
         PrimeFaces.addSubmitParam(results[0].geometry.location); //addSubmitParam sends a request parameter
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
person kolossus    schedule 26.02.2013

arrow_upward
0
arrow_downward

ฉันอยากจะแนะนำบางอย่างเช่น:

<h:form>
<p:inputText widgetVar="widget_postcode" value="#{backingBean.address}"/>
<p:inputText style="display:none;" widgetVar="widget_geocode" value="#{backingBean.geocode}"/>
<p:commandButton id="submitButton" value="login" type="button" 
            styleClass="blue login" onclick="codeAddress();">
        </p:commandButton>
<p:remoteCommand name="sendData" process="@form" update="growl"/>
</h:form>



function codeAddress() {
    alert('coding address');
    geocoder = new google.maps.Geocoder();
    postcode = widget_postcode.getJQ().val();

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          alert('setting location: '+results[0].geometry.location);
         widget_geocode.getJQ().val(results[0].geometry.location);
         sendData();
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

วิธีการนี้ใช้วิดเจ็ต PF แทนที่จะใช้ ID ซึ่งสามารถเปลี่ยนแปลงได้

นอกจากนี้ ให้พิจารณาใช้ API การเติมข้อความอัตโนมัติของที่อยู่ Google มีองค์ประกอบ JSF สำหรับสิ่งนั้น

person rootkit    schedule 26.02.2013