You have to register the script using [ClientScriptManager][1] since you are using updatepanel. Try the following code. It should work:

    Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) _
        Handles DropDownList1.SelectedIndexChanged
        Dim alertMsg As String
        Dim alertScript As String
        'DO OTHER STUFF HERE
        alertMsg = String.Format("You Selected {0}", DropDownList1.SelectedItem.Text)
        alertScript = String.Format("<script type= text/javascript>alert('{0}');</script>", alertMsg)
    
        'register script on startup
        ClientScriptManager.RegisterStartupScript(Me.[GetType](), "Alert", alertScript);
    End Sub


  [1]: http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript%28v=vs.100%29.aspx

I'd like to get an alert from the server inside of an AJAX call in an `Update Panel` but something is blocking the `HttpContext.Current.Response.Write` from firing on the client.

Here's a very simple aspx body content



    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
            <asp:ListItem Value="1">First</asp:ListItem>
            <asp:ListItem Value="2">Second</asp:ListItem>
        </asp:DropDownList>
    </div>
    </form>

And here's where I'm handling it in VB



    Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) _
            Handles DropDownList1.SelectedIndexChanged
        Dim alertMsg As String
        Dim alertScript As String
        'DO OTHER STUFF HERE
        alertMsg = String.Format("You Selected {0}", DropDownList1.SelectedItem.Text)
        alertScript = String.Format("<script type= text/javascript>alert('{0}');</script>", alertMsg)

        System.Web.HttpContext.Current.Response.Write(alertScript)

    End Sub

Both times the vb code will fire, but it only scripts an alert message when called outside the the UpdatePanel, instead of inside it.

What am I doing wrong?

Alert fails in UpdatePanel

This is how the `ASP.NET WebForms page life-cycle` works. Controls that postback will cause the host (read: parent) page to go through its `Page_Load`. If you do not like this model, then you should consider `ASP.NET MVC` or a `client-side` solution where you can make `AJAX` calls to acquire data and then do client-side rendering via templating logic.

I have an .aspx page that dynamically creates multiple user controls, each of which have their own code behind which fires based on several events at the user control level.  The problem is, before the events fire in a particular user control, the parent page `Load` method fires as well.  Because each of the controls are added dynamically, this isn't a trivial amount of processing since each control must be re-added.  

I'd like to be able to fire UserControl events without forcing an update on the page that hosts it.  I've tried putting the entire user control in an `UpdatePanel`, but postbacks within the user control still force a page load for the parent.

Here's some test code with certain parts omitted and the control added declaratively, instead of programmatically.

**.ASPX Parent Page**



    <%@ Page Language="vb" CodeBehind="MyParent.aspx.vb" %>
    <%@ Register TagPrefix="uc" TagName="Control" Src="MyControl.ascx" %>

    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <uc:Control ID="Control1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

**.ASCX User Control**



    <%@ Control Language="vb"  CodeBehind="MyControl.ascx.vb"  %>
    <p>Control Added</p>
    <asp:Button runat="server" Text="ForcePostBack"/>

Parent Page Load Event fires every time a User Control Event Fires

That's because `OnSuccess` vs `OnFailure` aren't hooked up to `ModeState.IsValid` in any way.

Per the [`AjaxOptions` docs][1]:

> [`OnSuccess`][2]: This function is called if the response status **is** in the 200 range.  
> [`OnFailure`][3]: This function is called if the response status **is not** in the 200 range.

In other words, you have to manually specify that there was a failure when returning your ActionResult by changing the `Response.StatusCode` and then returning whatever values you're expecting in your `OnFailure` js method.

    [HttpPost]
    public ActionResult Search(Person model) 
    {
      if (ModelState.IsValid) {
        // if valid, return a HTML view inserted by AJAX helper
        var results = PersonRepository.Get(model)
        return PartialView("Resulsts", vm);
        
      } else {
      	// if invalid, return a JSON object and handle with OnFailure method
        Response.StatusCode = (int)HttpStatusCode.BadRequest;
        return Json(new { errors = ModelState.Values.SelectMany(v => v.Errors) });
    
      }
    }


**Further Reading**: 

* [MVC 4 Ajax.BeginForm and ModelState.AddModelError][4]
* [ASP.NET MVC “Ajax.BeginForm” executes OnSuccess even though model is not valid][5]


