Value from ajax dialog using jquery / asp.net

Question

i've been at this over a day now and have read almost all posts on this topic and still can not get this working. I'm trying to capture a value from a textbox (ideally a checkbox but starting with a textbox for testing) on a javascript pop-up in asp.net using js / ajax as follows:

in Site.Master:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

HTML:

<script type="text/javascript">
    function openprojectCopyModal() {
        $("#projectCopyModal").modal('show');
    }
    function btnCopyConfirmClick() {
            $.ajax({
                url: "Member/ModalDetails",
                type: 'GET',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({
                    txtTest: $("#txtTest").val()
                }),
                success: function (response) {
                    //
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //
                }
            });
        };      
</script> 

    <!--Modal Save confirmation-->
<div class="modal" id="projectCopyModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Copy Project Confirmation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Please select optional items to include when copying this project:</p>
            <div style="float: left;">
       <asp:TextBox ID="txtTest" CssClass="form-control" Width="250px" runat="server" />
            </div>
      </div>
      <div class="modal-footer">            
        <button id="btnCopyConfirm" type="button" class="btn btn-primary" onclick="btnCopyConfirmClick">Save</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

CodeBehind:

// Make a copy of project
protected void btnCopy_Click(object sender, EventArgs e)
{
    // Get ID of project to copy
    ListViewItem item = (sender as ImageButton).NamingContainer as ListViewItem;
    int iID_orig = Convert.ToInt16(ListView_Project.DataKeys[item.DataItemIndex].Values["ProjectID"]);
    this.Session["copyID"] = iID_orig;

    // Prompt to verify
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openprojectCopyModal();", true);

}
    [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public static string ModalDetails(string txtTest)
    {
        return txtTest;
    }

It will pop up the dialog but that's it, it will not call the WebMethod 'ModalDetails' which is in my project root folder Members (have tried 'url' "~/Members/Member/ModalDetails" and many iterations of that as well. Thank you

Edit: I updated function to still to no avail:

$(function () {
            $('[id*=btnCopyConfirm]').click(function () {
                $.ajax({
                    url: "Member/ModalDetails",
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    data: JSON.stringify({
                        txtTest: $("#txtTest").val()
                    }),
                    success: function (response) {
                        //
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //
                    }
                });
            });
        });

UPDATE I could not get this working for whatever reason so I switched to an asp button server side in combination with jquery as follows for those who it might help:

jquery:

function storevalue() {
        var str = $("#txtTest").val(); 
        alert(str);
        if (str=="") {
            return false;
        }
        else {
            document.getElementById("hfCopyOptions").value = str;
            return true;
        }

    }

html:

<asp:Button ID="btnCopyConfirm" runat="server" CssClass="btn btn-primary"  Text="Copy" OnClick="btnCopyConfirm_Click" OnClientClick="return storevalue();" />

Have you looked at stackoverflow.com/questions/16910982/… ? — Doug F
– Doug F, Commented Feb 25, 2019 at 19:53
I have, but I am using webforms so ActionResult is not available, thanks anyway — MX313
– MX313, Commented Feb 26, 2019 at 13:36
OK, my mistake. I did some more searching and maybe stackoverflow.com/questions/27917255/… will help. I do notice that your method isn't static and that's one of the pointers on this link. — Doug F
– Doug F, Commented Feb 26, 2019 at 13:43
Yes thanks I did change that I should edit post, someone had pointed that out then deleted their answer afterwards. Thank you — MX313
– MX313, Commented Feb 26, 2019 at 13:51

MX313 · Accepted Answer · 2019-02-26 15:35:16Z

0

Used the solution under UPDATE in my updated post.

answered Feb 26, 2019 at 15:35

MX313

1751 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Value from ajax dialog using jquery / asp.net

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related