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...
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);
}
});
});
I have a text field on my form actually its like GMT time. I want the users to
enter integers like '+5' '+6' or '-6' or '-5' etc.
I want to make it easy for users so that they don't have to write '+' or '-' by there self. There should be by default option of '+' or '-' as first character in text field.
I saw some solutions like making a simple drop down in front and user can select from there which will automatically appear in text box.
But i want to make it more easy if some other easy solution is there.
will prefer using HTML5 but if not than jquery will be fine..
Try this one:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var num = 0;
$('#txt1').keydown(function(e){
num += 1;
if (e.keyCode > 36 && e.keyCode < 41) {
if(num % 2){
$('#txt1').val('+');
}else{
$('#txt1').val('-');
}
}
});
});
</script>
<input type="text" name="txt1" id="txt1" />
you could try this:
var $input = $('#input');
var defaultChar = '+';
$input.val(defaultChar);
$input.on('keyup', function(event) {
var $this = $(this);
var currentText = $this.val();
currentText = getDigits(currentText);
$this.val(defaultChar + currentText);
});
function getDigits(text) {
var digits = text.match(/[+-]?(\d*)/);
console.log("text = " + text);
console.log("digits = " + JSON.stringify(digits));
if(digits.length > 1) {
return digits[1];
} else {
return 'did not contain numbers';
}
}
here is the fiddle
EDIT: added dropdown to select defaultChar.
Javascript:
var $input = $('#input');
var $defaultCharElem = $('#defaultChar');
var defaultChar = $defaultCharElem.val();
$input.val(defaultChar);
$defaultCharElem.on('change', function() {
var $this = $(this);
defaultChar = $this.val();
$input.val(defaultChar + getDigits($input.val()));
});
$input.on('keyup', function(event) {
var $this = $(this);
var currentText = $this.val();
currentText = getDigits(currentText);
$this.val(defaultChar + currentText);
});
function getDigits(text) {
var digits = text.match(/[+-]?(\d*)/);
console.log("text = " + text);
console.log("digits = " + JSON.stringify(digits));
if(digits.length > 1) {
return digits[1];
} else {
return 'did not contain numbers';
}
}
HTML:
<select id="defaultChar">
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" id="input" value="" />
Here is the new fiddle
this is my php code:
if (($_SERVER["REQUEST_METHOD"] == "POST")&&(isset($_POST["btn_save"]))) {
$schoolsInput=$_POST['schoolsInput'];
echo $schoolsInput[0];
}
this is my jquery code:
<script type="text/javascript">
$(document).ready(function()
{
var counter=1;
var max_fields=5;
var add_button = $("#btn_addTxt");
var save_btn= $("#btn_save");
var wrapper= $("#prevSchoolTable");
$(add_button).click(function(e){
e.preventDefault();
if (counter == max_fields) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
$(wrapper).append('<tr><td><input type="text" name="schoolsInput' + counter + '" id="schoolsInput' + counter + '" class="textbox" style="width:400px;">'
+ '</td></tr>');
counter++;
}
});
var arrayFromPHP = <?php echo json_encode($schoolsInput); ?>;
$("#btn_save").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n " + $('#schoolsInput' + i).val();
}
alert(msg); \\array push must go here
});
});
</script>
I've search how can i access PHP variable and they say to use:
var obj = <?php echo json_encode($schoolsInput); ?>;
But everytime i put this on my jquery, the ADD function is not working.
any suggestion?
Database
$mySql = "SELECT field FROM fields";
$result = mysql_query($mySql);
Html:
<select id="combo1" class="combo" data-index="1">
<option></option>
<?php
while($r = mysql_fetch_array($result))
{
echo "<option value=" .$r['field '] . ">".$r['field '] ."</option>";
}
?>
</select>
<div id="combos"></div>
jQuery
<script type="text/javascript">
$('body').on('change', '.combo', function() {
var selectedValue = $(this).val();
if (selectedValue !== '' && $(this).find('option').size() > 8) {
var newComboBox = $(this).clone();
var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
var newComboBoxIndex = thisComboBoxIndex + 1;
$('.parentCombo' + thisComboBoxIndex).remove();
newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + newComboBoxIndex);
newComboBox.addClass('parentCombo' + thisComboBoxIndex);
newComboBox.find('option[val="' + selectedValue + '"]').remove();
$('#combos').append(newComboBox);
}
});
</script>
Questions:
This code is creating comboboxes with my database talble fields.
My problem is that fields cant be repeated when selected once.
Where is the error in the code? Or what am I thiking wrong?
It was supposed to be like that: http://jsfiddle.net/JaVVe/1/
The problem is you are checking size() > 8, so for it work there must be more than 8 options. Change that to size() > 2. Other than that your code will work.
The other problem is you aren't wrapping the option values in quotes. Add quotes:
echo "<option value=\"" .$r['field'] . "\">".$r['field'] ."</option>";
You also have a space after field:
$r['field ']
// ^ here, remove that
on site example is
<option val="Opt1">
In your html it's value attribute instead of val so you need to change
newComboBox.find('option[val="' + selectedValue + '"]').remove();
to
newComboBox.find('option[value="' + selectedValue + '"]').remove();
I would like to make a bus seating plan. I have seating plan chart using javascript function.I have two radio button named Bus_1 and Bus_2 queried from databases. When I clicked one of radio button, I would like to get available seats to show on the seating plan. Problem is I can't write how to carry radio value and to show database result on seating plan. Please help me.
<SCRIPT type="text/javascript">
$(function () {
var settings = { rowCssPrefix: 'row-', colCssPrefix: 'col-', seatWidth: 35, seatHeight: 35, seatCss: 'seat', selectedSeatCss: 'selectedSeat', selectingSeatCss: 'selectingSeat' };
var init = function (reservedSeat) {
var str = [], seatNo, className;
var shaSeat = [1,5,9,13,17,21,25,29,33,37,41,'#',2,6,10,14,18,22,26,30,34,38,42,'#','$','$','$','$','$','$','$','$','$','$',43,'#',3,7,11,15,19,23,27,31,35,39,44,'#',4,8,12,16,20,24,28,32,36,40,45];
var spr=0;
var spc=0;
for (i = 0; i<shaSeat.length; i++) {
if(shaSeat[i]=='#') {
spr++;
spc=0;
}
else if(shaSeat[i]=='$') {
spc++;
}
else {
seatNo = shaSeat[i];
className = settings.seatCss + ' ' + settings.rowCssPrefix + spr.toString() + ' ' + settings.colCssPrefix + spc.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) { className += ' ' + settings.selectedSeatCss; }
str.push('<li class="' + className + '"' +'style="top:' + (spr * settings.seatHeight).toString() + 'px;left:' + (spc * settings.seatWidth).toString() + 'px">' +'<a title="' + seatNo + '">' + seatNo + '</a>' +'</li>');
spc++;
}
}
$('#place').html(str.join(''));
}; //case I: Show from starting //init();
//Case II: If already booked
var bookedSeats = [2,3,4,5]; //**I don't know how to get query result in this array.This is problem for me **
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
// ---- kmh-----
var label = $('#busprice');
var sprice = label.attr('pi');
//---- kmh ----
// var sprice= $("form.ss pri");
if ($(this).hasClass(settings.selectedSeatCss)){ alert('This seat is already reserved'); }
else {
$(this).toggleClass(settings.selectingSeatCss);
//--- sha ---
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) { item = $(this).attr('title'); str.push(item); });
var selSeat = document.getElementById("selectedseat");
selSeat.value = str.join(',');
//var amount = document.getElementById("price");
// amount.value = sprice*str.length;
document.getElementById('price').innerHTML = sprice*str.length;
return true;
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () { // selected seat
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) { item = $(this).attr('title'); str.push(item); });
alert(str.join(','));
})
});
</SCRIPT>
You can use the onclick to tell AJAX to get your information and then what to do with it using jQuery.
<input type="radio" name="radio" onclick="ajaxFunction()" />
function ajaxFunction()
{
$.ajax({
type: "POST",
url: "you_script_page.php",
data: "post_data=posted",
success: function(data) {
//YOUR JQUERY HERE
}
});
}
Data is not needed if you are not passing any variables.
I use jQuery's .load() function to grab in an external php page, with the output from the database on it.
//In your jQuery on the main page (better example below):
$('#divtoloadinto').load('ajax.php?bus=1');
// in the ajax.php page
<?php
if($_GET['bus']==1){
// query database here
$sql = "SELECT * FROM bus_seats WHERE bus = 1";
$qry = mysql_query($sql);
while ($row = mysql_fetch_assoc($qry)) {
// output the results in a div with echo
echo $row['seat_name_field'].'<br />';
// NOTE: .load() takes this HTML and loads it into the other page's div.
}
}
Then, just create a jQuery call like this for each time each radio button is clicked.
$('#radio1').click(
if($('#radio1').is(':checked')){
$('#divtoloadinto').load('ajax.php?bus=1');
}
);
$('#radio2').click(
if($('#radio1').is(':checked')){
$('#divtoloadinto').load('ajax.php?bus=2');
}
);