[1]: https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx
[2]: https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.onsuccess.aspx
[3]: https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.onfailure.aspx
[4]: https://stackoverflow.com/q/21311026/1366033
[5]: https://stackoverflow.com/q/7328977/1366033

This is a well-worn topic apparently but I've not been able to come up with a solution perusing previous posts. Hoping someone can tell me the "right way" to do this, since I need to do a lot of it. 

Main issue: When Ajax.Beginform post ModelState is invalid, it still triggers OnSuccess method. I know this is correct behavior, but my OnSuccess method does things that only make sense when (go figure) post is "successful." 

How best to manage redisplaying form with validation errors in this case? How do I return a success=false from my controller along with the view to be redisplayed? 

It's not specifically relevant to the question, but fyi what I'm doing here is somewhat analagous to trying to display a form in a Bootstrap Modal, which I gave up on. 

1) calling controller via ajax to load form in div. 

    $(function addpaneevent() {
        $('.addpane').on("click", function () {
            var url = '/QuizPane/QuickPane?quizId=' + $(this).data("quizid");
            $.ajax({
                url: url,
                type: 'GET',
                contentType: 'application/json',
                success: function (result) {
                    $('#overlay').html(result);
                },
                error: function (result) {
                    console.log("bummer",result);
                }
            });
        });
    });

2) return partial view containing form

    public ActionResult QuickPane(int quizId)
    {
        var model = *querytogetmodel*
        return PartialView("QuickPane",model);
    }


    @using (Ajax.BeginForm("QuickPane", "QuizPane", FormMethod.Post,
        new AjaxOptions
        {
                                InsertionMode = InsertionMode.Replace,
                                HttpMethod = "POST",
                                OnSuccess = "updatePaneList(data)",
                                OnFailure = "massivefail(data)",
        }))
    {
       @Html.ValidationSummary(true)
    
        <fieldset>
            @Html.HiddenFor(model => model.QuizID)
            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Title, new { @autofocus = "autofocus" })
                @Html.ValidationMessageFor(model => model.Title)
            </div>
            ...more of the same
            <input type="submit" value="Create" class="btn btn-primary"/>
        </fieldset>
    }

3) On submit call post

    [HttpPost]
    public ActionResult QuickPane(QuizPane quizpane)
    {
        if (ModelState.IsValid)
        {
            db.QuizPanes.Add(quizpane);
            db.SaveChanges();
             return PartialView("_quizpanelist", quizpane);
        }
        return View(quizpane); //tried a few different things here
     }

4) On success I'm adding the new record to a table and removing the div containing the input form. 

    function updatePaneList(data) {
        $("#overlay").remove();
        var rowcount = $(".expanded #panetable tr:last").count;
        $('.expanded #panetable  tbody:last').append(data);        
    };





Ajax.Beginform post validation when Model.State invalid triggers OnSuccess function

To elaborate on Valin's comment, and inline Brock Allen's solution. 

The clue lies in the returned OK response which internally traps the redirect to a form login:



<pre><code><b>X-Responded-JSON</b>: {"status": 401, "headers": {"location":"http:\/\/localhost:50004\/Login?ReturnUrl=%2FClient"}}</code></pre>

If you'd like to fix on the server, instead of scraping the response for this internal error state, you can use  the solution from **Brock Allen**'s article on [Using cookie authentication middleware with Web API and 401 response codes][2]:

> Normally when using cookie authentication middleware, when the server (MVC or WebForms) issues a 401, then the response is converted to a 302 redirect to the login page (as configured by the LoginPath on the [**CookieAuthenticationOptions**][3]). But when an Ajax call is made and the response is a 401, it would not make sense to return a 302 redirect to the login page. Instead you’d just expect the 401 response to be returned. Unfortunately this is not the behavior we get with the cookie middleware — the response is changed to a 200 status code with a JSON response body with a message:

>
    
>     {"Message":"Authorization has been denied for this request."}

>I’m not sure what the requirement was for this feature. To alter it, you must take over control of the behavior when there is a 401 unauthorized response by configuring a CookieAuthenticationProvider on the cookie authentication middleware:

>

