Невозможно получить значение для Обновления данных из базы данных с помощью JQuery Ajax Bootstrap Model - данные json

Question

Моя основная проблема заключается в том, что мой модал показывает, но предупреждение показывает [объект объекта].У меня есть четыре таблицы, такие как Stud, country_master_academic, master_city и master_state. Когда я нажимаю на редактировать, появляется модальный, но данные, извлеченные из базы данных, не отображаются в нем.

jQuery на странице home.php

$(document).ready(function(){
             $(document).on('click', '.edit_data', function(event){
               var stud_no = $(this).attr("id");
               $.ajax({  
                    url:"update.php",  
                    method:"POST",  
                    data:{stud_no:stud_no},  
                    dataType:"json",  
                    success:function(data){  
                    console.log(data);
                    $('#name').val(data.name);
                    $('#mob_no').val(data.mob_no);
                    $('#dob').val(data.dob);
                    $('#add').val(data.add);
                    $('#photo').val(data.photo);
                    $('#gender').val(data.gender);
                    $('#country').val(data.country);
                    $('#state').val(data.state);
                    $('#city').val(data.city);
                    $('#stud_no').val(data.stud_no);
                    $('#update_data_modal').modal('show');  


                    },  
                    });     
                });  
    });

Модал для обновления на странице home.php

<div class="container">
<div class="modal fade" id="update_data_modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-heading" style="margin-top:30px;text-align:center">
                <button class="close" data-dismiss="modal" style="margin-right:20px;font-weight:bold;">x</button>
                <h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span>Update Student</h4>
            </div>
            <div class="modal-body">
            <?php
                $img = "images/".trim($vrow["photo"]);
                echo '<img src='.$img.' class="image" style="margin-left:75%;margin-top:5%;width:120px;height:120px;border:2px solid #bbbbbb;border-radius:10px;">';
                ?>
                <br/>
                <input type="file" name="photo"  style="margin-left:70%;">
                <div class="form-group">
                <form class="form-horizontal" name="form" id="form" method="post" action="<?php $_PHP_SELF?>" enctype="multipart/form-data">
                    <label for="name" id="name"><span class="glyphicon glyphicon-user"></span><b> Student Name: </b></label>
                    <input type="text" class="form-control" name="name" id="name" pattern="[a-zA-Z]{3,}" title="Name should only contain letters and atleast 3 letters" required />
                </div>
                <div class="form-group">
                    <label for="no"><span class="glyphicon glyphicon-phone"></span><b> Mobile No: </b></label>
                    <input type="text" class="form-control" name="mob_no" id="mob_no" pattern="[0-9]{10}" title="Mobile number should be of 10 digits" required />
                </div>
                <div class="form-group">    
                    <label for="dob"><span class="glyphicon glyphicon-calendar"></span><b> Birth Date: </b></label>
                    <input type="date" class="form-control" name="dob" id="dob" required />
                </div>
                <div class="form-group">
                    <label for="add"><span class="glyphicon glyphicon-map-marker"></span><b> Address: </b></label>
                    <textarea rows="4" cols="33" class="form-control" name="add" id="add" required></textarea>
                </div>
                <div class="form-group">
                    <label for="photo"><span class="glyphicon glyphicon-camera"></span><b> Photo: </b></label>
                    <input type="file" name="photo" id="photo" required />
                </div>
                <div class="form-group">
                    <label for="gen"><b> Gender: </b></label>
                    <input type="radio" name="gender" id="gender" value="M" required="required">Male
                    <input type="radio" name="gender" id="gender" value="F" required="required">Female
                </div>
                <div class="form-group">
                    <label for="cntry"><span class="glyphicon glyphicon-map-marker"></span><b> Country: </b></label>
                <select name="country" id="country" class="form-control">
                <option value="0">Select</option>
                    <?php 
                    $country="SELECT * from country_master_academic";
                    $res= $conn->query($country);
                    if($res->num_rows>0){
                        while($row=$res->fetch_assoc()){        
                        if($row["country_name"]==$vcountry or $vrow['country'] == $row["country_code"] )
                        {   
                                echo '<option value='.$row["country_code"].' selected>'.$row["country_name"].'</option>';
                        }
                            else
                            {
                                echo '<option value='.$row["country_code"].'>'.$row["country_name"].'</option>';
                            }
                        }
                    }
                ?>
                </select>

                </div>
                <div class="form-group">
                        <label for="state"><span class="glyphicon glyphicon-map-marker"></span><b> State: </b></label>
                <select name="state" id="state" class="form-control">
                <option value="0">Select</option>
                    <?php 
                    $state="SELECT * from master_state";
                    $res= $conn->query($state);
                    if($res->num_rows>0){
                        while($row=$res->fetch_assoc()){        
                        if($row["state_name"]==$vstate or $vrow['state'] == $row["state_code"] )
                        {   
                                echo '<option value='.$row["state_code"].' selected>'.$row["state_name"].'</option>';
                        }
                            else
                            {
                                echo '<option value='.$row["state_code"].'>'.$row["state_name"].'</option>';
                            }
                        }
                    }
                ?>
                </select>
                    </div>
                <div class="form-group">
                <label for="city"><span class="glyphicon glyphicon-map-marker"></span><b> City: </b></label>
                <select name="city" id="city" class="form-control">
                <option value="0">Select</option>
                    <?php 
                    $city="SELECT * from master_city";
                    $res= $conn->query($city);
                    if($res->num_rows>0){
                        while($row=$res->fetch_assoc()){        
                        if($row["city_name"]==$vcity or $vrow['city'] == $row["city_code"] )
                        {   
                                echo '<option value='.$row["city_code"].' selected>'.$row["city_name"].'</option>';
                        }
                            else
                            {
                                echo '<option value='.$row["city_code"].'>'.$row["city_name"].'</option>';
                            }
                        }
                    }
                ?>
                </select>
                </div>

                <div class="form-group">
                <input type="hidden" name="stud_no" id="stud_no" />  
                    <button type="submit" name="update" id="update" class="btn btn-info">Update</button>
                </div>
                </form>
            </div>
            <div class="modal-footer">
            <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div> 

