从 ajax 响应注入 javascript/jquery

Question

我正在使用ajaxlinks.js 用于 ajaxify Web 应用程序。它对 ajaxifying 工作正常。主要问题我必须通过 ajax 响应加载和执行 javascript(or)Jquery。我可以在回调函数中获取脚本

callback: function(content, link, params, scripts) {
        $('#content1').css('opacity', '0').animate({'opacity': '1'}, 'slow');
        $(link).addClass('active').siblings().removeClass('active');

        alert(scripts);
    }

我尝试了很多方法来运行从 ajax 响应中获得的脚本 喜欢eval(scripts)

在 ajax 响应中，我有一个 datatable 和用于运行数据表的脚本。

我的 ajax 响应

    <table id="7GxyxlL1" class="table table-bordered tableTools display">
           <colgroup>
                <col class="con0" />
                <col class="con1" />
                <col class="con2" />
                <col class="con3" />
                <col class="con4" />
                <col class="con5" />
                <col class="con6" />
            </colgroup>
    <thead>
    <tr>
                <th align="center" valign="middle" class="head1">ID</th>
                <th align="center" valign="middle" class="head2">Name</th>
                <th align="center" valign="middle" class="head3">Description</th>
                <th align="center" valign="middle" class="head4">Type</th>
                <th align="center" valign="middle" class="head5">Weight</th>
                <th align="center" valign="middle" class="head6">Status</th>
                <th align="center" valign="middle" class="head7">Operations</th>
            </tr>
    </thead>
    <tbody>
        </tbody>
</table>

    <script type="text/javascript">
    $(document).ready(function(){
        oTable = jQuery('#7GxyxlL1').dataTable({

                    "sPaginationType": "full_numbers",
                    "bProcessing": false,
                    "sAjaxSource": "http:\/\/himerp.com\/api\/materials",
                    "bServerSide": true,

                "sDom": "<'row'<'col-lg-4'l><'col-lg-4'T><'col-lg-4'f>r>t<'row'<'col-lg-4'i><'col-lg-8'p>>",
        "oTableTools": {
            "sSwfPath": "plugins/tables/dataTables/swf/copy_csv_xls_pdf.swf",
                "aButtons": [
                "copy",
                "print",
                {
                    "sExtends":    "collection",
                    "sButtonText": 'Save <span class="caret" />',
                    "aButtons":    [ "csv", "xls", "pdf" ]
                }
            ]
        },
        "processing": true,
        "sPaginationType": "bootstrap",
            "bJQueryUI": false,
            "bAutoWidth": false,
            "oLanguage": {
            "sSearch": "<span></span> _INPUT_",
                "sLengthMenu": "<span>_MENU_</span>",
                "oPaginate": { "sFirst": "First", "sLast": "Last" }
        }
        });

    if($('table').hasClass('tableTools')){

        $('.dataTables_length select').uniform();
        $('.dataTables_paginate > ul').addClass('pagination');
        $('.dataTables_filter>label>input').addClass('form-control');
    }
    });

</script>
                    </div>

                </div>
                <!-- End .panel -->

            </div>
            <!-- End .span12 -->

        </div>
        <!-- End .row -->

        <!-- Page end here -->

    </div>


</div>

有从 ajax 内容运行脚本的想法或方法吗？

Answer 1

将您的脚本包装在自调用匿名函数中

<script type="text/javascript">
(function(){  // ADD this
$(document).ready(function(){
    oTable = jQuery('#7GxyxlL1').dataTable({

                "sPaginationType": "full_numbers",
                "bProcessing": false,
                "sAjaxSource": "http:\/\/himerp.com\/api\/materials",
                "bServerSide": true,

            "sDom": "<'row'<'col-lg-4'l><'col-lg-4'T><'col-lg-4'f>r>t<'row'<'col-lg-4'i><'col-lg-8'p>>",
    "oTableTools": {
        "sSwfPath": "plugins/tables/dataTables/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
            "copy",
            "print",
            {
                "sExtends":    "collection",
                "sButtonText": 'Save <span class="caret" />',
                "aButtons":    [ "csv", "xls", "pdf" ]
            }
        ]
    },
    "processing": true,
    "sPaginationType": "bootstrap",
        "bJQueryUI": false,
        "bAutoWidth": false,
        "oLanguage": {
        "sSearch": "<span></span> _INPUT_",
            "sLengthMenu": "<span>_MENU_</span>",
            "oPaginate": { "sFirst": "First", "sLast": "Last" }
    }
    });

if($('table').hasClass('tableTools')){

    $('.dataTables_length select').uniform();
    $('.dataTables_paginate > ul').addClass('pagination');
    $('.dataTables_filter>label>input').addClass('form-control');
}
});
}()); // ADD this
</script>

在您的加载程序脚本中（加载此内容）

为此内容添加占位符

<div id="data" ></div>

然后使用加载方法加载内容

 $("#data").load("page.html", function(d){
    console.log("loaded");
 })

Answer 2

查看插件后，我发现了它是如何工作的。

function tablePagination() {
    oTable = jQuery('#7GxyxlL1').dataTable({

                "sPaginationType": "full_numbers",
                "bProcessing": false,
                "sAjaxSource": "http:\/\/himerp.com\/api\/materials",
                "bServerSide": true,

            "sDom": "<'row'<'col-lg-4'l><'col-lg-4'T><'col-lg-4'f>r>t<'row'<'col-lg-4'i><'col-lg-8'p>>",
    "oTableTools": {
        "sSwfPath": "plugins/tables/dataTables/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
            "copy",
            "print",
            {
                "sExtends":    "collection",
                "sButtonText": 'Save <span class="caret" />',
                "aButtons":    [ "csv", "xls", "pdf" ]
            }
        ]
    },
    "processing": true,
    "sPaginationType": "bootstrap",
        "bJQueryUI": false,
        "bAutoWidth": false,
        "oLanguage": {
        "sSearch": "<span></span> _INPUT_",
            "sLengthMenu": "<span>_MENU_</span>",
            "oPaginate": { "sFirst": "First", "sLast": "Last" }
    }
    });

if($('table').hasClass('tableTools')){

    $('.dataTables_length select').uniform();
    $('.dataTables_paginate > ul').addClass('pagination');
    $('.dataTables_filter>label>input').addClass('form-control');
}
}

将 ajax 响应中的脚本替换为此。

在回调中，

function (content, link, params, script) {
    var scriptTag = document.createElement('script');
    scriptTag.innerHTML = script;
    document.getElementsByTagName('head')[0].appendChild(scriptTag);
    tablePagination();
}