>     app.UseCookieAuthentication(new CookieAuthenticationOptions
    {
       AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
       LoginPath = new PathString("/Account/Login"),
       Provider = new CookieAuthenticationProvider
       {
          OnApplyRedirect = ctx =>
          {
             if (!IsAjaxRequest(ctx.Request))
             {
                ctx.Response.Redirect(ctx.RedirectUri);
             }
         }
       }
    });

>Notice it handles the OnApplyRedirect event. When the call is not an Ajax call, we redirect. Otherwise, we do nothing which allows the 401 to be returned to the caller.

>The check for IsAjaxRequest is simply copied from a [**helper**][4] in the katana project:

>

>     private static bool IsAjaxRequest(IOwinRequest request)
    {
       IReadableStringCollection query = request.Query;
       if ((query != null) && (query["X-Requested-With"] == "XMLHttpRequest"))
       {
          return true;
       }
       IHeaderDictionary headers = request.Headers;
       return ((headers != null) && (headers["X-Requested-With"] == "XMLHttpRequest"));
    }


[2]: https://brockallen.com/2013/10/27/using-cookie-authentication-middleware-with-web-api-and-401-response-codes/
[3]: https://brockallen.com/2013/10/24/a-primer-on-owin-cookie-authentication-middleware-for-the-asp-net-developer/
[4]: https://github.com/aspnet/AspNetKatana/blob/v3.1.0/src/Microsoft.Owin.Security.Cookies/Provider/DefaultBehavior.cs#L36

I always get `statusCode=200` on ajax post at client side, while servers answers with `HttpStatusCode.Unauthorized`. 

My controller code:

    public class AccountApiController : ApiController
    {
        public HttpResponseMessage Login(HttpRequestMessage request, [FromBody]LoginViewModel loginModel)
        {
            return request.CreateErrorResponse(HttpStatusCode.Unauthorized, "Unauthorized login.");
        }
    }

My ajax code:

    $.ajax({
        url: '/api/accountapi/login',
        type: 'POST',
        data: data
        })
        .done(function (object, status, xhr) {
            alert("Success: " + xhr.status + " : " + xhr.statusText);
        })
        .always(function (object) {
            $("#output").text(JSON.stringify(object, null, 4));
        });

Result: alert with text `Success: 200 : OK`
and output window with:

    {
        "Message": "Unauthorized login."
    }

So, I can get text error message, but i need to get HttpStatusCode to handle error statements. Help me, please.

More information about this issue and elegant solution from Brock Allen:
http://brockallen.com/2013/10/27/using-cookie-authentication-middleware-with-web-api-and-401-response-codes/

Always success on ajax post with HttpResponseMessage 401

Just to clarify the solution for other people hitting this question. The ajax helper fires `OnSuccess` vs `OnFailure` based on the returned HTTP Code per the [`AjaxOptions` docs][1]:

> [`OnSuccess`][2]: This function is called if the response status **is** in the 200 range.  
> [`OnFailure`][3]: This function is called if the response status **is not** in the 200 range.

In other words, you have to manually specify that there was a failure when returning your ActionResult by changing the `Response.StatusCode` and then returning whatever values you're expecting in your `OnFailure` js method.  You can drive that based on any business logic you want (i.e. `catch Exception ex)` or `!ModelState.IsValid` ...)

    [HttpPost]
    public ActionResult Search(Person model) 
    {
      if (ModelState.IsValid) {
        // if valid, return a HTML view inserted by AJAX helper
        var results = PersonRepository.Get(model)
        return PartialView("Resulsts", vm);
        
      } else {
      	// if invalid, return a JSON object and handle with OnFailure method
        Response.StatusCode = (int)HttpStatusCode.BadRequest;
        return Json(new { errors = ModelState.Values.SelectMany(v => v.Errors) });
    
      }
    }


**Further Reading**: 

* [MVC 4 Ajax.BeginForm and ModelState.AddModelError][4]
* [ASP.NET MVC “Ajax.BeginForm” executes OnSuccess even though model is not valid][5]


[1]: https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx
[2]: https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.onsuccess.aspx
[3]: https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.onfailure.aspx
[4]: https://stackoverflow.com/q/21311026/1366033
[5]: https://stackoverflow.com/q/7328977/1366033

