Question

Having trouble accessing javascript code in a mixed html/js ajax response. jQuery ajax doc states:

If html is specified, any embedded JavaScript inside the retrieved
data is executed before the HTML is returned as a string

Which I can confirm by adding a simple snippet to the html reply:

<script type="text/javascript"> alert($(this)); </script>

How then to retain access to the js code vs. one-and-done execution?? Trying to implement a modal login (to prevent data loss on session timeout in form submission screens). Of course I need to be able to access the ajax’d js code to then validate email/password fields and ajax authenticate user credentials on the remote server.

Here’s the modal login coffeescript snippet:

# submit form
$.ajax
  success: (data) -> ...
  error: (data) ->
    popAuth(data.responseText) if(data.status == 401)

popAuth = (title) -> 
  $.fancybox({
    href: "/login"
    ajax: { type: "GET" }
    title: title
  })

Perhaps I can add a success callback to popAuth() ajax options to store the returned js code? How about jQuery “live” handler? Unfortunate that this scenario is not as straight forward as one would hope 😉 I have seen $.getScript as an option, but would prefer to not separate html from js since server-side already assembles html + js and the original ajax call pulls it all down in one go. (i.e. avoid creating a dedicated server-side controller to send back js file content bundle)

I am of course open to alternative solutions to workaround this issue. For example, I could store login fields and js login validation code on every screen (JVM CRUD application living behind WordPress front end so every screen is basically auth required) in a hidden div, and then pop the modal login window “locally”, which I assume would get around the annoying one-and-done js execution of remote ajax content.

Anyway, Ideas appreciated! client-side is both wonderfully simple and…horribly complex 😉

Answer 1

Ok, fending off the veritable deluge of responses, I’ll take a stab myself.

As I understand it now, since mixed html/js content is one-and-done executed, we have one chance to capture ajax response js code and bind it to current scope.

First, in the original ajax call (i.e. form submit that returns a potential 401 not authorized status) set the context of the modal login’s ajax setup to $(this), the currently executing scope that contains jquery validation and other shared js code needed for modal login ajax submit to work.

In my case, using fancybox, adding context param it now looks like:

popAuth = (title) -> 
  $.fancybox({
    href: "/login"
    ajax: { type: "GET" }
    context: $(@)
    title: title
  })

Then, since the parent window contains the majority of needed javascript, the only requirement is to create a js file that binds modal login form button click event to validation and $.ajax submission.

# login.coffee
jQuery ->
  $('#loginSubmit').click (e) ->
    e.preventDefault()
    isValid = $('#loginForm').validate().form()
    if isValid
      $('#spinner').show()
      $.ajax
        data: $('#loginForm').serialize()
        success: (data) ->
          $('#status').fadeOut()
          location.href = '/foo'
        error: (data) ->
          $('#status > div').html( data.responseText )
          $('#status').fadeIn()
        complete: () ->
          $('#spinner').hide()

Done, all good, works 😉