Jquery question

[NotSoFast]

Ok, so it’s not CSS… but Chris piqued my interest in Javascript and Jquery so I had to give it a go.

I made a site which uses two vanilla JS functions to validate input and then some Jquery to show and hide divs, put rounded corners on them, serialize a couple of forms and POST them to PHP pages for processing.

It works great in Firefox, but IE just doesn’t want to play. It does (some of) the rounding, but nothing else. Has anyone else experienced this behaviour?

There are some other issues with the site (http://www.timetableconverter.site40.net if you really want to see how bad it is at present!) but I know I can solve those pretty easily, when I have some time to re-work the PHP.

Here’s the JS:

Code:

$(document).ready(function() {

//slideup the divs we don’t want initially
$(“#year”).hide();
$(“#holidays”).hide();
$(“#timetable”).hide();
$(“#datesResponse”).hide();
$(“#dateform”).hide();

//Add corners
$(“div.rounded”).corner();
$(“h1”).corner();
$(“.instructions”).corner();
//$(“img#main”).corner();
$(“#footer”).corner();
//$(“.footer”).corner();

//Create animations to slidedown and slideup divs
$(“a#toggleyear”).click(function() {
$(“#year”).slideDown();

//Process the year start and end

$(“#year_form”).submit(function(){
$(“#year”).slideUp();
$(“#dateform”).slideDown();
$(“#dateform”).html(‘‘);
$.post(“submit_year.php”, $(“#year_form”).serializeArray(), function(data){
$(“#dateform”).html(data);
$(“#dateform”).corner();
});
});

// Validate the week numbers

$(“.tt”).blur(function(){
return checkWeek(this.value);
});

//All the code below does the switching of colours and values in the buttons

$(“.tt”).click(function () {

switch (this.value) {

case ‘1’:
$(this).val(“2”);
$(this).css(“background-color”, “#CCCCCC”);
break;

case ‘2’:
$(this).val(“H”);
$(this).css(“background-color”, “#B8FEAC”);
break;

case ‘H’:
$(this).val(“1”);
$(this).css(“background-color”, “white”);
break;
}

});

//Serialize the dates array

$(“#dates”).submit(function(){

//Should probably validate here too

$(“#dateform”).hide();
$(“#timetable”).slideDown();
//$(“#datesResponse”).append(‘‘);
$.post(“submit_dates.php”, $(“#dates”).serializeArray(), function(data){
$(“#datesResponse”).html(data);
});

return false;
});

$(“.time”).blur(function(){
return checkTime(this.value);
});

//Serialize the timetable array

$(“#timetableform”).submit(function(){

//Should probably validate here too

$(“#timetable”).hide();
//$(“#csv”).html(‘‘);
$.post(“submit_timetable.php”, $(“#timetableform”).serializeArray(), function(data){
$(“#csv”).html(data);
$(“#csv”).corner();
$(“#csv”).css(“background-color”, “#A0E894”);
});

return false;
}); //End of timetable submit function

}); //End of yearform submit function

}); //End of document ready function

Any suggestions gratefully received – I freely admit I’m no expert with any of this. :D

[Author]

Posts