I'm trying to get errors to show up after an ajax submit has returned an error. I'm not sure what I'm missing, but I can't get it to work. This question is basically the same thing - https://stackoverflow.com/questions/10406998/modelstate-addmodelerror-is-not-being-displayed-inside-my-view but I'm still not having any luck. My experience with Ajax and MVC (any version) is still a bit limited. Here is a very simple example, most of which I took from the previous link. 

View: test.cshtml

    @model TestProject.VisitLabResult

    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
    @Scripts.Render("~/Scripts/ckeditor/ckeditor.js")

    @{
        AjaxOptions ajaxOpts = new AjaxOptions
        {
            Url = Url.Action("test"),
            HttpMethod = "Post",
            LoadingElementId = "loading",
            LoadingElementDuration = 500,
            OnSuccess = "processData"
        };
    }
    @Html.ValidationMessage("CustomError")


    <div id="loading" class="load" style="display:none">
        <p>Saving...</p>
    </div>

    <table>
    @for (int item = 0; item < 10; item++)
    {
        <tr id = @item>
        @using (Ajax.BeginForm(ajaxOpts))
        {  
            @Html.ValidationSummary(true)

            @Html.AntiForgeryToken()
        
            <td>
                <input type="submit" value="Create" />
            </td>

            <td id = @(item.ToString() + "td")>
            </td>
        }
        </tr>
        }
    </table>

Controller: HomeController.cs

    public ActionResult test()
    {
        return View();
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult test(VisitLabResult vlr, int visitid = 28)
    {
        try
        {
            if (ModelState.IsValid)
            {
                if (Request.IsAjaxRequest())
                {
                    throw new Exception("error");
                }
                else
                    return View(vlr);
            }
            else
                return View(vlr);
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("CustomError", "The Same test Type might have been already created, go back to the Visit page to see the available Lab Tests");
            return View(vlr);
        }
    }

Model 

    public class VisitLabResult
    {
        public int visitid { get; set; }
    }


If it is an Ajax request I throw an error and it's caught and an error is added to ModelState. That error never shows up on the page though. Am I approaching this the right way at all? Or do I need to take a different route? I appreciate any help.

MVC 4 Ajax.BeginForm and ModelState.AddModelError

According to the [typeahead docs](https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md), the context passed into the `header` template:

> will contain `query` and `suggestions`

`Suggestions` contains a list of the current suggestions for that data set and exposes a length property.  So just use `{{suggestions.length}}` in the handlebars template for your header (not `{{count}}`).

### Here's a demo in Stack Snippets.





    // constructs the suggestion engine
    var clients = new Bloodhound({
        local: ["A Client", "AA Client", "BC Client"],
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });
    var contacts = new Bloodhound({
        local: ["BA Contact", "BB Contact", "CC Contact"],
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });
    var tasks = new Bloodhound({
        local: ["A Client", "AA Client", "BC Client"],
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    // initialize typeahead by passing in options and data
    $("#clients").typeahead({
        hint: true,
        minLength: 1
    }, {
        name: 'clients',
        source: clients,
        templates: {
            header: Handlebars.compile($("#clients-header").html())
        }
    }, {
        name: 'contacts',
        source: contacts,
        templates: {
            header: Handlebars.compile($("#contacts-header").html())
        }
    }, {
        name: 'tasks',
        source: tasks,
        templates: {
            header: Handlebars.compile($("#tasks-header").html())
        }
    });



    .search_header {
      margin-left: 6px;
    }
    div.tt-menu {
      margin-top: 0px;
    }



    <link href="http://twitter.github.io/typeahead.js/css/examples.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script>

    <input type="text" id="clients" class="typeahead" />

    
    <script id="clients-header" type="text/x-handlebars-template">
      <strong class="search_header">
        Clients <small>({{suggestions.length}}) results</small>
      </strong>
    </script>
    <script id="contacts-header" type="text/x-handlebars-template">
      <strong class="search_header">
        Contacts  <small>({{suggestions.length}}) results</small>
      </strong>
    </script>
    <script id="tasks-header" type="text/x-handlebars-template">
      <strong class="search_header">
        Tasks  <small>({{suggestions.length}}) results</small>
      </strong>
    </script>

I'm trying to show the amount of results showing per subject using handlebars in typeahead, like this:

![example][1]

Here's the code I have so far:




    var clients = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('client_name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: 'clients.php?query=%QUERY',
        wildcard: '%QUERY'
      }
    });

    var contacts = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('contact_firstname'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: 'contacts.php?query=%QUERY',
        wildcard: '%QUERY'
      }
    });

    var tasks = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('assignment_subject'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: 'tasks.php?query=%QUERY',
        wildcard: '%QUERY'
      }
    });

    clients.initialize();
    contacts.initialize();
    tasks.initialize();

    $("#clients").typeahead({
      hint: true,
      // highlight: true,
      minLength: 1
    },{
      name: 'clients',
      displayKey: 'client_name',
      source: clients.ttAdapter(),
      templates: {
        header: Handlebars.compile('<div class="search_header">Kundkort <span>(<span class="test">{{#each client_name}} {{counter @index}} {{@index}} {{/each}}</span>) träffar</span></div>'),
        suggestion: Handlebars.compile('<div><span class="act_link"><a href="?p=crm&client_id={{client_id}}&action=view">{{client_name}}</a></span> <div class="client_type">{{#ifCond client_type "==" 1}} A-kund {{else}} {{#ifCond client_type "==" 2}} Återförsäljare {{/ifCond}} {{#ifCond client_type "==" 3}} Leverantör {{/ifCond}} {{#ifCond client_type "==" 4}} Partner {{/ifCond}} {{#ifCond client_type "==" 5}} Prospekt {{/ifCond}} {{/ifCond}}</div></div>')
      }
    },{
      name: 'contacts',
      displayKey: 'contact_firstname',
      source: contacts.ttAdapter(),
      templates: {
        header: Handlebars.compile('<div class="search_header">Personer <span>(<span class="test">{{c_count}}</span>) träffar</span></div>'),
        suggestion: Handlebars.compile('<div><span class="act_link"><a href="?p=crm&client_id={{client_id}}&action=view">{{contact_firstname}} {{contact_lastname}}</a></span> <div class="client_type">{{client_name}}</div></div>')
      }
    },{
      name: 'tasks',
      displayKey: 'assignment_subject',
      source: tasks.ttAdapter(),
      templates: {
        header: Handlebars.compile('<div class="search_header">Uppgifter <span>(<span class="test">{{tasks.id.length}}</span>) träffar</span></div>'),
        suggestion: Handlebars.compile('<div><span class="act_link"><a href="?p=tasks&id={{id}}&action=view">{{assignment_subject}}</a></span></div>')
      }      
    });


