The below code is intended to return json object from arraylist but it is not showing alert.
there is no js error...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="json.js" />
<script type="text/javascript" src="json2.js" />
<script type="text/javascript">
var my_info= {};
my_info["john"]="1a";
my_info["joseph"]="2b";
my_info["helen"]="3c";
var val = JSON.stringify(my_info);
alert(val);
</script>
</head>
<body>
</body>
</html>
Script tags don't allow self-closing (<script ... />). You have to use <script src="..."></script> instead.
See for more information this question.
Your code becomes:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="json.js"></script> <!-- Here -->
<script type="text/javascript" src="json2.js"></script> <!-- And here -->
<script type="text/javascript">
var my_info= {};
my_info["john"]="1a";
my_info["joseph"]="2b";
my_info["helen"]="3c";
var val = JSON.stringify(my_info);
alert(val);
</script>
</head>
<body>
</body>
</html>
JSFIDDLE (ignore the warnings)
Related
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 already linked the script to my html file for the angularjs,sanitize and animate:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
and when i added the ngAnimate as a dependency to my module just like this:
var nameSpace = angular.module("OscarApp", ["ngSanitize","ngAnimate"]);
all my variables inside my expression were displayed as it is not on what was initialized on the variable, just like this:
{{item.award_title}}
what seems to be the problem? I just want to follow this tutorial (https://www.youtube.com/watch?v=Bcv46xKJH98).
Works for me...
This prints 2 to the screen
index.html
<!DOCTYPE html>
<html ng-app="OscarApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-sanitize.min.js"></script>
<script type="text/javascript" src="angular-animate.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
app.js
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
Angular version 1.3.0-rc.3 (latest download from angularjs.org)
This snippet shows that there is no problem with the unit.
maybe you have a problem elsewhere.
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
nameSpace.controller('OscarCtrl',['$scope',function($scope) {
$scope.item={ 'award_title' : 'The Lord of The Rings' };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.min.js"></script>
<div ng-app="OscarApp" ng-controller="OscarCtrl">
{{item.award_title}}
</div>
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
I've got a sample script as below. I wanna see if local.js or online/latest.js failed to load. Is it possible?
<html>
<title>My JQuery Test</title>
<head>
<!--<script type="text/javascript" src="jquery/jquery.local.js"></script>-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Buttons-theTestAlert").click(function () {
alert("`Test Alert` clicked");
});
});
</script>
</head>
<body>
<button id="Buttons-theTestAlert">Test Alert</button>
</body>
</html>
You can test
if (myFunction) myFunction()
else alert('not loaded (yet)')