страница update.php, но я все еще пытаюсь получить данные, поэтому написал только код для выбора записей из базы данных.

Myкнопка редактирования, которая находится в цикле

    echo '<td><button name="edit" style="font-weight:bold;" type="submit" id='.$row["stud_no"].' class="btn btn-warning edit_data" data-target="#update_data_modal" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>';

Answer 1

Измените ваш html, как показано ниже.

<div class="form-group">
    <label for="gen"><b> Gender: </b></label>
    <input type="radio" name="gender" id="genderMale" value="M" required="required">Male
    <input type="radio" name="gender" id="genderFemale" value="F" required="required">Female
</div>

Добавьте этот код в ваш успех ajax.

if(data[6] == 'M')
{
    $("#genderMale").prop("checked", true);
} else if(data[6] == 'F') {
    $("#genderFemale").prop("checked", true);
}

Для файла изображения вы можете использовать, как показано ниже в вашем html

<div class="form-group">
    <img id="resultedPhoto">
    <label for="photo"><span class="glyphicon glyphicon-camera"></span><b> Photo: </b></label>
    <input type="file" name="photo" id="photo" required />
</div>

Добавьте приведенный ниже код в ajax success

$("#resultedPhoto").attr("src","/path-to-your-folder/" + data[5]);

Answer 2

Теперь, когда я нажимаю на редактировать, модал не открывается, а значение базы данных становится пустым, другой jquery

    $(document).ready(function(){
        $("#form1").submit(function(event){
            event.preventDefault();
            var formData = new FormData(this);
              $.ajax({
                 url:"upresult.php",
                 type:"POST",
                 data:{formData:formData},
                 async:false,
                 success:function(data) {
                   alert(data);
                    location.reload();
                },
                cache:false,
                contentType:false,
                processData:false
            });
         });

    });

upresult.php

    <?php
    include("connection.php");
    if(!empty($_POST)){
    $no=$_POST['stud_no'];
    $name=trim($_POST['name']);
    $mob=trim($_POST['mob_no']);
    $dob=trim($_POST['dob']);
    $add=trim($_POST['add']);
    $photo=trim($_FILES['photo']['name']);
    $gen=trim($_POST['gender']);
    $cn=trim($_POST['country']);
    $st=trim($_POST['state']);
    $ct=trim($_POST['city']);

    $qry="update stud set stud_name='$name',mobile='$mob',dob='$dob',address='$add',gender='$gen',country='$cn',state='$st',city='$ct' where stud_no='$no'";
    $data=mysqli_query($conn,$qry);
    if($data)
    {
        echo '<script language="javascript">';
        echo 'alert("Updated Successfully")';
        echo '</script>';
    }
    else {
        echo '<script language="javascript">';
        echo 'alert("Cannot update record")';
        echo '</script>';
    }
    if(!empty($_FILES['photo']['name'])){
    $qry1= "update stud set photo='$photo' where stud_no='$no'";
    $data1=mysqli_query($conn,$qry1);

    if($data1){
        $target_dir="images/";
            $target_file=$target_dir.basename($_FILES["photo"]["name"]);
            $imageFileType=pathinfo($target_file,PATHINFO_EXTENSION);
            if(move_uploaded_file($_FILES["photo"]["tmp_name"],$target_file)){
                echo '<script language="javascript">';
                echo 'alert("Image upload successfully")';
                echo '</script>';

            }  else {
                echo '<script language="javascript">';
                echo 'alert("Cannot Upload")';
                echo '</script>';
            }
    }
}

}

Answer 3

Как показано на снимке, ваш объект имеет числовые индексы, поэтому data.photo не будет ничего возвращать, так как в вашем объекте нет индекса photo.

Вы можете получить доступ к имени изображения с помощью data[5].

Аналогично вы можете получить любое значение индекса.

Как для имени, так и вместо data.name вам нужно использовать data[1]

Так что ваш код будет выглядеть примерно такthis:

$('#name').val(data[1]);
$('#mob_no').val(data[2]);
$('#dob').val(data[3]);
$('#add').val(data[4]);
$('#photo').val(data[5]);

Также вы дали одинаковые идентификаторы для меток и входов:

<label for="name" id="name">

Вам необходимо удалить id из всех меток:

<label for="name">