I've been trying different methods and I can't seem to figure it out.


----------

**EDIT**

jsFiddle without working results [http://jsfiddle.net/0n0b2ue4/2/][2]

jsFiddle with data [http://jsfiddle.net/0n0b2ue4/3/][3]


  [1]: http://i.stack.imgur.com/AeIUR.png
  [2]: http://jsfiddle.net/0n0b2ue4/2/
  [3]: http://jsfiddle.net/0n0b2ue4/3/

Handlebars typeahead count results showing

You will never be able to fully replicate by yourself what an arbitrary (SPA) page does.

The only way I see is using a headless browser such as [PhantomJS](http://phantomjs.org/) or [Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome), or [Headless Firefox](https://developer.mozilla.org/en-US/Firefox/Headless_mode).

I wanted to try Headless Chrome so let's see what it can do with your page:

## Quick check using internal REPL

Load that page with Chrome Headless (you'll need Chrome 59 on Mac/Linux, Chrome 60 on Windows), and find page title with JavaScript from the REPL:

    % chrome --headless --disable-gpu --repl https://connect.garmin.com/modern/activity/1915361012
    [0830/171405.025582:INFO:headless_shell.cc(303)] Type a Javascript expression to evaluate or "quit" to exit.
    >>> $('body').find('.page-title').text().trim() 
    {"result":{"type":"string","value":"Daily Mile - Round 2 - Day 27"}}

NB: to get `chrome` command line working on a Mac I did this beforehand:

    alias chrome="'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'"

## Using programmatically with Node & Puppeteer

> [Puppeteer](https://github.com/GoogleChrome/puppeteer) is a Node library (by Google Chrome developers) which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.

(Step 0 : Install [Node](https://nodejs.org/en/) & [Yarn](https://yarnpkg.com/lang/en/) if you don't have them)

In a new directory:

    yarn init
    yarn add puppeteer

Create `index.js` with this:

    const puppeteer = require('puppeteer');
    (async() => {
        const url = 'https://connect.garmin.com/modern/activity/1915361012';
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        // Go to URL and wait for page to load
        await page.goto(url, {waitUntil: 'networkidle'});
        // Wait for the results to show up
        await page.waitForSelector('.page-title');
        // Extract the results from the page
        const text = await page.evaluate(() => {
            const title = document.querySelector('.page-title');
            return title.innerText.trim();
        });
        console.log(`Found: ${text}`);
        browser.close();
    })();

Result:

    $ node index.js 
    Found: Daily Mile - Round 2 - Day 27

I'm trying to fetch an entire webpage using JavaScript by plugging in the URL.  However, the website is built as a Single Page Application (SPA) that uses JavaScript / [backbone.js][6] to dynamically load most of it's contents after rendering the initial response.

So for example, when I route to the following address:



    https://connect.garmin.com/modern/activity/1915361012

And then enter this into the console (after the page has loaded):



    var $page = $("html")
    console.log("%c✔: ", "color:green;", $page.find(".inline-edit-target.page-title-overflow").text().trim());
    console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());

Then I'll get the dynamically loaded activity title as well as the statically loaded page footer:

![Working Screenshot][1]


---

**However**, when I try to load the webpage via an AJAX call with either [`$.get()`][4] or [`.load()`][5], I only get delivered the initial response (the same as the content when over view-source):



    view-source:https://connect.garmin.com/modern/activity/1915361012

So if I use either of the the following AJAX calls:




    // jQuery.get()
    var url = "https://connect.garmin.com/modern/activity/1915361012";
    jQuery.get(url,function(data) {
        var $page = $("<div>").html(data)
        console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
        console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
    });

    // jQuery.load()
    var url = "https://connect.garmin.com/modern/activity/1915361012";
    var $page = $("<div>")
    $page.load(url, function(data) {
        console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim()    );
        console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
    });

I'll still get the initial footer, but won't get any of the other page contents:

![Broken - Screenshot][2]

----

I've tried the [**solution** here][3] to `eval()` the contents of every `script` tag, but that doesn't appear robust enough to actually load the page:




    jQuery.get(url,function(data) {
        var $page = $("<div>").html(data)
        $page.find("script").each(function() {
            var scriptContent = $(this).html(); //Grab the content of this tag
            eval(scriptContent); //Execute the content
        });
        console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
        console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
    });

***Q: Any options to fully load a webpage that will scrapable over JavaScript?***

[1]: https://i.stack.imgur.com/ZYcde.png
[2]: https://i.stack.imgur.com/iU0iN.png
[3]: https://stackoverflow.com/a/8279719/1366033
[4]: https://api.jquery.com/jquery.get/
[5]: http://api.jquery.com/load/
[6]: http://backbonejs.org/

Load a SPA webpage via AJAX

The offending issue was indeed the same as in [Always success on ajax post with HttpResponseMessage 401][1]. The response was returned successfully, but trapped a redirect to a form login



<pre><code><b>X-Responded-JSON</b>: {"status": 401, "headers": {"location":"http:\/\/localhost:50004\/Login?ReturnUrl=%2FClient"}}</code></pre>

Although that question doesn't seem to suggest a server side solution, instead simply relying on a parsing the error state on the client. **Brock Allen** suggests a server side fix in his post on [Using cookie authentication middleware with Web API and 401 response codes][2]:

> Normally when using cookie authentication middleware, when the server (MVC or WebForms) issues a 401, then the response is converted to a 302 redirect to the login page (as configured by the LoginPath on the [**CookieAuthenticationOptions**][3]). But when an Ajax call is made and the response is a 401, it would not make sense to return a 302 redirect to the login page. Instead you’d just expect the 401 response to be returned. Unfortunately this is not the behavior we get with the cookie middleware — the response is changed to a 200 status code with a JSON response body with a message:

>
    
>     {"Message":"Authorization has been denied for this request."}

>I’m not sure what the requirement was for this feature. To alter it, you must take over control of the behavior when there is a 401 unauthorized response by configuring a CookieAuthenticationProvider on the cookie authentication middleware:

>

>     app.UseCookieAuthentication(new CookieAuthenticationOptions
    {
       AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
       LoginPath = new PathString("/Account/Login"),
       Provider = new CookieAuthenticationProvider
       {
          OnApplyRedirect = ctx =>
          {
             if (!IsAjaxRequest(ctx.Request))
             {
                ctx.Response.Redirect(ctx.RedirectUri);
             }
         }
       }
    });

>Notice it handles the OnApplyRedirect event. When the call is not an Ajax call, we redirect. Otherwise, we do nothing which allows the 401 to be returned to the caller.

>The check for IsAjaxRequest is simply copied from a [**helper**][4] in the katana project:

>

>     private static bool IsAjaxRequest(IOwinRequest request)
    {
       IReadableStringCollection query = request.Query;
       if ((query != null) && (query["X-Requested-With"] == "XMLHttpRequest"))
       {
          return true;
       }
       IHeaderDictionary headers = request.Headers;
       return ((headers != null) && (headers["X-Requested-With"] == "XMLHttpRequest"));
    }

[1]: https://stackoverflow.com/q/20662608/1366033
[2]: https://brockallen.com/2013/10/27/using-cookie-authentication-middleware-with-web-api-and-401-response-codes/
[3]: https://brockallen.com/2013/10/24/a-primer-on-owin-cookie-authentication-middleware-for-the-asp-net-developer/
[4]: https://github.com/aspnet/AspNetKatana/blob/v3.1.0/src/Microsoft.Owin.Security.Cookies/Provider/DefaultBehavior.cs#L36

I'm submitting a standard [`$.ajax()`][1] request like this:



    $.ajax({
        type: "GET",
        url: myUrl
        success: function(data) {
            $("#replace").html(data)
        },
        error: function (data) {
            console.warn(data);
        }
    });

Or the same thing by attaching the handler to the [ajax promise][2] callbacks like this:



    $.ajax({
        type: "GET",
        url: myUrl
    })
    .done(function(data, status) {
        console.log(data);
    })
    .fail(function(data, status) {
        console.warn(status);
    });

In both cases, or when using [`$.ajaxError()` handler][3], the error/fail function is called when a HTTP status error is returned.

-------

In my ASP.NET MVC project, I'm trying to return the proper **HTTP Status Code**, both for semantic reasons and to be caught by the right client side handler.

**Attempt #1** - As suggested by [this answer][4] I've tried to return a [`HttpStatusCodeResult`][5] like this:



    protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
    {
        if (filterContext.HttpContext.Request.IsAjaxRequest())
        {
            filterContext.Result = new HttpStatusCodeResult(HttpStatusCode.Unauthorized, accessResult.AccessDeniedMessage);
            filterContext.HttpContext.Response.End();
        }
        else
        {
           base.HandleUnauthorizedRequest(filterContext);
        }
    }

**Attempt #2** - Alternatively, as suggested by [this answer][6], I've tried returning a `JsonResult` and also setting the [`Response.StatusCode`][7]



    filterContext.HttpContext.Response.StatusCode = (int)HttpStatusCode.Unauthorized;
    filterContext.Result = new JsonResult()
    {
        Data = new { Error = "Unauthorized User" },
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
    filterContext.HttpContext.Response.End();

In both cases, the response still comes back as **200 OK**


[![AJAX Status Code Screenshot][8]][8]


### Questions:

* Am I correct about the semantics that I should be returning an AJAX response with a Unauthorized Status Code?
* Is there somewhere else to set this value that I need to do also?
* Is there some server level setting to allow non-200 status codes to be returned?

---

This question on [Always success on ajax post with HttpResponseMessage 401][9] seems to be running into the same error, but doesn't propose a server side solution, instead just allowing the OK error status code and scraping the response to determine if an error occurred.


  [1]: http://api.jquery.com/jquery.ajax/
  [2]: http://api.jquery.com/jquery.ajax/#jqXHR
  [3]: http://api.jquery.com/ajaxerror/
  [4]: https://stackoverflow.com/a/8702126/1366033
  [5]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.HttpStatusCodeResult "System.Web.Mvc.HttpStatusCodeResult"
  [6]: https://stackoverflow.com/a/11085769/1366033
  [7]: https://msdn.microsoft.com/en-us/library/System.Web.HttpResponse.StatusCode "System.Web.HttpResponse.StatusCode"
  [8]: https://i.stack.imgur.com/jEy2K.png
  [9]: https://stackoverflow.com/q/20662608/1366033