GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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

เอกนันท์ ขันทอง

คือ ผม ทำสมัครสมาชิกโดยใช้ GModal

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



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


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


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



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



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





ขอบคุณครับ
13 ก.พ. 2554 16 3,346
เอกนันท์ ขันทอง

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




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>REGISTER_TITLE</span></p>

    <p>

        <label for="register_username">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">REGISTER_USER_COMMENT</p>

    <p>

        <label for="register_email">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">REGISTER_EMAIL_COMMENT</p>

    <p>

        <label for="register_password">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">REGISTER_PASSWORD_COMMENT</p>

    <p>

        <label for="register_repassword">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">REGISTER_REPASSWORD_COMMENT</p>

    <p>

        <label for="register_antispam">ANTISPAM :</label>

        <img src="http://www.goragod.com/antispamimage.php?id={ANTISPAM}" 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">REGISTER_ANTISPAM_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> REGISTER_ACCEPT</span>

    </p>

    <p>

        <label for="register_submit">&nbsp;</label>

        <input type="submit" name="register_submit" id="register_submit" class="button" value="REGISTER_SUBMIT" />

    </p>

    <input type="hidden" id="antispam" name="antispam" value="{ANTISPAM}"/>

    <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
Wisanu Saen

#16
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M
^