A-AA+then

เกียวกับ GModal การเช็คค่า และ Submit ครับผม

1,895
คือ ผม ทำสมัครสมาชิกโดยใช้ GModal
ส่วน ปุ่ม Register ใช้ PHP echo ออกมา ไม่สามารถเรียกใช้ $G ได้ เพราะอะไรครับเลยต้องใช้ onclick เรียกใช้ฟั่งชั่นไปเลย อยากทราบวิธีแก้ไข ให้ใช้ $G ได้

ส่วน เมื่อ ป้อปอัพ(Gmodal) ขึ้นมาแล้ว จะใช้

    ตรวจสอบฟอร์มขณะพิมพ์ด้วย GAJAX

แต่มันไม่มีอะไรเกิดขึ้นเลยอะครับ

แต่ถ้ารันในเพจธรรมก็ ปกติ ไม่เข้าใจ ในส่วนนี้เลยครับ

อยากทราบวิธีการทำ submit จาก Gmodal ด้วยครับ ว่าต้องศึกษาจากฟอร์มไหน


ขอบคุณครับ

16 ความคิดเห็น

ถามเพิ่ม ครับ ลืมๆๆ

    GAJAX บทที่ 25 GForm กับการ Login ในส่วน เมื่อทำตาม พอกด login มันขึ้นให้ Download แทนครับ


หาก็ไม่ทราบเพราะอะไร
1

เนื่องจากการเรียกใช้ GModal ปกติจะถูกเรียกใช้งานโดย Ajax ดังนั้น ตามกฏแล้ว Javascript ในฟอร์มที่เรียกจะไม่ทำงานครับ ดังนั้น ให้เขียน Javascript นอกฟอร์มครับ ซึ่งผมไม่รู้วิธีที่เขียนอยู่เลยไม่สามารถตอบได้ว่าควรเขียนยังไง

ลองดูที่ GCMS นะครับ การเรียกฟอร์ม Login ใช้ฟังก์ชั่นนี้
var doMember = function (event) {
    var req = new GAjax();
    req.inintLoading('wait', true);
   // ajax เรียกฟอร์ม login
    req.send(WEB_URL + 'xhr.php', 'action=modal&module=' + GEvent.element(event).id, function (xhr) {
       // ข้อมูลฟอร์มในรูป JSON ฟอร์มจะอยู่ที่ content
        var c = decodeURIComponent(xhr.responseText.toJSON()[0].content);
       // แสดงฟอร์มด้วย GModal
        modal = new GModal().show(c);
       // ให้ Javascript ในฟอร์มทำงาน
        c.evalScript();
    });
};

คำสั่งที่ให้ Javascript ที่แทรกมาทำงานใช้คำสั่ง c.evalScript(); ดังโค้ดด้านบน
<form id="register_frm" class="register_frm mainform fixlabel" method="post" action="http://www.goragod.com">
    <p class="h"><span>ลงทะเบียนสมาชิกใหม่</span></p>
    <p>
        <label for="register_username">ชื่อผู้ใช้ :</label>
        <input class="require" type="text" name="register_username" id="register_username" size="40" maxlength="20" />
        <span class="result" id="resultUsername">&nbsp;</span>
    </p>
    <p class="comment">ภาษาอังกฤษตัวพิมพ์เล็กตัวเลขและขีดกลาง ไม่น้อยกว่า 4 ตัวอักษร</p>
    <p>
        <label for="register_email">ที่อยู่อีเมล์ :</label>
        <input class="require" type="text" name="register_email" id="register_email" size="40" maxlength="255" />
        <span class="result" id="resultEmail">&nbsp;</span>
    </p>
    <p class="comment">ระบบจะส่งข้อมูลการลงทะเบียน ไปยังอีเมล์นี้ กรุณาใช้ที่อยู่อีเมล์ที่ติดต่อได้ และกรุณาตรวจสอบใน Junk ด้วย</p>
    <p>
        <label for="register_password">รหัสผ่าน :</label>
        <input class="require" type="password" name="register_password" id="register_password" size="40" maxlength="20" />
        <span class="result" id="resultPassword">&nbsp;</span>
    </p>
    <p class="comment"></p>
    <p>
        <label for="register_repassword">ยืนยันรหัสผ่าน :</label>
        <input class="require" type="password" name="register_repassword" id="register_repassword" size="40" maxlength="20" />
        <span class="result" id="resultRepassword">&nbsp;</span>
    </p>
    <p class="comment"></p>
    <p>
        <label for="register_antispam">Anti Spam :</label>
        <img src="http://www.goragod.com/antispamimage.php?id=mxfweeyphurbdubcwdrtrqjdcvjumuws" alt="antispam" class="antispam" />
        <input class="require" type="text" name="register_antispam" id="register_antispam" size="22" maxlength="4" />
        <span class="result" id="resultAntispam">&nbsp;</span>
    </p>
    <p class="comment"></p>
    <dl class="info">
