I have the following function called HowTo that is executed with a onclick event, a function within it requires the JQuery plugin jquery.cookie which is: "A simple, lightweight jQuery plugin for reading, writing and deleting cookies." :
function HowTo(){
$largeAmountOfHTML = document.getElementById("element").innerHTML;
$.cookie("nameOfCookie", $largeAmountOfHTML);
$.ajax({
type: "GET",
url: "path/to/serverside/script.php",
async:false,
});
window.location.href='anotherPage.php';
};
The function firstly retrieves a substantial amount of HTML and assigns it to the variable $largeAmountOfHTML. Then using the JQuery function $.cookie() declared in jquery.cookie's library the function saves the value of $largeAmountOfHTML to the cookie nameOfCookie. Then the function makes an AJAX call that executes a serverside php script which retrieve the cookie data and saves the content to a MYSQL database. Once complete the function directs the current window to anotherPage.php.
The function runs smoothly with no console errors declared. However, when $largeAmountOfHTML reaches a certain size jquery.cookie cannot assign the cookie fast enough before the serverside script attempts to retrieve it. jquery.cookie does not list any methods I can use to prevent this from happening.
Once $largeAmountOfHTML is large enough and cannot be saved to the cookie in time the severside script declares the this error:
<br />
<b>Notice</b>: Undefined index: nameOfCookie in <b>localhost/path/to/serverside/script.php</b> on line <b>4</b><br />
What is the best way to get around this?