Adding Javascript to WP from old site

(@geothom)

Cool! Thank Jan.

Thread Starter

(@geothom)

Back again!! I created the ‘functions.php’ file in the root of the child theme folder as directed. I copied your first code piece and put the PHP tags but maybe did not get them in the correct place:

<?php
function mainScripts() {
  wp_enqueue_script( 'datepicker', get_stylesheet_directory_uri() . '/js/datepicker.js', '', '1.0', true );

}

add_action( 'wp_enqueue_scripts', 'mainScripts' );
?>

Anyway, when I preview the page I get a mix of code and partly formatted areas but the datepickers do not show (just like an outline) and the first column is all messed up. Since typing the above I have added most of the functions to the ‘functions.php’ file but with little/no change.
Below is extract of code on the page:

<link href="css/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="datetimepicker.js"></script>

<!--sa error trapping-->
<!--sa nivo slider-->
 
<!--sa calendar-->
<script type="ext/javascript" src="js/datepicker.js"></script>
<link href="css/datepicker.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">//
<![CDATA[
function makeTwoChars(inp) {
        return String(inp).length < 2 ? "0" + inp : inp;
}

function initialiseInputs() {
        // Clear any old values from the inputs (that might be cached by the browser after a page reload)
        document.getElementById("sd").value = "";
        document.getElementById("ed").value = "";

        // Add the onchange event handler to the start date input
        datePickerController.addEvent(document.getElementById("sd"), "change", setReservationDates);

What am I missing?

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Are you getting anything instructive of what’s happening in your browser’s console? I would assume your JS files cannot be found.

Thread Starter

(@geothom)

No – nothing. Page loads, no errors, just not right. I will give up soon for tonight as it is late and will try a cut-down version with only the date-pickers (if I can figure out the correct code to extract) tomorrow. Thanks again for your time and advice.

Thread Starter

(@geothom)

OK I’m back. Tried using code from ‘index.php which is basically a page displaying only a frame with two datepickers plus one drop-down list. I am completely stuck here as I really don’t understand how WP sequences things and I have also read that depending on where you are calling javascript, the path should be different. Sorry if this is not the ‘done thing’ but below is all the code I copied (with a few mods to delete unwanted text). I have tried changing the path referencing the javascript but makes no difference. I feel I am missing something very basic here.
The page loads with the frame but the datepickers are not showing nor are their labels. Please can someone assist and get me in the right direction.
My site structure is:
Root
~
js
scripts
wp-content
themes
customizr
~
functions.php
header.php
style.css
customizr-child-01
css
js
lib
scripts
src
functions.php
style.css
Extract from the ‘functions.php’ file in child theme

<?php
function mainScripts() {
  wp_enqueue_script( 'datepicker', get_stylesheet_directory_uri() . '/js/datepicker.js', '', '1.0', true );
  wp_enqueue_script( 'view_calendar', get_stylesheet_directory_uri() . '/js/datepicker.js', '', '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'mainScripts' );
?>

Code copied from index.php on old site:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="/wp-content/themes/customizr-child-01/css/styles.css" rel="stylesheet" type="text/css" /> <!--sa nivo slider-->
<!--sa calendar-->
<script type="text/javascript" src="js/datepicker.js"></script>	<link href="/wp-content/themes/customizr-child-01/css/datepicker.css" rel="stylesheet" type="text/css" /><script type="text/javascript">// <![CDATA[
function makeTwoChars(inp) {
        return String(inp).length < 2 ? "0" + inp : inp;
}

function initialiseInputs() {
        // Clear any old values from the inputs (that might be cached by the browser after a page reload)
echo "TEST"
        document.getElementById("sd").value = "";
        document.getElementById("ed").value = "";

        // Add the onchange event handler to the start date input
        datePickerController.addEvent(document.getElementById("sd"), "change", setReservationDates);
}

var initAttempts = 0;

function setReservationDates(e) {
        // Internet Explorer will not have created the datePickers yet so we poll the datePickerController Object using a setTimeout
        // until they become available (a maximum of ten times in case something has gone horribly wrong)

        try {
                var sd = datePickerController.getDatePicker("sd");
                var ed = datePickerController.getDatePicker("ed");
        } catch (err) {
                if(initAttempts++ < 10) setTimeout("setReservationDates()", 50);
                return;
        }

        // Check the value of the input is a date of the correct format
        var dt = datePickerController.dateFormat(this.value, sd.format.charAt(0) == "m");

        // If the input's value cannot be parsed as a valid date then return
        if(dt == 0) return;

        // At this stage we have a valid YYYYMMDD date

        // Grab the value set within the endDate input and parse it using the dateFormat method
        // N.B: The second parameter to the dateFormat function, if TRUE, tells the function to favour the m-d-y date format
        var edv = datePickerController.dateFormat(document.getElementById("ed").value, ed.format.charAt(0) == "m");

        // Set the low range of the second datePicker to be the date parsed from the first
        ed.setRangeLow( dt );

        // If theres a value already present within the end date input and it's smaller than the start date
        // then clear the end date value
        if(edv < dt) {                 document.getElementById("ed").value = "";         } } function removeInputEvents() {         // Remove the onchange event handler set within the function initialiseInputs         datePickerController.removeEvent(document.getElementById("sd"), "change", setReservationDates); } datePickerController.addEvent(window, 'load', initialiseInputs); datePickerController.addEvent(window, 'unload', removeInputEvents);
// ]]></script>
<script type="text/javascript">// <![CDATA[
var stay_flag = true; 	window.onbeforeunload = function (e) { 	  if (stay_flag){ 	  var message = "Do you want to continue on reservation?", 	  e = e || window.event; 	  // For IE and Firefox 	  if (e) { 		e.returnValue = message; 	  } 	  // For Safari 	  return message; 	} 	};
// ]]></script>
<!--sa error trapping-->
<script type="text/javascript">// <![CDATA[
function validateForm() { var x=document.forms["index"]["start"].value; if (x==null || x=="")   {   alert("you must enter your check in Date(click the calendar icon)");   return false;   } var y=document.forms["index"]["end"].value; if (y==null || y=="")   {   alert("you must enter your check out Date(click the calendar icon)");   return false;   } var childrenNum = document.forms["index"]["child"].value; if (!(IsNumeric(childrenNum))){ 	alert("Please enter a numeric value"); 	return false; } stay_flag = false; } function IsNumeric(input) { 	return (input - 0) == input && input.length > 0;
}
// ]]></script>
<!--end sa nivo slider-->

<style type="text/css"><!--

--></style><!--sa poip up
	<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />

<script src="lib/jquery.js" type="text/javascript"></script>
  <script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'src/loading.gif',
        closeImage   : 'src/closelabel.png'
      })
    })
  </script>

-->
<!--?php <br ?--> if (isset($_SESSION['date_started']))
{
// echo "has value";
// echo $_SESSION['date_started'];
}
else
{
// echo "

no value

";
}
?>
<!-- TOP -->
<div id="top1"></div>
<div id="top"><!-- HEADER --></div>
 
<div id="header">
<div id="formPan">
<h2 class="style2" style="text-align: center;">Check Availability</h2>
<form action="selectroom.php" method="post" name="index" onsubmit="return validateForm()">
<div style="margin: 15px 10px; padding: 10px 10px; border: 1px solid #fff;">
<table border="0">
<tbody>
<tr>
<td>
<div align="right"><label>Check-in Date : </label></div></td>
<td width="110"><input class="w8em format-d-m-y highlight-days-67 range-low-today" id="sd" style="height: 25px;" type="text" maxlength="10" name="start" readonly="readonly" value="" /></td>
</tr>
<tr>
<td>
<div align="right"><label>Check-out Date : </label></div></td>
<td><input class="w8em format-d-m-y highlight-days-67 range-low-today" id="ed" style="height: 25px;" type="text" maxlength="10" name="end" readonly="readonly" value="" /></td>
</tr>
<tr>
<td>
<div align="right"><label>Adults : </label></div></td>
<td><select class="ed" name="adult"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option></select></td>
</tr>
<tr>
<td colspan="2">
<div style="color: #fff;" align="right"><i>Adult = Persons 6yrs and older</i></div></td>
</tr>
<tr>
<td>
<div align="right">
<div align="right"><label>Children : </label></div>
</div></td>
<td><input class="ed" id="child" style="width: 40px; padding: 5px 5px;" type="text" name="child" value="0" /></td>
</tr>
<tr>
<td colspan="2"><input id="button1" type="submit" name="Input" value="Next" /></td>
</tr>
</tbody>
</table>
</div>
</form></div>
</div>
<!-- FOOTER -->
<div id="footer">

<img alt="" src="images/call.jpg" width="156" height="37" />
<p style="text-align: right;"><a href="http://www.poncesuites.net/index.html">HOME</a> |<a href="http://www.poncesuites.net/about.htm"> ABOUT US </a>|<a href="http://www.poncesuites.net/contact.htm"> CONTACTS </a>|<a href="http://www.poncesuites.net/gallery.htm"> GALLERY </a>|<a href="http://www.poncesuites.net/roomrates_3.htm"> ROOM RATES </a></p>

</div>
<!-- BOTTOM -->
<div id="bottom"></div>
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script><script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">// <![CDATA[
$(window).load(function() { 	$('#slider').nivoSlider(); });
// ]]></script>

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Can the JS files be found on your page, are they loaded?

Thread Starter

(@geothom)

Hi Andrew. Excuse the ignorance but how can I tell?

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Open your website in Google Chrome, right click anywhere on the page and select “Inspect element”.

Then switch to the “Console” tab and see if anything is shown.

Thread Starter

(@geothom)

Ok thanks. Have seen that done but did not cross my mind!

Now I have some clues. Can you throw light on the Invalid CSS property names and the path error for language (bottom extract below.
Any general ‘hints’ will be appreciated. Meantime I will look at the js paths.
Extract from console:

shouldShowTB file Not Exist - default action show Toolbar
DOMException
 compatibility.start.js:16
chrome.tabs is not available: You do not have permission to access this API. Ensure that the required permission or manifest property is included in your manifest.json. binding:431
Invalid CSS property name: -webkit-text-size-adjust blue.css:80
Invalid CSS property name: transform blue.css:5764
Invalid CSS property value: transform 3s ease blue.css:6081
Invalid CSS property name: transform blue.css:6087
Invalid CSS property value: linear-gradient(top, #f4f4f4, #e6e6e6) blue.css:6129
Invalid CSS property name: transform blue.css:8901
Failed to load resource chrome-extension://jgaanchmbkbjjjclkdlcjhhipijhndil/tb/al/state.html
Invalid CSS property value: 0x styles.css:20
Invalid CSS property declaration at: 4px styles.css:197
Invalid CSS property declaration at: 4px styles.css:198
Invalid CSS property declaration at: 4px styles.css:199
Invalid CSS property declaration at: ; styles.css:233
Invalid CSS property value: nonne styles.css:608
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.poncesuiteshotel.com/check-availability/js/datepicker.js
Uncaught SyntaxError: Unexpected token < www.poncesuiteshotel.com/check-availability/:356
Uncaught SyntaxError: Unexpected end of input www.poncesuiteshotel.com/check-availability/:392
Uncaught SyntaxError: Unexpected token ILLEGAL www.poncesuiteshotel.com/check-availability/:395
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.poncesuiteshotel.com/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/en.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.poncesuiteshotel.com/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/lang/en.js

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.poncesuiteshotel.com/check-availability/js/datepicker.js

To clarify, you are using this code specifically to enqueue the datepicker js (?):

wp_enqueue_script( 'datepicker', get_stylesheet_directory_uri() . '/js/datepicker.js', '', '1.0', true );

Thread Starter

(@geothom)

To clarify – yes. So the path in the enqueue ‘/….’ needs changed to point to the js folder in the child theme folder.

Thread Starter

(@geothom)

Posted b4 I was finished. I will pursue some mods and see how far I get but will be tomorrow now. Thanks yet again for dedicating some of your precious time to this. Come over to the hotel and I’ll shout you a beer (or three)

Thread Starter

(@geothom)