使用jQuery保存Popup数据

Question

I am having a drop down with "Create New" option. If user clicks "Create New" option then popup window will display with save button. In that popup window, user will enter data and after user will save this data on server.

This is jQuery function for save the data in a popup.

<script type = "text/javascript" >
  function savefile() {

    $(document).ready(function() {
      $('#Savefile').click(function() {
        $.ajax({
          url: 'D:\C#.Net\Scramble.txt',
          datatype: "json",
          method: 'post',
          data : scrtabledata,
          success: function() {
            var scrtabledata = $('#modaltable'); //Table ID
            scrtabledata.empty();
            $(data).each(function() {
              scrtabledata.append('<tr><td>' + scrtabledata.comment + '</td><td>' + scrtabledata.DropDownList2 + '</td><td>' + scrtabledata.DropDownList1 + '</td></tr>');
            });
          }
        });
      });
    });
  }; 
</script>

And passing that script like this,

<button runat="server" id="Savefile" class="btn btn-primary" onclick="savefile()">Save </button>

This is the code for jQuery popup:

<script type="text/javascript">
$(function () {
        //Attach click event to your Dropdownlist
        $("#<%= DropDownConfigFile.ClientID %>").change(function () {
            //Get the selected valu of dropdownlist
            selection = $(this).val();
            //If its one then show the dialog window. You can change this condition as per your need
            if (selection == 1) {
                //Show the modal window
                $('#myModal').modal('show');

            }
        });
    });
</script>

When user clicks "Save" button then data has to store in that given path. but it is not performing any action. And it is closing automatically when I click "Save" button. Can you please help me to solve this problem.

Any wrong in this code?

Answer 1

Try it:

<script type="text/javascript">
        function savefile() {
                    $.ajax({
                        url: 'D:\C#.Net\Scramble.txt',
                        datatype: "json",
                        method: 'post',
                        success: function () {
                            var scrtabledata = $('#modaltable');//Table ID
                            scrtabledata.empty();

                            $(data).each(function () {
                                scrtabledata.append('<tr><td>' + scrtabledata.comment + '</td><td>' + scrtabledata.DropDownList2 + '</td><td>' + scrtabledata.DropDownList1 + '</td></tr>');
                            });

                        }

                    });
        }
    </script>

Answer 2

You need to pass that data in the ajax function in an order to save it.

  $(document).ready(function () {
                $('#Savefile').click(function () {
                    $.ajax({
                        url: 'D:\C#.Net\Scramble.txt',
                        datatype: "json",
                        data : Your Data to be passed,
                        method: 'post',
                        success: function () {
                            var scrtabledata = $('#modaltable');//Table ID
                            scrtabledata.empty();

                            $(data).each(function () {
                                scrtabledata.append('<tr><td>' + scrtabledata.comment + '</td><td>' + scrtabledata.DropDownList2 + '</td><td>' + scrtabledata.DropDownList1 + '</td></tr>');
                            });

                        }

                     });
                });
            });
        }; 

here in the data attribute you need to pass your data in json format as key value pair.

var myData={"id":"1","Name":"Test"}

In this way you can form your own JSON and pass it to your ajax function.

You have to consider like if

<input type="text" id="userId"/>
<input type="text" id="userData"/>

var userID=$('#userId').val();
var userData=$('#userData').val();
  $(document).ready(function () {
                $('#Savefile').click(function () {
                    $.ajax({
                        url: 'D:\C#.Net\Scramble.txt',
                        datatype: "json",
                        data : {
                                 id:userID,
                                 info:userData
                                 },
                        method: 'post',
                        success: function () {
                            var scrtabledata = $('#modaltable');//Table ID
                            scrtabledata.empty();

                            $(data).each(function () {
                                scrtabledata.append('<tr><td>' + scrtabledata.comment + '</td><td>' + scrtabledata.DropDownList2 + '</td><td>' + scrtabledata.DropDownList1 + '</td></tr>');
                            });

                        }

                     });
                });
            });
        }; 

Updated