ข้อตกลงการสมัครสมาชิก
1. การสมัครสมาชิกเพื่อสามารถร่วมกิจกรรมกับเว็บไซต์ได้อย่างสมบูรณ์
2. การสมัครสมาชิกต้องใช้อีเมล์จริงที่ติดต่อได้ เนื่องจากจะมีการส่งการยืนยันการสมัครไปกับอีเมล์ที่ลงทะเบียนไว้ หรือใช้สำหรับการขอรหัสผ่านใหม่
3. ทางเว็บไซต์ ยึดถือนโยบายส่วนบุคคล ข้อมูลส่วนตัวจะไม่ถูกเปิดเผยนอกจากข้อมูลที่จำเป็นสำหรับการยืนยันตัวตนเป็นกรณีไป
4. เมื่อได้อ่านและยอมรับข้อตกลงนี้กรุณา เลือก ยอมรับ ด้านล่าง
</dl>
    <p>
        <label for="register_accept">&nbsp;</label>
        <input type="checkbox" id="register_accept" name="register_accept" class="checkbox" />
        <span> ยอมรับข้อตกลงนี้</span>
    </p>
    <p>
        <label for="register_submit">&nbsp;</label>
        <input type="submit" name="register_submit" id="register_submit" class="button" value="สมัครสมาชิก" />
    </p>
    <input type="hidden" id="antispam" name="antispam" value="mxfweeyphurbdubcwdrtrqjdcvjumuws"/>
    <input type="hidden" name="modal" value="{MODAL}"/>
</form>
<script type="text/javascript">
//<![CDATA[
    new GForm('register_frm', '{FORMACTION}', 'wait', true, onMemberSubmit).onsubmit(doFormSubmit);
    new GValidator('register_username', 'resultUsername', 'keyup,change', checkUser, 'http://www.goragod.com/modules/member/action.php', doCheckCallback, 'register_frm');
    new GValidator('register_email', 'resultEmail', 'keyup,change', checkEmail, 'http://www.goragod.com/modules/member/action.php', doCheckCallback, 'register_frm');
    new GValidator('register_password', 'resultPassword', 'keyup,change', checkPassword);
    new GValidator('register_repassword', 'resultRepassword', 'keyup,change', checkPassword);
    new GValidator('register_antispam', 'resultAntispam', 'keyup,change', checkAntispam, 'http://www.goragod.com/modules/member/action.php', doCheckCallback, 'register_frm');
    $G('register_frm').set('autocomplete', 'off');
    inintRequireField('register_frm');
//]]>
</script>

ด้านบนคือฟอร์ม register และ Javascript ที่ใช้ ลองดูวิธีการเขียน Javascript นะครับ ซึ่งจำเป็นต้องเขียนให้ถูกต้อง เพื่อให้คำสั่ง evalScript สามารถทำงานได้

โค้ดทั้งหมดนี่คือโค้ดของ GCMS ครับ
2

อ้าง ที่ อาจารย์ตอบนะครับ
ลองดูที่ GCMS นะครับ การเรียกฟอร์ม Login ใช้ฟังก์ชั่นนี้
    var doMember = function (event) {
        var req = new GAjax();
        req.inintLoading('wait', true);
        // ajax เรียกฟอร์ม login
        req.send(WEB_URL + 'xhr.php', 'action=modal&module=' + GEvent.element(event).id, function (xhr) {
            // ข้อมูลฟอร์มในรูป JSON ฟอร์มจะอยู่ที่ content
            var c = decodeURIComponent(xhr.responseText.toJSON()[0].content);
            // แสดงฟอร์มด้วย GModal
            modal = new GModal().show(c);
            // ให้ Javascript ในฟอร์มทำงาน
            c.evalScript();
        });
    };
ผมศึกษา login จาก บทที่ 7 การทำ Login ด้วย AJAX นี้อะครับ

