I use this function to open a new window using the htmlMarkup as html content.
function PC_DownloadAsPdfSuccess(htmlMarkup) {
$("div#rightcolumnFARP").detachLoader();
if (htmlMarkup != null && htmlMarkup.length != 0) {
var printWindow = window.open("", "");
var newDocument = printWindow.document;
newDocument.open();
newDocument.write(htmlMarkup);
newDocument.close();
}
}
The new page is working as expected, except that is does not recognise the include js libraries, such as jquery, MicrosoftMvcAjax.js, etc. I get all sorts of error like:
$ is not defined, jquery is not defined, xVal is not defined. I'm pretty sure it's because the path for the links in the new window do not point correctly to the scripts, but only in IE. Firefox does not have this issue.
Here is the head htmlMarkup that seems to be the problem. I've tried playing with the path by going up several levels (using ../) but still no luck.
<head id="Head1"><title>
Print preview
</title>
<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<link href="/Content/ui.base.css" rel="stylesheet" type="text/css"
media="screen" />
<script src="/Scripts/utils.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.preloadImages.js" type="text/javascript"></script>
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/grid.base.js" type="text/javascript"></script>
<script src="/Scripts/grid.formedit.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablednd_0_5.js" type="text/javascript"></script>
<script src="/Scripts/xVal.jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-html-encode-decode.js" type="text/javascript"></script>
<script src="/Scripts/jquery-timedLogout.js" type="text/javascript"></script>
<script src="/Scripts/round-corners.js" type="text/javascript"></script>
<script src="/Scripts/superfish.js" type="text/javascript"></script>
<script src="/Scripts/jquery.formatCurrency-1.3.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tipTip.js" type="text/javascript"></script>
<script src="/Scripts/easyslider.js" type="text/javascript"></script>
<script src="/Scripts/jquery.json.min.js" type="text/javascript"></script>
<script src="/Scripts/browserSelector.js" type="text/javascript"></script>
<script src="/Scripts/jquery.antiForgeryToken.js" type="text/javascript"></script>
<script src="/Scripts/jquery.watermark.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="/Scripts/jquery.calculation.js" type="text/javascript"></script>
<script src="/Scripts/DetectBrowser.js" type="text/javascript"></script>
<script src="/Scripts/jquery.infoblock.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jloader.js" type="text/javascript"></script>
<script src="/Scripts/jqGridHeight.js" type="text/javascript"></script>
<script src="/Scripts/jquery.alerts.js" type="text/javascript"></script>
<script src="/Scripts/tabs.js" type="text/javascript"></script>
<script src="/Scripts/CustomValidation.js" type="text/javascript"></script>
<script src="/Scripts/fullcalendar.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.pieRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/excanvas.min.js"></script>
<head>
This is because u have already opened the window, which would have finished the loading event, after that u are placing the content, so the content is treated as text and the script functions are not loaded to your window you have opened. If suppose if have the javascript functions written openly on the window within script tag it would have worked, since the external script files are not got loaded, u are getting those errors, try some other way to fix ur problem
Related
Accidently jquery tabs stopped working in my wordpress admin panel
Here is the error message
jquery.form.js?ver=4.2.13:902 [jquery.form] terminating; zero elements found by selector
jquery.form.js?ver=4.2.13:902 [jquery.form] terminating; zero elements found by selector
jquery.form.js?ver=4.2.13:902 [jquery.form] terminating; zero elements found by selector
jquery.form.js?ver=4.2.13:902 [jquery.form] terminating; zero elements found by selector
tab.js?ver=4.2.13:142 Uncaught TypeError: jQuery(...).tabs is not a function
at HTMLDocument.<anonymous> (tab.js?ver=4.2.13:142)
at j (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.2.13:2)
at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.2.13:2)
at Function.ready (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.2.13:2)
at HTMLDocument.J (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.2.13:2)
previously I added Qtranslate plugin and its plugins for ACF and Yoast SEO plugins. I turned them off, but problem still appears.
Working admin panel had such scripts includings:
<script type='text/javascript' src='<SITENAME>/wp-admin/load-scripts.php?c=0&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,utils,plupload,jquery-ui-resizable,jquery-ui-draggabl&load%5B%5D=e,jquery-ui-button,jquery-ui-position,jquery-ui-dialog,farbtastic,jquery-form&ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/js/wd_menu_back.js?ver=4.2.13'></script>
<!--[if lt IE 8]>
<script type='text/javascript' src='<SITENAME>/wp-includes/js/json2.min.js?ver=2011-02-23'></script>
<![endif]-->
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/wp-all-export-pro/static/js/pmxe.js?ver=1.1.0'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/admin-menu-editor/js/admin-helpers.js?ver=20140312'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/js/jquery.form.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/tab.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/shortcode.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/page_config.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/js/jquery.fancybox.pack.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/js/bootstrap-colorpicker.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/logo-upload.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/woocommerce/assets/js/chosen/chosen.jquery.min.js?ver=2.3.8'></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/js_composer/assets/lib/vcIconPicker/jquery.fonticonpicker.min.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/advanced-spoiler/js/spoiler-admin.js?ver=2.02'></script>
Now it looks like :
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/wp-all-export-pro/static/js/pmxe.js?ver=1.1.0'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/admin-menu-editor/js/admin-helpers.js?ver=20140312'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/js/jquery.form.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/tab.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/shortcode.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/page_config.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/js/jquery.fancybox.pack.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/js/bootstrap-colorpicker.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/themes/wp_oswad_market/framework/admin/js/logo-upload.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/woocommerce/assets/js/chosen/chosen.jquery.min.js?ver=2.3.8'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/advanced-custom-fields-pro/assets/js/acf-input.min.js?ver=5.5.10'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/acf-qtranslate/assets/common.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/advanced-custom-fields-pro/pro/assets/js/acf-pro-input.min.js?ver=5.5.10'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/acf-qtranslate/assets/acf_5/main.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/acf-qtranslate/assets/acf_5/qtranslatex.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/woocommerce/assets/js/select2/select2.min.js?ver=3.5.2'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/advanced-custom-fields-pro/assets/inc/timepicker/jquery-ui-timepicker-addon.min.js?ver=1.6.1'></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/js_composer/assets/lib/vcIconPicker/jquery.fonticonpicker.min.js?ver=4.2.13'></script>
<script type='text/javascript' src='<SITENAME>/wp-content/plugins/advanced-spoiler/js/spoiler-admin.js?ver=2.02'></script>
What could be the cause of the error?
basically i am using some other websites javascripts to get a good looking layout but i have added this functionality in which i get a value from a text box like this
<script src="assets/lib/jquery.nanoscroller/javascripts/jquery.nanoscroller.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/lib/jquery-flot/jquery.flot.js" type="text/javascript"></script>
<script src="assets/lib/jquery-flot/jquery.flot.pie.js" type="text/javascript"></script>
<script src="assets/lib/jquery-flot/jquery.flot.resize.js" type="text/javascript"></script>
<script src="assets/lib/jquery-flot/plugins/jquery.flot.orderBars.js" type="text/javascript"></script>
<script src="assets/lib/jquery-flot/plugins/curvedLines.js" type="text/javascript"></script>
<script src="assets/lib/jquery.sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="assets/lib/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-us-merc-en.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-uk-mill-en.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-fr-merc-en.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-us-il-chicago-mill-en.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-au-mill-en.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-in-mill-en.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-map.js" type="text/javascript"></script>
<script src="assets/lib/jquery.vectormap/maps/jquery-jvectormap-ca-lcc-en.js" type="text/javascript"></script>
<script src="assets/lib/countup/countUp.min.js" type="text/javascript"></script>
<script src="assets/lib/chartjs/Chart.min.js" type="text/javascript"></script>
<script src="assets/js/app-dashboard.js" type="text/javascript"></script>
function execute()
{
var Search = document.getElementById('searchbox').value;
App.init();
App.dashboard();
}
these App.init();
are some external scripts that initialises a var variable which has very custom features.like charts,graphs etc
The value stored in Search can i use it in those javascripts that initialises App. Will the scope of variable exist in such case ?. if not how can i do so and use this Search variable value in all the referenced javascripts
i am using codeigniter bonfire for creating a web applicaion. i am using simple hide() and show() function of jquery but its not working. i will check all scripts no error on console..i cant understand why its not working.
I include jquery files are in ways :-
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/before.load.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-ui.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-migrate-1.2.1.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/bootstrap/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/richmarker-compiled.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/smoothscroll.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-select.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.hotkeys.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.nouislider.all.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/custom.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/maps.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/star-rating.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.gmap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/locationpicker.jquery.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-editable.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.timeago.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.magnific-popup.js" type="text/javascript" ></script>
All files are included correctly. There is no problem to including files.
Jquery code is-:
<script>
function regis_form() {
$('#is_owner').change(function() {
if (this.checked) {
$('#registration_fields').show();
} else
$('#registration_fields').hide();
});
}
</script>
And at a footer i am calling regis_form(); like :-
$(document).ready(function(){
regis_form()
});
Function is also calling correctly but div is not showing or hiding. Is any problem with sequence of including jquery files?
This below snippet seems to work for me,
<html>
<head>
<script src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript" ></script>
<script>
function regis_form()
{
$('#is_owner').change(function () {
console.log("checked"+this.checked);
if(this.checked)
{
$('#registration_fields').show();
}
else
$('#registration_fields').hide();
});
}
</script>
</head>
<body>
<input type="checkbox" id="is_owner" />
<div id="registration_fields">
<p>Content visible</p>
</div>
<footer>
<script>
$(document).ready(function(){
regis_form();
});
</script>
</footer>
</body>
</html>
function regis_form() {
$('#is_owner').change(function() {
console.log("checked" + this.checked);
if (this.checked) {
$('#registration_fields').show();
} else
$('#registration_fields').hide();
});
}
$(document).ready(function() {
regis_form();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="is_owner" />
<div id="registration_fields">
<p>Content visible</p>
</div>
First below script put on your header file
then you will use it
Jquery('#id').hide();
or
Jquery('#id').show();
Reason:
Function called but the problem is event not fired.
Solution:
Include jquery
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
put the code in $(document).ready function
$(document).ready(function(){
$('#is_owner').click(function () {
//console.log($(this).prop("checked));
if($(this).prop("checked") == true){
$('#registration_fields').show();
}else{
$('#registration_fields').hide();
}
});
});
Hope it helps.....
I have a list of javascript calls for a page such as:
<!-- page scripts -->
<script src="/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/js/jquery.chosen.min.js"></script> <!-- not used but we should -->
<script src="/js/jquery.cleditor.min.js"></script><!--used-->
<script src="/js/jquery.autosize.min.js"></script>
<script src="/js/jquery.placeholder.min.js"></script>
<script src="/js/jquery.maskedinput.min.js"></script>
<script src="/js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-timepicker.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/daterangepicker.min.js"></script>
<script src="/js/jquery.hotkeys.min.js"></script>
<script src="/js/bootstrap-wysiwyg.min.js"></script>
<script src="/js/bootstrap-colorpicker.min.js"></script>
<script src="/js/jquery.knob.modified.min.js"></script>
<script src="/js/raphael.min.js"></script>
<script src="/js/justgage.1.0.1.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/ui-sliders-progress.js"></script>
<!-- inline scripts related to this page -->
<script src="/js/pages/form-elements.js"></script><!--used-->
<script type="text/javascript" src="/js/stripe.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
How can I possibly optimize this and make my pages faster
I'm trying to use Ultimate date plugins for DataTables (http://datatables.net/blog/2014-12-18). I have both file (moment.js 2.8.1 and datetime-moment.js plugin), they are load fine but when I use the syntax :
$(document).ready(function() {
$.fn.dataTable.moment( 'DD/MM/YYYY' );
$('#example').DataTable();
} );
I got an error : ReferenceError: moment is not defined
Don't know where is the problem...
Edit :
<script src="/js/libs/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/js/libs/jquery-ui/jquery-ui-1.11.1.min.js" type="text/javascript"></script>
<script src="/js/libs/validationEngine/js/languages/jquery.validationEngine-fr.js" type="text/javascript"></script>
<script src="/js/libs/validationEngine/js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="/js/libs/underscore/underscore-1.7.0.min.js" type="text/javascript"></script>
<script src="/js/libs/moment/moment-2.8.1.min.js" type="text/javascript"></script>
<script src="/js/plugins/datatables/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="/js/plugins/datatables/js/datetime-moment.js" type="text/javascript"></script>
<script src="/js/libs/highcharts/4.0.4/highcharts.js" type="text/javascript"></script>
<script src="/js/libs/highcharts/4.0.4/highcharts-more.js" type="text/javascript"></script>
<script src="/js/libs/highcharts/4.0.4/modules/exporting.js" type="text/javascript"></script>
<script src="/js/libs/highcharts/4.0.4/modules/no-data-to-display.js" type="text/javascript"></script>