inject javascript/jquery from ajax response -
i'm using ajaxlinks.js ajaxify web application . working fine ajaxifying . main problem have load , execute javascript(or)jquery via ajax response. can able script in callback function
callback: function(content, link, params, scripts) { $('#content1').css('opacity', '0').animate({'opacity': '1'}, 'slow'); $(link).addclass('active').siblings().removeclass('active'); alert(scripts); }
i tried many ways run script got ajax reponse eval(scripts)
in ajax response have datatable
, script functioning datatable.
my ajax response
<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>
any idea or methods run script ajax content?
wrap script in self calling anonymous function
<script type="text/javascript"> (function(){ // add $(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 </script>
in loader script(which load content)
add placeholder content
<div id="data" ></div>
and load content using load method
$("#data").load("page.html", function(d){ console.log("loaded"); })
Comments
Post a Comment