ต้องการแสดงรูปภาพ ของนักเตะที่เลือกลงแทนตัว block ตำแหน่งครับ


พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

ต้องการแสดงรูปภาพ ของนักเตะที่เลือกลงแทนตัว block ตำแหน่งครับ

Post by bankjittapol » 12/11/2019 10:37 am

ต้องการแสดงรูปภาพ ของนักเตะที่เลือกลงแทนตัว block ตำแหน่งครับ

ขั้นตอนการทำงาน เมื่อผมคลิกที่บล็อคตำแหน่ง CF ก็จะ show popup ขึ้นมาให้เลือกนักเตะ เมื่อคลิกเลือกนักเตะแล้ว กดตกลง รูป ชื่อ ตำแหน่ง เบอร์เสื้อ ของนักเตะจะลงแทนตำแหน่งบล็อคครับ

Image


Image
ตอนนี้สามารถทำได้ คือ แสดง ตำแหน่ง ชื่อเบอร์ ครับ แต่ไม่รุ้ว่าจะทำรูปมาแสดงยังไงครับ

code ส่วนแสดงตำแหน่ง block

Code: Select all

    <div class="drag-container" align="center" >
                <?php
                $sql_opt_position = "SELECT * FROM $datalineup_position WHERE plan_id = 1 ";
                $result_opt_position = mysqli_query($con,$sql_opt_position);
                while ($rowposition = mysqli_fetch_assoc($result_opt_position)) {     ?>
                  <div class="draggable" id="po_<?php echo $rowposition['pst_posit']; ?>"
                    style="transform: translate(<?php echo $rowposition['pst_x'].'px'; ?> ,
                    <?php echo $rowposition['pst_y'].'px'; ?>);"
                    data-x="<?php echo $rowposition['pst_x']; ?>"
                    data-y="<?php echo $rowposition['pst_y'];?>"  >
                    <p id="shw_nameply" >  <?php echo $rowposition["pst_name"]; ?></p>
                    <div class="showplayer"></div>
                    <input type="hidden" class="setplayer" >
                  </div>
                <?php } ?>
               
              </div>
code ส่วน popup

Code: Select all

              <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog modal-sm">
                  <form method="post" action="" name="form">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"><?php echo $rowposition["pst_name"]; ?></h4>
                      </div>
                      <?php
                      $sql_play = "SELECT * FROM $datalineup_player WHERE team_id = 1 ";
                      $rstplay =  mysqli_query($con,$sql_play);
                       ?>
                      <div class="modal-body">
                        <select class="selectpicker" id="name_player" name="">
                          <?php while ($r_play = mysqli_fetch_assoc($rstplay)) {
                            $langplayname = ($lang=='th') ? $r_play['play_name_th'] : $r_play['play_name_en']; ?>
                            <option value="<?php echo $r_play['play_id']; ?>" data-thumbnail="player_image/<?php echo $r_play['play_img'];?>" >
                              <span> <?php echo $langplayname; ?></span>
                              <span><?php echo $r_play["play_num"]; ?></span> </option>
                            <?php } ?>
                          </select>
                          <input type="hidden" id="blockid">
                      </div>
                      <div class="modal-footer">
                        <a  class="btn btn-primary submit_popup" >Submit</a>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>

ส่วน javascript

Code: Select all

  $(document).ready(function(){
                $('.draggable').click(function(){
                  $('#myModal').modal('show');
                  $('#blockid').val($(this).attr('id'));
                });


                $('.submit_popup').click(function(){
                  var selvalue =  $('.selectpicker').val();
                  var blockid = $('#blockid').val();
                    $('#'+blockid+' .setplayer').val(selvalue);
                    $('#'+blockid+' .showplayer').html($('.selectpicker option:selected').text());
                    $('.selectpicker option:selected').attr('disabled',true);
                  $('#myModal').modal('hide');
                });
                    });
                

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19986
Joined: 31/03/2014 10:02 am
Contact:

Re: ต้องการแสดงรูปภาพ ของนักเตะที่เลือกลงแทนตัว block ตำแหน่งครับ

Post by thatsawan » 12/11/2019 3:50 pm

กรอบสีดำที่พื้นหลัง วางการเขียนไว้ยังไง มีการอัพหรือบันทึกลง database หรือป่าว
หากมี ให้ลองทำวิธีง่ายๆ ก่อน
เมื่อเลือก dropdrow กดปุ่ม จังหวะกด บันทึกในตารางให้เสร็จ จากนั้น มัน Reload ดึงข้อมูลมาเเสดง ( อันนี้เเนะนำ step ง่ายๆ )

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

Re: ต้องการแสดงรูปภาพ ของนักเตะที่เลือกลงแทนตัว block ตำแหน่งครับ

Post by bankjittapol » 12/11/2019 8:17 pm

thatsawan wrote:กรอบสีดำที่พื้นหลัง วางการเขียนไว้ยังไง มีการอัพหรือบันทึกลง database หรือป่าว
หากมี ให้ลองทำวิธีง่ายๆ ก่อน
เมื่อเลือก dropdrow กดปุ่ม จังหวะกด บันทึกในตารางให้เสร็จ จากนั้น มัน Reload ดึงข้อมูลมาเเสดง ( อันนี้เเนะนำ step ง่ายๆ )

ไม่ค่อยเข้าใจครับ รบกวนช่วยยกตัวอย่าง หรือ อธิบายเพิ่มเติมให้หน่อยครับ

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 22609
Joined: 22/09/2008 6:18 pm
Contact:

Re: ต้องการแสดงรูปภาพ ของนักเตะที่เลือกลงแทนตัว block ตำแหน่งครับ

Post by mindphp » 12/11/2019 8:45 pm

ตอนที่เอา ชื่อมาใส่ ทำยังไง เอาภาพมาใส่ก็ทำวิธี แบบเดียวกัน โดยกำหนด เอาว่า url ภาพ เก็บไว้ที่ไหน (อ่านมาจากที่นั่น) และ จะเอาไปแทน ที่ selector ตัวไหน
หลักการเหมือนการย้ายค่าจากตำแหน่งหนึ่งไปใส่ อีกตำแหน่งหนึ่ง
ใช้ความรู้ หลักการแนวเดียวกับ
viewtopic.php?f=78&t=61978
viewtopic.php?f=78&t=61941

โดย หาหรือ กำหนด ภาพไว้ใน object ไหนสักตัวหนึ่งของ หน้า popup
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

Post Reply

Return to “JavaScript & Jquery Ajax”

Users browsing this forum: No registered users and 3 guests