คือ ไม่เข้าว่า var doMember = function (event) { เรียกใช้แล้วให้ ทำการ load ฟอมร์ม login มาตอนไหน อะครับ

ไม่ทราบวิธีการเรียกใช้

ช่วยแนะนำเพิ่มเติมด้วยครับ
3

โค้ดด้านบน เป็นตัวอย่างการเรียกใช้จริงซึ่งมีอยู่ใน GCMS ซึ่งจะเห็นว่ามันทำงานได้ตามลักษณะที่เห็น

ก่อนอื่น ให้เข้าใจก่อนว่า ผมไม่สามารถเขียนโค้ดที่ต้องการให้ได้ เนื่องจาก
1. ไม่มีเวลาเพียงพอ
2. เขียนไปก็เอาไปใช้ไม่ได้อยู่ดี เนื่องจากผมไม่รู้ว่า หน้าเว็บที่ทำอยู่เป็นยังไง (ไม่ต้องพยายามส่งมาให้นะ)

ดังนั้น ผมอยากให้พิจารณาจากโค้ดด้านบนและทำความเข้าใจ ว่ามันคืออะไร แล้วนำไปปรับใช้ กับโค้ดตัวเอง ผมเน้นที่การทำความเข้าใจนะครับ เพราะถ้าเข้าใจ จะประยุกต์ได้ไม่ยาก

ฟังก์ชั่น doMember คือฟังก์ชั่นที่ทำงานเมือมีการคลิกปุ่ม register (ไปลองทำดูว่ามันจะมาได้ไง) เธออาจเขียนด้วยวิธีอื่นใดก็ได้ตามแต่ถนัด แค่ขอให้มันเรียกมาฟังก์ชั่นที่เธอเขียน เมื่อคลิก Register ก็พอ

ในฟังก์ชั่นมีการเรียกใช้ GAjax ทำการโหลดฟอร์ม register (ตามโค้ดฟอร์มที่แนบ) และรับค่ากลับมา ในรูป JSON (อาจเป็นรูปอื่นใดก็ได้ตามถนัด) ซึ่งฟอร์ที่ต้องการจะถูกส่งมายังตัวแปรนี้ var c = decodeURIComponent(xhr.responseText.toJSON()[0].content);

ก่อนส่งให้ GModal แสดงผล ต่อไป modal = new GModal().show(c);

และถัดจากนั้นคือคำสั่งที่ทำให้ Javascript ในฟอร์ม ทำงาน c.evalScript();

ประเด็นมันอยู่ที่ ให้ทำความเข้าใจขั้นตอนต่างๆ ข้างต้น และ นำไปปรับใช้กับโค้ดตัวเอง ซึ่งอาจได้มาด้วยวิธีใดก้ได้ ตามที่ตัวเองถนัด ซึ่งขั้นตอนดังกล่าว ก็เป็นแค่ขั้นตอนพื้นฐานทั่วๆไปตามลำดับอยู่แล้ว

ลองทำดูนะครับ
4

function check_user(username, passwd, action) {
  var cancle=false;
  if (action=='login') {
    if (username.length==0) {
      alert('กรุณาป้อน Username ก่อน');
      document.login_form.user.focus();
      cancle=true;
    } else if (passwd.length==0) {
      alert('กรุณาป้อน Password ก่อน') ;
      document.login_form.passwd.focus();
      cancle=true;
    }
  }
  if (cancle==false) {
    var req = GAjax();
    req.inintLoading( 'wait' , true );
    req.send('checkuser.php','user='+encodeURIComponent(username)+
    '&passwd='+encodeURIComponent(passwd)+
    '&action='+action,function(xhr){
    $E('login').innerHTML = xhr.responseText;
    xhr.responseText.evalScript();
    });

  }
  return false;
}
ตรงนี้คือส่วนที่ทำ การแก้ไข ให้ส่งไปยัง checkuser และใส่ evalScript เพื่อให้ใช้จาวา สคิปได้ ตามความเข้าใจ

แต่มัน err ทำให้เพจ ไม่โหลดอะไรขึ้นมาเลย ครับ

ผมเลยไม่แน่ใจว่า ทำการส่งค่าถูกรึป่าว

5

หมายถึงไม่แสดง GModal หรือเปล่า ถ้าใช่ ไม่เห็นมีโค้ดส่วนไหนเกี่ยวข้องกับ GModal เลย

 modal = new GModal().show(xhr.responseText);

น่าจะประมาณนี้ ลองดูโค้ดที่ผมให้ด้านบน

อีเรื่องนึงที่ควรรู้ ถ้าได้อ่านบทความอื่นๆของผมประกอบ การเขียน Javascript เพื่อให้ใช้งานได้กับ GModal หรือ คำสั่ง evalScript ต้องเขียนให้ถูกต้องตามกฏ 100% (กฏเล็กน้อยซึ่งการเรียกหน้าปกติทำได้ แต่ถ้าใช้กับ Ajax มันจะเดียงทันที) ลองดูรูปแบบการเขียนตามโค้ดตัวอย่างด้านบน ครับ และ หาอ่านรายละเอียดเพิ่มเติมได้บนเว็บผม

http://gcms.goragod.com/howto/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%97%E0%B8%A3%E0%B8%81%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99%20Javascript%20%E0%B8%9A%E0%B8%99%20GCMS.html
6

อันนี้ไม่ได้หมายถึง Gmodal ครับ

แค่จะลองทำ การส่งค่า ของ GAjax แล้วมาแสดงที่หน้าเว็บหลัก 

เพื่อให้เข้าใจ แล้วค่อย ใช้ Gmodal ครับ
7

ผมลอง err มัน มาแบบนี้อะครับ

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; InfoPath.3; AskTbPTV2/5.9.1.14019)
Timestamp: Mon, 14 Feb 2011 16:37:54 UTC


