weixin_33713707 2018-02-08 06:54 采纳率: 0%
浏览 11

引导模态查询

I have used orders.append in my GET AJAX method to display the user details stored in API. In here I have used 2 buttons save and cancel respectively with class "saveEdit edit" to edit the details. When the edit button is hit a modal pop-up to display the form to edit. On hitting save the details ain't getting saved jus the page refreshes. Save goes with the cancel button. Can you help me out?

My Bootstrap modal:

<div class="modal fade" id="myModallp" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Edit</h4>
                        </div>

                        <div class="modal-body">

                            <!-- Form for editing details.-->
                            <form id="uploadimageformm">

                            <input type="text" placeholder="first name" id="first" maxlength="15" name="user[firstname]" /><br />
                                <input type="text" placeholder="last name" id="last" maxlength="15" name="user[lastname]" /><br />
                                <input type="text" maxlength="10" placeholder="contact no." id="contact" name="user[contact_number]" onkeypress="return isNumberKey(event)" /><br />
                                <input  type="address" placeholder="address1" id="addr1" name="user[address1]"/><br />
                                <input  type="address" placeholder="address2" id="addr2" name="user[address2]"/><br />
                                <input  type="address" placeholder="street" id="strt" name="user[street]"/><br />
                                <input  type="address" placeholder="street1" id="strt1" name="user[street1]"/><br />
                                <input  type="address" placeholder="city" id="city" name="user[city]"/><br />
                                <input  type="address" placeholder="state" id="statee" name="user[state]"/><br />
                                <input  type="address" placeholder="country" id="cntry" name="user[country]" /><br />
                                <input  type="email" placeholder="email" id="email" name="user[email]" /><br />
                                <input  type="password" placeholder="password" id="paswrd" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" name="user[password]" /><br />
                                <select name="user[gender]" id="gndr">
                                <option>Gender</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                </select><br />
                                <input type="file" name="user_photo" id="user_photo" /><br>

                                <button class="saveEdit edit"  data-id=' + order.id + ' type="submit" onclick="">Save</button>
                                <button class="cancelEdit edit">Cncl</button>
                            </form>
                            <div id="ack"></div>
                        </div>

                        <div class="modal-footer">

                        </div>
                    </div>
                </div>
            </div>

My GET method of Ajax:

$.ajax({

                    type:'GET',
                    url:'http://13.229.164.32/users.json',

                    success:function(orders){
                        orders = orders.sort(function(a, b){
                            return a.id-b.id
                        })

                        $.each(orders,function(id,order){
                            $orders.append('<tr><td>'+ order.id +
                                '</td><td>' + '<span class="noedit firstname">' + order.firstname + '</span><input value=' + order.firstname + ' name="firstname" class="edit firstname_'+order.id+'"/>' +  

                                '</td><td>' + '<span class="noedit lastname">' +  order.lastname+  '</span><input  value=' + order.lastname + ' name="lastname" class="edit lastname_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit contact_number">' + order.contact_number + '</span><input value=' + order.contact_number + ' name="contact_number" class="edit contact_number_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit address1">' + order.address1 + '</span><input value=' + order.address1 + ' name="address1" class="edit address1_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit address2">' + order.address2 + '</span><input value=' + order.address2 + ' name="address2" class="edit address2_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit street">' + order.street + '</span><input value=' + order.street + ' name="street" class="edit street_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit street1">' + order.street1 + '</span><input value=' + order.street1 + ' name="street1" class="edit street1_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit city">' + order.city + '</span><input value=' + order.city + ' name="city" class="edit city_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit state">' + order.state + '</span><input value=' + order.state + ' name="state" class="edit state_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit country">' + order.country + '</span><input value=' + order.country + ' name="country" class="edit country_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit email">' + order.email + '</span><input type="email" value=' + order.email + ' name="email" class="edit email_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit password">' + order.password + '</span><input type="password" value=' + order.password + ' name="password" class="edit password_'+order.id+'"/>' +

                                '</td><td>' + '<span class="noedit gender">' + order.gender + '</span><input value=' + order.gender + ' name="gender" class="edit gender_'+order.id+'"/>' +

                                '</td><td>' + order.created_at +
                                '</td><td>' + order.updated_at +
                                '</td>' +

                                '<td><button class="remove" data-id=' + order.id + '>X</button></td>' +
                                '<td><button class="editOrder noedit" data-toggle="modal" data-target="#myModallp">Edit</button></td>' +
                                '<td><button class="saveEdit edit"  data-id=' + order.id + '>Save</button></td>' +
                                '<td><button class="cancelEdit edit">Cncl</button>' +

                                '</td><td>' + '<input type="file"/ name="user_photo" id="user_photo_'+order.id+'" class="edit user_photo">' +
                                '<img src="http://13.229.164.32/users/user_photo?id='+order.id+'" class="noedit user_photo_' + 
                                order.id + '" height="80" width="80" >' + 
                                '</td></tr>');
                        });
                    },
                        error:function(){
                            alert('error in testing');
                        }
                });

