I have following code where I am trying to load values into a dropdown from an array(from file page students.js):
student.js
var STU_NAME = 0;
var STU_ID = 1;
var STU_AGE = 2;
var STUDENTS = [
["Apple", 1, 15],
["Billy", 2, 16]
["Cathy", 3, 14]
];
Functions.js
var jQ = $.noConflict();
function populateStudents() {
jQ('#students').empty();
jQ('#students').append(jQ("<option></option>").attr("value", "").text("-- Please Select --"));
for (var _i = 0; _i < students.length; _i++) {
jQ('#students').append(jQ("<option></option>").attr("value", _i).text(STUDENTS[_i][STU_NAME]));
}
}
jQ(document).ready(function () {
populateStudents();
});
mypage.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="model">
<form>
<div>
<div id="StudentLabel">
Student:
</div>
<select id="students" name="students">
</select>
</div>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</form>
</div>
</body>
</html>
I get an error "Microsoft JScript runtime error: '$' is undefined" at line 1 of Functions.js
Can anyone help me on what I would be missing to make it working here.
You have forgotten to add the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
It is highly recommended to use CDN version of jquery to improve pagespeed,check this link
You need to include jquery library, you can download from here Add the script tag in head of page or before you use jquery.
<head runat="server">
<title></title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript" src="JS/jquery-1.7.2.js"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</head>
Related
Really noob question, but I don't understand what am I doing wrong here ?
<head>
<link rel="stylesheet" type="text/css" href="gridstack.js/dist/gridstack.css">
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"> azazfaz</div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>
<script type="text/javascript">
$(function () {
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
});
</script>
I get this error:
gridstack.js:391 Uncaught TypeError: undefined is not a function
pointing to this line in gridstack:
var is_nested = this.container.closest('.' + opts.item_class).size() > 0;
EDIT:
I found the problem, if I replace this lines
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
by
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
then it works , any idea why ?
As a workaround, you can do the following to make gridstack work when the size() function doesn't exist:
$.fn.size = function(){
return this.length;
};
jQuery 3.0 removes the jQuery.fn.size method. It's probably safer to just stick with 1.11.x when using this library.
https://github.com/jquery/jquery/issues/1749
(BTW I actually get this.container.closest(...).size is not a function as the reported error).
You can use jQuery 3.0 and above if you make an edit to gridstack.js as suggested by https://api.jquery.com/size/
Change Line 511 in gridstack.js (version 0.2.5) from:
var isNested = this.container.closest('.' + opts.itemClass).size() > 0;
to
var isNested = this.container.closest('.' + opts.itemClass).length > 0;
and gridstack works fine.
As jspdf does not support utf8 characters, I'm trying to replace some of the characters with images and then export it in pdf. To help you understand, I made the sample of code, where I try to put an image in html div, and then paste this into the pdf with jspdf. The text appears in pdf, but no image, so whats the issue? I am a beginner, so please explain me how to do this.
TRY THIS LINK AND SEE THE PROBLEM: http://www.balkanex.info/test/start.html
And the code is below:
start.html
<!doctype>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="runner.js" charset="utf-8"></script>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
<script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
</head>
<body>
<input type="button" id="btn" value="PROCEED TO THE NEXT PAGE" onClick="run();pdf();">
</body>
</html>
runner.js
function run() {
document.write('<div id="myid">This is the image: <img src="button.png" alt="Submit"> </div><br/>');
document.write('<button id="pdf">Export in pdf</button></div>');
}
script.js
function pdf() {
$(function () {
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}};
$('#pdf').click(function () {
doc.fromHTML($('#myid').html(), 15, 35, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample.pdf');
});
});
}
The library you use jspdf does not support some of the utf-8 letters, so I suggest you to use some other lib (like Mozilla's pdf.js) and avoid these problems.
If you, on the other hand, decide to use this one - then I you will have to make an array for each variable that saves the string and then replace chars with images.
Can you please tell me why this handlebars.js example will not work? I get a jquery error?
TypeError: e is null in the jquery
looks like its happening here $(document).append(theTemplate(theData));
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/handlebars.js"></script>
<script type ="text/javascript">
$(document).ready(function () {
var theData = { headerTitle: 'Shop Page', weekDay: 'Wednesday' };
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(document).append(theTemplate(theData));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
</div>
</form>
</body>
</html>
I changed my jQuery version to 1.7.2 and it fixed the problem.
still not sure what changed in the newer version
looks like the issue was appending to document if I change it to body it worked.
$('body').append(theTemplate(theData));
I'm trying to include a separate .js file so I can pull in a class I created but it doesn't work, can someone tell me why?
playercharacter.js
function PlayerCharacter() {
this.x = 0;
this.y = 0;
this.dx = 5;
this.dy = 5;
}
PlayerCharacter.prototype.sayHello = function()
{
alert ('hello');
};
index.html
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
You forgot wrap your JS-code into the <script> tags
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
Your JavaScript code is not in a script tag.
<script>
var player = new PlayerCharacter();
player.sayHello();
</script>
You need to surround the code in the body with a <script> tag.
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>