Message: Object expected
Line: 264
Char: 5
Code: 0
URI: http://www.goragod.com/ajax/gajax.js
8

นี่คือ โค้ด ครับ err แบบไปไม่ถูกเลย

function check_user(username, passwd, action) {
  var cancle=false;
  if (action=='login') {
    if (username.length==0) {
      alert('กรุณาป้อน Username ก่อน');
      document.login_form.user.focus();
      cancle=true;
    } else if (passwd.length==0) {
      alert('กรุณาป้อน Password ก่อน') ;
      document.login_form.passwd.focus();
      cancle=true;
    }
  }
  if (cancle==false) {
    var req = new GAjax();
    req.inintLoading( 'wait' , true );
    req.send( 'checkuser.php' , 'useram='+username+'&passam='+passwd+'&action='+action , function( xhr ) {
    $E('login_table').innerHTML = xhr.responseText;
    alert(xhr.responseText);
    });
  }
  return false;
};
9

คือมีคำถามใหม่ละครับ ส่วนข้าง ผม ลบ req.inintLoading( 'wait' , true ); ออกไปใช้ได้อะครับ

function check_user(username, passwd, action) {
  var cancle=false;
  if (action=='login') {
    if (username.length==0) {
      alert('กรุณาป้อน Username ก่อน');
      document.login_form.user.focus();
      cancle=true;
    } else if (passwd.length==0) {
      alert('กรุณาป้อน Password ก่อน') ;
      document.login_form.passwd.focus();
      cancle=true;
    }
  }
  if (cancle==false) {
    var req = new GAjax();
    req.send( 'checkuser.php' , 'useram='+username+'&passam='+passwd+'&action='+action , function( xhr ) {
    $E('login_table').innerHTML = xhr.responseText;
    xhr.responseText.evalScript();
    });
  }
  return false;
};
//---------->
//<![CDATA[
    $G('register').addEvent('click', function(event){
    alert("ssa")
    });
//]]>

พอกดปุ่มรีจีสเตอร์ก็ไม่ทำงาน เหมือนเดิมเลยครับ
เหมือมเดิมเลยครับ ไม่ทราบว่า มีธีวิธีแก้ไหมครับ ผมพยายามดูอย่างละเอียดแล้ว

ระหว่าง จะลองๆ เองไปเรื่อยๆครับ

ยังไงขอคำแนะนำเพิ่มเติมด้วยนะครับ
10

req.inintLoading('wait', true);

หมายถึงการแสดงรูปรอโหลด (<div id="wait">Wait...</div>) กลางจอภาพ (true)
<input id="register" value="Register" type="button" />
<script type="text/javascript">
//<![CDATA[
    $G('register').addEvent('click', function(){
        alert('clicked...');
    });
//]]>
</script>

บางทีข้อผิดพลาดก็หญ้าปากคอกครับ ลองดูตัวอย่างง่ายๆ ตามด้านบนครับ

อีกเรื่องคือ มีบทความพร้อมตัวอย่างจำนวนมากบนเว็บนะครับ จะลองศึกษาดูก็ได้ (แนะนำให้พยายามทำตามบทความครับ จะได้เข้าใจได้ดียิ่งขึ้น)
11

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; InfoPath.3)
Timestamp: Thu, 17 Feb 2011 16:00:01 UTC


Message: Object expected
Line: 811
Char: 6
Code: 0
URI: http://www.goragod.com/ajax/gajax.js


Message: Object doesn't support this property or method
Line: 275
Char: 32
Code: 0
URI: http://www.goragod.com/ajax/gajax.js


error ส่วนนี้อะครับ ใช้ new GForm('frm_upload','wait',false).onsubmit(doUpload);

