PHP วิธีส่งตัวแปร ไปที่ Bootstrap Modals

&NewLine;<p class&equals;"wp-block-paragraph">Bootstrap Modals คือ จาวาสคลิปต์ปลั๊กอิน มีไว้สำหรับการแสดงผลข้อมูล ทั้งรูปภาพ ข้อความ หรือแบบฟอร์มรับข้อมูล &lpar; html input form &rpar; ในลักษณะป๊อปอัพ เป็นหนึ่งในความสามารถของ Bootstrap Framework <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">กรณีที่เราต้องการแสดงผลข้อมูล ตัวแปรแบบ dynamic หรือ ข้อมูลที่ถูกดึงมาจากฐานข้อมูล หรือข้อมูลที่ถูกส่งมาจากอีกหน้าเว็บเพจอื่นบน Modal Pupup สามารถทำได้ด้วยการใช้ความสามารถของ Jquery Load Content <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">วิธีส่งตัวแปร ไปที่ Bootstrap Modals<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>วิธีการ คือ ปกติการแสดงผล bootstrap modal จะเป็นการคลิกแล้วแสดงผลทันที ให้เปลี่ยนจากการคลิกแล้วแสดงทันทีเลย ไปเป็น คลิกแล้ว โหลดข้อมูลให้เสร็จก่อน จากนั้นค่อยสั่งให้ modals แสดงผล<&sol;li><li>สร้างปุ่มคลิกสำหรับการโหลดข้อมูล modals <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><a onclick&equals;"loadAndShowModal&lpar;&rpar;&semi;">Show Modal<&sol;a><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>จากนั้นสร้าง Javascript ฟังก์ชั่น ตั้งชื่อว่า loadAndShowModal และส่งตัวแปรแบบ POST ไปยัง bootstrap modal <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"markup" class&equals;"language-markup">function loadAndShowModal&lpar;&rpar;&lbrace;&NewLine; &sol;&sol; ตัวแปรที่ต้องการส่งไปที่ modal&NewLine; var post &equals; new Object&lpar;&rpar;&semi;&NewLine; post&period;name &equals; 'นาย เอบีซี นามสมมุติ'&NewLine; post&period;description &equals; 'ประสบการณ์การทำงาน 1 ปี'&semi;&NewLine;&NewLine; &sol;&sol; โหลดข้อมูลไฟล์ modals&period;php มาที่ contianer&lowbar;modals และส่งตัวแปรแบบ post ไปให้ด้วย หลังจากโหลดเสร็จ ค่อยสั่งให้ modal แสดงผล&NewLine; &dollar;&lpar;'&num;contianer&lowbar;modals'&rpar;&period;load&lpar;'modals&period;php'&comma;post&comma;function&lpar;&rpar;&lbrace;&NewLine; &dollar;&lpar;"&num;modal"&rpar;&period;modal&lpar;'show'&rpar;&semi;&NewLine; &rcub;&rpar;&semi;&NewLine;&rcub;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ที่ไฟล์ modals&period;php เราก็แค่เขียนรับค่าตัวแปร และเขียนคลาส bootstrap modal ไว้ใช้งาน<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"markup" class&equals;"language-markup">&dollar;name &equals; &dollar;&lowbar;POST&lbrack;'name'&rsqb;&semi;&NewLine;&dollar;description &equals; &dollar;&lowbar;POST&lbrack;'description'&rsqb;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เมื่อเราคลิกที่ปุ่ม Show Modal โปรแกรมจะเข้าไปทำงานที่ฟังก์ชั่น showAndLoadModal ภายในฟังก์ชั่นนี้ เราสามารถจัดการกับตัวแปรต่าง ๆ กำหนดค่า value ให้กับตัวแปรภายในฟังก์ชั่นนี้ให้เสร็จ จากนั้นระบบก็จะส่งข้อมูลทั้หงมดแบบ POST ไปที่ modal ในส่วนของ modal เราก็ทำการรับค่าตัวแปรทั้งหมด จากนั้นก็สามารถนำไปใช้งาน ในแต่ละส่วนได้ ตัวอย่างการทำงานของระบบตามภาพด้านล่าง<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;PHP-วิธีส่งตัวแปร-ไปที่-Bootstrap-Modals-940x405&period;png" alt&equals;"" class&equals;"wp-image-5744" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;PHP-วิธีส่งตัวแปร-ไปที่-Bootstrap-Modals&period;png" data-full-size&equals;"1588x684" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">สามารถดาวน์โหลด Source Code ตัวอย่างได้ที่ Gitlab <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;gitlab&period;com&sol;wpomipon&sol;bootstrap-modal-vairable" target&equals;"&lowbar;blank">https&colon;&sol;&sol;gitlab&period;com&sol;wpomipon&sol;bootstrap-modal-vairable<&sol;a><&sol;p>&NewLine;