I'm using javascript and php to set and get cookies across pages. I have a script that puts a value in a cookie variable on one page and I would like to retrieve it on another page. Let's say that my first page is called page1.html. In page1 I use a script to store a cookie value like this:
<Script>
$(function () {
$("#country-selector").change(function(){
$.cookie("Ron","Happy Birthday");
});
});
</script>
...now let's say that I have a page called page2.php. In page2.php I have an include statement that loads page1.html like this:
include('page1.html');
Note: Page1.html does one thing only... it has a dropdown list of countries. If I point my browser directly to page1.html and select a country, the cookie variable is set. However, I if use the dropdown list via page2.php, the cookie variable is not set. I check the cookie list in my browser settings to varify.
What is preventing the script from running if it's being used in an include statement from another page?
UPDATED FOR CLARITY:
Page1.php:
<!DOCTYPE html>
<html>
<head>
<?php session_start();?>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.select-to-autocomplete.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
<select class="myList" name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Select Country</option>
<option value="Afghanistan" data-alternative-spellings="AF افغانستان">Afghanistan</option>
</select>
<Script>
$(function () {
$("#country-selector").change(function(){
$.cookie("Marry","Upside Down");
});
});
</script>
</body>
</html>
Page2.php
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.select-to-autocomplete.js"></script>
<script type="text/javascript" </script>
<script src="jquery.cookie.js"></script>
</head>
<body>
<?php include ("page1.php"); ?>
</body>
</html>