如何本地化使用AJAX调用内联脚本

时间:2012-11-28 作者:Pollux Khafra

我有一个帖子循环,允许用户使用ajax编辑每篇帖子。当点击帖子的编辑按钮时,我使用ajax检索包含帖子编辑表单的模板部分。通过使用“get\\u template\\u part”创建一个函数,然后本地化一个脚本,使用$ajax来执行该函数,这非常简单。

现在我的问题来了。我需要用我们调用的模板部分中的ajax处理表单。为了处理该表单的jquery,必须将jquery作为内联脚本添加到模板中。因此,当在from中单击按钮进行保存和编辑时,我需要运行php函数来处理所做的任何编辑。但我不能这样做,因为我实际上无法本地化内联脚本,而内联脚本将允许我使用我创建的php函数。任何想法。

更新时间:

好的,我没有将脚本添加到模板内联中,而是在获取模板部分的函数中注册脚本,然后打印它,我认为这会给我一个本地化的机会。该脚本适用于模板部件,但未本地化。

 add_action(\'wp_ajax_fetch_dashboard_edit_form\', \'fetch_dashboard_edit_form\'); 
 function fetch_dashboard_edit_form() {
    $post_id = $_POST[\'postId\'];
    $edit_type = $_POST[\'editType\'];
    include(locate_template(\'edit-\'.$edit_type.\'.php\'));    
    wp_register_script(
     \'fod_edit_script\',
     get_bloginfo(\'stylesheet_directory\') . \'/libs/edit.js\',
     array( \'jquery\' ),
     null,
     true
    );
    wp_localize_script(
     \'fod_edit_script\',
     \'editAjax\',
     array(
        \'ajaxurl\' => admin_url( \'admin-ajax.php\' )
     )
    );
    wp_print_scripts("fod_edit_script");
 }

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

避开整个问题,只在页面的标题中包含fo\\u edit\\u脚本,而不是在AJAX部分。根本没有必要这样做。

您可能会认为,只在需要优化时才包含它,而不需要优化,因为每次打开编辑表单时都必须加载它。

我想说的是,你想做的是不好的练习。避免通过包含远程JS文件或脚本标记引用的AJAX拉入html。

因此,如何做到这一点的简单答案是:don\'t.

您有:

Foreach post
    On AJAX
        include HTML
        Setup JS
而是:

Setup JS
foreach post
    On ajax
        include HTML
作为隐喻:

一位汽车销售员有5位顾客来到他的经销商处。他们每个人都要一辆本田思域。你所做的相当于本田销售人员建立5个工厂,为每个客户生产一辆汽车。

你所面临的是一个快速建造新工厂的问题。与其想办法解决眼前的新工厂问题,不如在汽车设计之初建立一个工厂,然后用它来生产所有的汽车。

因此,只需在AJAX调用中返回所需的html:

add_action(\'wp_ajax_fetch_dashboard_edit_form\', \'fetch_dashboard_edit_form\'); 
function fetch_dashboard_edit_form() {
    $post_id = $_POST[\'postId\'];
    $edit_type = $_POST[\'editType\'];
    include(locate_template(\'edit-\'.$edit_type.\'.php\'));
}
在显示帖子的屏幕上将脚本排队:

function add_fod_script(){
    wp_register_script(
     \'fod_edit_script\',
         get_bloginfo(\'stylesheet_directory\') . \'/libs/edit.js\',
         array( \'jquery\' ),
         null,
         true
    );
    wp_enqueue_script(\'fod_edit_script\');
}
add_action(\'admin_init\',\'add_fod_script\');
并调整编辑。js相应。

这还有一个好处,当你第一次编辑帖子时,浏览器抓取编辑时不会有延迟。js,因为它已经加载。

这也意味着您只包含了一次JS,所以您不会一次又一次地使用相同的脚本标记来丢弃DOM

您应该记住,一旦设置了AJAX html并将其插入到DOM中,新元素将不会附加您在DOM上设置的事件触发器,它们需要重新添加,或者是更多调用,或者是通过最初使用诸如“on”jquery功能的方式:

http://api.jquery.com/on/

e、 g.不要说:

$("#dataTable tbody tr").click( function(event){
    alert($(this).text());
});
这意味着对于我们现在可以找到的任何dataTabletbody tr,添加一个事件单击处理程序,改为执行以下操作:

$(document).on("click", "#dataTable tbody tr", function(event){
    alert($(this).text());
});
这意味着同样的事情,但对于当前或将来可能存在的任何数据表tbody tr来说。

因此,我们可以详细说明之前的内容:

Include JS
Setup JS for page
foreach post
    On ajax
        include AJAX HTML
        Setup JS events again, for the AJAX HTML
如果你真的,真的,真的想继续按你现在的方式做,有一个解决办法,但正如我所说的,你所做的是不好的,不好的做法,只会导致更多的困难、重复和问题。把创可贴贴在创可贴上。请参阅:

https://stackoverflow.com/questions/235967/calling-a-jquery-function-inside-html-return-from-an-ajax-call

结束