Having trouble accessing javascript code in a mixed html/js ajax response. jQuery ajax doc states:
无法在混合的html / js ajax响应中访问javascript代码。 jQuery ajax doc说:
If html is specified, any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string
如果指定了html,则在将HTML作为字符串返回之前,将执行检索到的数据中的任何嵌入式JavaScript
Which I can confirm by adding a simple snippet to the html reply:
我可以通过在html回复中添加一个简单的片段来确认:
<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.
那么如何保持对js代码的访问与一次性完成执行?尝试实现模态登录(以防止表单提交屏幕中的会话超时数据丢失)。当然,我需要能够访问ajax'd js代码然后验证电子邮件/密码字段和ajax在远程服务器上验证用户凭据。
Here's the modal login coffeescript snippet:
这是模态登录coffeescript片段:
# 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)
也许我可以添加成功回调popAuth()ajax选项来存储返回的js代码? jQuery“live”处理程序怎么样?不幸的是,这种情况并不像人们希望的那样直截了当;-)我已经看到$ .getScript作为一个选项,但是我宁愿不将html与js分开,因为服务器端已经组装了html + js并且原来的ajax调用拉了这一切都一气呵成。 (即避免创建专用的服务器端控制器来发送回js文件内容包)
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.
我当然愿意接受解决此问题的替代解决方案。例如,我可以在隐藏的div中的每个屏幕上存储登录字段和js登录验证代码(生活在WordPress前端后面的JVM CRUD应用程序,因此每个屏幕基本上都是auth),然后在“本地”弹出模态登录窗口,我假设会绕过恼人的一次性完成js执行远程ajax内容。
Anyway, Ideas appreciated! client-side is both wonderfully simple and...horribly complex ;-)
无论如何,想法赞赏!客户端既简单又简单......非常复杂;-)
1 个解决方案
#1
0
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.
正如我现在所理解的那样,由于混合的html / js内容是一次性完成的,我们有一次机会捕获ajax响应js代码并将其绑定到当前范围。
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.
首先,在原始的ajax调用(即返回潜在的401未授权状态的表单提交)中,将模态登录的ajax设置的上下文设置为$(this),当前执行的范围包含jquery验证和其他所需的共享js代码。模态登录ajax提交工作。
In my case, using fancybox, adding context param it now looks like:
在我的例子中,使用fancybox,添加上下文参数现在看起来像:
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.
然后,由于父窗口包含大部分所需的javascript,唯一的要求是创建一个js文件,将模态登录表单按钮单击事件绑定到验证和$ .ajax提交。
# 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 ;-)
完成,一切都很好,有效;-)
#1
0
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.
正如我现在所理解的那样,由于混合的html / js内容是一次性完成的,我们有一次机会捕获ajax响应js代码并将其绑定到当前范围。
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.
首先,在原始的ajax调用(即返回潜在的401未授权状态的表单提交)中,将模态登录的ajax设置的上下文设置为$(this),当前执行的范围包含jquery验证和其他所需的共享js代码。模态登录ajax提交工作。
In my case, using fancybox, adding context param it now looks like:
在我的例子中,使用fancybox,添加上下文参数现在看起来像:
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.
然后,由于父窗口包含大部分所需的javascript,唯一的要求是创建一个js文件,将模态登录表单按钮单击事件绑定到验证和$ .ajax提交。
# 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 ;-)
完成,一切都很好,有效;-)