locked
regarding jquery and ajax url with $(this).data('url') RRS feed

  • Question

  • User264732274 posted

    see this code url: $(this).data('url'), how jquery understand what would be url ?

    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "__AjaxAntiForgeryForm" }))
    {
        @Html.AntiForgeryToken()
    }
    
    <div id="myDiv" data-url="@Url.Action("Index", "Home")">
        Click me to send an AJAX request to a controller action
        decorated with the [ValidateAntiForgeryToken] attribute
    </div>
    
    <script type="text/javascript">
        $('#myDiv').submit(function () {
            var form = $('#__AjaxAntiForgeryForm');
            var token = $('input[name="__RequestVerificationToken"]', form).val();
            $.ajax({
                url: $(this).data('url'),
                type: 'POST',
                data: { 
                    __RequestVerificationToken: token, 
                    someValue: 'some value' 
                },
                success: function (result) {
                    alert(result.someValue);
                }
            });
            return false;
        });
    </script>

    Friday, September 25, 2015 6:46 AM

Answers

  • User281315223 posted

    The data function is used to read HTML5 data attributes, which are always prefaced with "data-". So in your current case, you are attempting to use $(this).data('url') within your AJAX call as follows :

    url: $(this).data('url'),

    In this context, this is going to refer to your actual form being submitted and likely not your actual "myDiv" <div> element as I don't believe <div> elements can trigger a submit. So what you would want to do is set up your event handler to capture a click event instead :

    $('#myDiv').click(function () {
        // Omitted for brevity
    });

    That will then force your "myDiv" <div> to be this in the context of your function and so when you call $(this).data('url'), it will properly read the data attribute that is stored on your <div> element (bolded below) :

    <div id="myDiv" data-url="@Url.Action("Index", "Home")">
        <!-- Omitted for brevity -->
    </div>

    You can think of the data function as a shorthand for doing something like the following :

    $(this).attr('data-url')

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2015 12:16 PM
  • User281315223 posted

    how this code will work $('#myDiv').submit(function
    () {}) ?

    I don't think that will work as a <div> element cannot be submitted on it's own and thus cannot trigger a "submit" event. You might want to consider simply consolidating this into a single <form> element as opposed to using the <div> as seen below :

    <form id='__AjaxAntiForgeryForm' action='@Url.Action("Index","Home")' method='post'>
         @Html.AntiForgeryToken()
         Click me to send an AJAX request to a controller action
         decorated with the [ValidateAntiForgeryToken] attribute
    </form>
    <script type="text/javascript">
        $(function(){
               // When your form is clicked, submit it
               $("#__AjaxAntiForgeryForm").click(function(){ $(this).submit(); });
               // When your form is submitted, make an AJAX call instead
               $('#__AjaxAntiForgeryForm').submit(function (e) {
                        // Prevent the default request
                        e.preventDefault();
                        // Grab your token
                        var token = $('input[name="__RequestVerificationToken"]', this).val();
                        $.post($(this).attr('action'), { __RequestVerificationToken: token, someValue: 'some value' }, function(result){
                              alert(result.someValue);
                        });
               });
        });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2015 3:36 PM

All replies

  • User281315223 posted

    The data function is used to read HTML5 data attributes, which are always prefaced with "data-". So in your current case, you are attempting to use $(this).data('url') within your AJAX call as follows :

    url: $(this).data('url'),

    In this context, this is going to refer to your actual form being submitted and likely not your actual "myDiv" <div> element as I don't believe <div> elements can trigger a submit. So what you would want to do is set up your event handler to capture a click event instead :

    $('#myDiv').click(function () {
        // Omitted for brevity
    });

    That will then force your "myDiv" <div> to be this in the context of your function and so when you call $(this).data('url'), it will properly read the data attribute that is stored on your <div> element (bolded below) :

    <div id="myDiv" data-url="@Url.Action("Index", "Home")">
        <!-- Omitted for brevity -->
    </div>

    You can think of the data function as a shorthand for doing something like the following :

    $(this).attr('data-url')

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2015 12:16 PM
  • User264732274 posted

    see this line $('#myDiv').submit(function () {})

    how div can be submitted rather form can be submit by js dynamically.

    how this code will work $('#myDiv').submit(function () {}) ?

    thanks

    Friday, September 25, 2015 2:13 PM
  • User281315223 posted

    how this code will work $('#myDiv').submit(function
    () {}) ?

    I don't think that will work as a <div> element cannot be submitted on it's own and thus cannot trigger a "submit" event. You might want to consider simply consolidating this into a single <form> element as opposed to using the <div> as seen below :

    <form id='__AjaxAntiForgeryForm' action='@Url.Action("Index","Home")' method='post'>
         @Html.AntiForgeryToken()
         Click me to send an AJAX request to a controller action
         decorated with the [ValidateAntiForgeryToken] attribute
    </form>
    <script type="text/javascript">
        $(function(){
               // When your form is clicked, submit it
               $("#__AjaxAntiForgeryForm").click(function(){ $(this).submit(); });
               // When your form is submitted, make an AJAX call instead
               $('#__AjaxAntiForgeryForm').submit(function (e) {
                        // Prevent the default request
                        e.preventDefault();
                        // Grab your token
                        var token = $('input[name="__RequestVerificationToken"]', this).val();
                        $.post($(this).attr('action'), { __RequestVerificationToken: token, someValue: 'some value' }, function(result){
                              alert(result.someValue);
                        });
               });
        });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2015 3:36 PM