My edit jquery method:

$orders.delegate('.editOrder','click',function(){
                   var $tr = $(this).closest('tr');

                   $tr.addClass('edit');
                })

My cancel jquery method:

$orders.delegate('.cancelEdit','click',function(){
                   var $tr = $(this).closest('tr').removeClass('edit');

                })

And lastly my saveEdit method:

$orders.delegate('.saveEdit', 'click', function(){
                    var $tr = $(this).closest('tr');
                    var self = this;
                    var user_id = $(this).attr('data-id');

                    var formData = new FormData(); 
                    var totalFiles = document.getElementById("user_photo_"+user_id).files.length; 
                    for (var i = 0; i < totalFiles; i++) 
                        { 
                            var file = document.getElementById("user_photo_"+user_id).files[i]; 
                            formData.append("user_photo", file);
                        } 
                    alert(user_id);
                    console.log(formData);

                    formData.append("user[firstname]", $(".firstname_"+user_id).val());
                    formData.append("user[lastname]", $(".lastname_"+user_id).val());
                    formData.append("user[gender]",  $(".gender_"+user_id).val());
                    formData.append("user[address1]", $(".address1_"+user_id).val());
                    formData.append("user[address2]", $(".address2_"+user_id).val());
                    formData.append("user[street]", $(".street_"+user_id).val());
                    formData.append("user[street1]", $(".street1_"+user_id).val());
                    formData.append("user[contact_number]", $(".contact_number_"+user_id).val());
                    formData.append("user[email]", $(".email_"+user_id).val());
                    formData.append("user[password]", $(".password_"+user_id).val());
                    formData.append("user[city]", $(".city_"+user_id).val());
                    formData.append("user[state]", $(".state_"+user_id).val());
                    formData.append("user[country]", $(".country_"+user_id).val());


                    console.log(formData);


                $.ajax({

                        // headers: {
                        // 'Content-Type': 'application/x-www-form-urlencoded'
                        // },

                    type: 'POST',
                    url: 'http://13.229.164.32/users/user_update.json?id=' + $(this).attr('data-id') ,
                    data: formData, 
                    dataType: 'json',
                    contentType: false, 
                    processData: false,
                    success: function(nData){
                        $tr.find('span.firstname').html(formData.firstname);
                        $tr.find('span.lastname').html(formData.lastname);
                        $tr.find('span.gender').html(formData.gender);
                        $tr.find('span.address1').html(formData.address1);
                        $tr.find('span.address2').html(formData.address2);
                        $tr.find('span.street').html(formData.street);
                        $tr.find('span.street1').html(formData.street1);
                        $tr.find('span.contact_number').html(formData.contact_number);
                        $tr.find('span.email').html(formData.email);
                        $tr.find('span.password').html(formData.password);
                        $tr.find('span.city').html(formData.city);
                        $tr.find('span.state').html(formData.state);
                        $tr.find('span.country').html(formData.country);
                        $tr.find('span.user_photo').html(formData.user_photo);
                        // addUser1(newUser);
                        // console.log(newUser);
                        $tr.removeClass('edit');
                    },
                    error:function(){
                        alert('error saving user');
                    }

                });

            });
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 u盘问题:盘符不显示 无媒体
    • ¥50 R语言读取nc按月均值转为tif
    • ¥30 智能车串级pid调参
    • ¥15 visual studio code翻译老是错误
    • ¥20 卫星测高数据的高程转换
    • ¥15 爬取招聘网站数据信息
    • ¥15 安装完tensorflow,import tensorflow as tf后报错,如何解决?
    • ¥15 ultralytics库导出onnx模型,模型失去预测能力
    • ¥15 linux下点对点协议连接2个USB串口的硬件流量控制问题
    • ¥15 SQL数据自动生成问题