จากตัวอย่าง

    GAJAX บทที่ 24 GForm อัปโหลดแบบไม่เปลี่ยนหน้าด้ว..

12

ดูเหมือนจะเคยถามคำถามประมาณนี้มาแล้ว และได้ข้อสรุปไปแล้ว...

frm_upload มีหรือเปล่า และต้องเป็น id และ มีมากว่า 1 อันหรือเปล่า
wait มีหรือเปล่า wait คืออะไร หาคำตอบได้จากด้านบน หรือ อ่านบทความเกี่ยวกับ GForm

ปล.ตัวอย่างที่ให้ไว้ตามบทเรียน ถ้ามันไม่สามารถทำงานได้หรือทำงานผิดพลาด กรุณาแจ้งด้วยว่ามันไม่ทำงาน (เฉพาะโค้ดตามตัวอย่างที่ยังไม่ได้ดัดแปลงเท่านั้น) เนื่องจาก GAjax มีการปรับปรุงหลายครัง บทความเก่าๆอาจใช้งานไม่ได้ (เป็นบางกรณี) ซึ่งผมอาจไม่สามารถกลับไปตรวจสอบได้ครบทุกอัน ดังนั้น ถ้าพบว่ามันผิดพลาด ฃ่วยแจ้งด้วยก็ดี ผมจะได้ตามกลับไปแก้ไขตัวอย่างให้
13

function check_user(username, passwd, action) {
  var cancle=false;
  if (action=='login') {
    if (username.length==0) {
        alert('กรุณาป้อน Username ก่อน');
        document.login_form.user.focus();
        cancle=true;
    } else if (passwd.length==0) {
        alert('กรุณาป้อน Password ก่อน') ;
        document.login_form.passwd.focus();
        cancle=true;
    }
  }
  if (cancle==false) {
    var req = new GAjax();
    req.inintLoading('wait', true);
    req.send( 'checkuser.php' , 'useram='+username+'&passam='+passwd+'&action='+action , function( xhr ) {
        $E('login_table').innerHTML = xhr.responseText;
        xhr.responseText.evalScript();
        doLoadMenuuser(useram,passwd);
        doLoadpage('homepage.php','content');
    });
  }
  return false;
};



function doLoadMenuuser(username,passwd){
    var req = new GAjax();
    req.inintLoading('wait', true);
    req.send( 'checktypeuser.php' , 'useram='+username+'&passam='+passwd, function( xhr ) {
    alert(xhr.responseText);
        var type = xhr.responseText;
        if (type == 1){
            alert("u");
        }else if (type == 2){
            $E('submenu')="aaaaaaaaaa";
        }else{
            alert("a");
        }
        xhr.responseText.evalScript();
    });    
}


สามารถเขียนแบบนี้ได้ไหมครับ  เพราะว่ามันไม่แสดงผลอะไร เลย
14

    คงต้องหัด debug แล้วมั้ง...
    
    ตอบจากคำถามคือ ได้ ครับ ไม่มีกฏของ Javascript ห้ามไว้
    
    อย่างแรกเลย ตรวจ สอบดูว่ามีการส่งค่ากลับหรือไม่ alert(xhr.responseText) ลองเดาซิว่ควรมีอะไร
    
    อย่างที่ 2 เธอเอาใส่ไว้ใน login_table คำสั่ง $E('login_table').innerHTML = xhr.responseText;
    น่ะถูกแล้ว ถึงตอนนี้ถ้า xhr.responseText มีอย่างถูกต้อง มันก็ควรแสดงผล ถ้าไม่แสดง ก็ลองกลับไปสำรวจ login_table ว่ามีอะไรผิดพลาดที่นั่น
    
    ที่เหลือหลังจากนี้ จะทำอะไรต่อก็ได้ ถ้ามี Javascript แทรกมา ก็สามารถใช้คำสั่ง evalScript() เพื่อให้มันทำงานด้วยได้
    
    คำแนะนำที่น่าจะทำ (มีในบทความ) ควรมี Firefox ติดตั้งไว้ พร้อมกับ Firebug เพื่อไว้ใช้หาจุดบกพร่องของ Javascript ซึ่งถ้าหัด Debug เมื่อเหิดข้อผิดพลาดใดๆ จะช่วยให้เราหาคำตอบได้ง่ายกว่า (ติดดั้งแล้วก็หัดใช้ด้วยละ) แรกๆอาจยากและไม่เข้าใจครับ แต่มั่วๆไปเดี๋ยวก็ได้เองครับ (ผมก็เริ่มจากมั่วนี่แหละ laugh)

15

16
^