I don't know why but I have a piece of code which works on my system but is not working on WAMP or Shared server.
Below is my piece of code :-
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
(function($) {
$.ajax({
url:"select2.json",
type:"GET",
dataType:"json",
success:function(data){
var selectedDepartment, selectedSubproj;
$.fn.changeType = function() {
var options_projname = '<option>Select<\/option>';
$.each(data, function(i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function() {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<\/option>';
$.each(d.subproj, function(i, j) {
options += '<option value="' + j.title + '">' + j.title + '<\/option>';
});
} else {
options += '<option>Select<\/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function() {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index -1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function(i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<\/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<\/option>';
}
$("#unit").html(options);
});
};
}
});
})(jQuery);
$(document).ready(function() {
$("form#search").changeType();
});
</script>
<form id="search" action="" name="search">
<select name="projname" id="projname">
<option>Select</option>
</select>
<select name="subproj" id="subproj">
<option>Select</option>
</select>
<div name="unit" id="unit">
</div>
</form>
</body>
</html>I am getting the following error when I run in WAMP or Shared Server. http://s8.postimg.org/vj19w76v9/error.png But it runs fine if I run it like a normal html file on my pc. My JSON is also rendering very well so I know that there is no issue with it.
I tried clearing cache and all the good stuff but its eating my brain off...
Would be glad if someone could help.
Thanks in advance... Cheers...
</div>
The problem is that you are defining your changeType plugin in your success callback of the ajax call. Thus, at the time the document is ready, when you call that plugin, it will be undefined. You will need to define the plugin first and think of a way to pass the data variable you get from the ajax call by parameter. I believe something rough like this should work:
(function ($) {
$.fn.changeType = function (data) {
var selectedDepartment, selectedSubproj;
var options_projname = '<option>Select<\/option>';
$.each(data, function (i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function () {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<\/option>';
$.each(d.subproj, function (i, j) {
options += '<option value="' + j.title + '">' + j.title + '<\/option>';
});
} else {
options += '<option>Select<\/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function () {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index - 1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function (i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<\/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<\/option>';
}
$("#unit").html(options);
});
};
})(jQuery);
$(document).ready(function () {
$.ajax({
url: "select2.json",
type: "GET",
dataType: "json",
success: function (data) {
$("form#search").changeType(data);
}
});
});