Question

我正在使用ajaxlinks.js 用于ajaxify Web应用程序。它适用于ajaxifying。主要问题我必须通过ajax响应加载和执行javascript（或）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();
}

从ajax响应中注入javascript / jquery

2 个答案: