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 c++字符串分割问题
      • ¥15 关于#sql#的问题:没有用命令关闭cdc,手动把系统表开启的cdc右键删除了
      • ¥15 android freedom
      • ¥15 使用自定义的类型代替内置类型可行吗
      • ¥15 关于STM32的SPI和ENDAT接口编码器通信的问题
      • ¥15 关于#pdfbox#生成的PDF文件正常,转图片中文乱码的问题,如何解决?
      • ¥15 ADS中有关DAC控件的使用问题
      • ¥15 win11如何运行geoserver
      • ¥15 审稿意见请教-用ERNIE进行小样本分类的对比实验问题
      • ¥15 gem5搭建arm v8