jQuery clash of scripts? - Urgent Help Needed

I am somewhat of a novice when it comes to jQuery and this wall I have hit is proving to be a real headache.

What I am trying to do definitely seems possible, at least in my head it does - I'll try explaining it as precisely as I can.

I have 2 files/pages; "index.php" and "test.php".

"index.php" contains two specific divs that are automatically updated using the following script:

$(document).ready(function(){
        setInterval(function() {
            $(".talk").load("chat.php");
        }, 20);
    });

Code (JavaScript):

One of the div's is a chat box, as you may be able to tell from the load() - this seems to be working for now. The second div is where the problem is; it is loading "test.php" into it successfully.

"test.php" also has a jQuery function to memorize selected checkboxes after a refresh, I have used the following code to achieve this:

<script>
// This function reads the cookie and checks/unchecks all elements
// that have been stored inside. It will NOT mess with checkboxes
// whose state has not yet been recorded at all.
function restorePersistedCheckBoxes() {
    var aStatus = getPersistedCheckStatus();
    for(var i = 0; i < aStatus.length; i++) {
        var aPair = aStatus[i].split(':');
        var el = document.getElementById(aPair[0]);
        if(el) {
            el.checked = aPair[1] == '1';
        }
    }
}

// This function takes as input an input type="checkbox" element and
// stores its check state in the persistence cookie. It is smart
// enough to add or replace the state as appropriate, and not affect
// the stored state of other checkboxes.   
function persistCheckBox(el) {
    var found = false;
    var currentStateFragment = el.id + ':' + (el.checked ? '1' : '0');
    var aStatus = getPersistedCheckStatus();
    for(var i = 0; i < aStatus.length; i++) {
        var aPair = aStatus[i].split(':');
        if(aPair[0] == el.id) {
            // State for this checkbox was already present; replace it
            aStatus[i] = currentStateFragment;
            found = true;
            break;
        }
    }
    if(!found) {
        // State for this checkbox wasn't present; add it
        aStatus.push(currentStateFragment);
    }
    // Now that the array has our info stored, persist it
    setPersistedCheckStatus(aStatus);
}

// This function simply returns the checkbox persistence status as
// an array of strings. "Hides" the fact that the data is stored
// in a cookie.
function getPersistedCheckStatus() {
    var stored = getPersistenceCookie();
    return stored.split(',');
}

// This function stores an array of strings that represents the
// checkbox persistence status. "Hides" the fact that the data is stored
// in a cookie.
function setPersistedCheckStatus(aStatus) {
    setPersistenceCookie(aStatus.join(','));
}

// Retrieve the value of the persistence cookie.
function getPersistenceCookie()
{
  // cookies are separated by semicolons
  var aCookie = document.cookie.split('; ');
  for (var i=0; i < aCookie.length; i++)
  {
    // a name/value pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split('=');
    if ('JS_PERSISTENCE_COOKIE' == aCrumb[0])
      return unescape(aCrumb[1]);
  }
  return ''; // cookie does not exist
}

// Sets the value of the persistence cookie.
// Does not affect other cookies that may be present.
function setPersistenceCookie(sValue) {
    document.cookie = 'JS_PERSISTENCE_COOKIE=' + escape(sValue);
}

// Removes the persistence cookie.
function clearPersistenceCookie() {
    document.cookie = 'JS_PERSISTENCE_COOKIE=' +
                      ';expires=Fri, 31 Dec 1999 23:59:59 GMT;';
}
    </script>

Code (JavaScript):

The issue is that when "test.php" is accessed as a full webpage, It memorizes the state of the checkboxes after a refresh. However, after it's been loaded into the second div on "index.php" it clears any selected checkboxes each time the div is refreshed.

is there a fix or way-around to allow load() to work efficiently with the script memorizing the state of the checkboxes?

Any help will be greatly appreciated.

 

You don't mix javascript and php - you pull the content of the php file (or any other file) into index.php, and you put the javascript in the index.php (preferably via a loaded .js-file containing the javascript). That should work, depending on how you load whatever - if the content of test.php is a form of some sort (since it's checkboxes, it should be), you could just do a post-statement (ajax) and keep the state.

 

Thank you for the reply, it would make sense to use a .js file, so I will look into doing such.

test.php is not a form of such, it is and it isn't at the same time. The file pulls the contents from a .txt file which has several lines, and displays them in order (with a relevant checkbox next to each line). The idea is to allow a user to review each line in real-time (hence the load().) but at the same time, the user has the option to select several lines (hence the memorization of checkbox state). There will be an array of buttons for the user to select from, which will be separate from these lines I hope this somewhat clears the air on what I'm trying to accomplish; I've uploaded an image for visual understanding.

Performing a POST would not work as a button would need to be selected each time a checkbox is selected, right?

 

Nah - you could have the state update on each checkbox selected.
However, I'm a bit confused about the text file - is this a dynamically created / updated file, which can update separately from the page? Ie, will the information pulled change while the user is looking at it?

 

How would I go about doing that?

& no, the .txt file will be uploaded by a user and once uploaded, it can't be changed - unless they upload a completely new .txt file which will use the same page aforementioned but a different $_GET. If that makes any sense to you?

Thanks for your replies and patience PoPSiCLe, I really appreciate it.

 

Well, if the content of the text file itself doesn't change, then I would've pulled the information from it via a separate php-file, and called the contents via an ajax-call - I'm still not entirely sure about the purpose - is the user able to select certain lines and store them somewhere, or use the content of those lines for other purposes, or delete them, or...? The point being, if you do it via an AJAX-call, you could make this into a proper form, and have the lines show up just as you do now, for that purpose - when selected, the state could be stored in a database for instance, which could have a table with a row for each text-file and then a boolean value for checked/unchecked - however, that might be unwieldy if the text-files can be extremely large.

The remembering of checkboxes would just be a check for whether or not a given checkbox is, in fact, checked (on click), and storing the value in the database - via an ajax-call, again (this would be an added function - the user would still be able to use the buttons to store the current state, looping through the checkboxes etc.).

 

So effectively, it'd be something like so: .txt file > .php file > another .php file but with an ajax call?

The purpose is that once the user has selected the lines they wish to select, they're then able to attach a comment, highlight or approve those lines. To do that, once a button is clicked, the number of each line will be placed into a table on the database relevant to whichever button was clicked.

The state of each checkbox must be memorized prior to a button being clicked.

 

Well - the ajax call will be put into whatever file you run javascript from - either the index.php or an external .js-file.
There's no reason there should be more than one php-file handling the txt-file parsing, but if you want, you can of course create one for fetching and delivering the content of the file, and one for updating the database - but that could be the same file, if you wanted.
So you'd have it like this:
index.php (or whatever file you're running the fetching from)
javascript
ajax-call to whatever php-file running in the background, to fetch the content of the txt-file
(this could also be done directly in php, by fetching a given txt-file (as you said, based on a $_GET-parameter) and then with the content put into a form (each line as a label, for instance, with a checkbox next to it, or before it)
another ajax-call to a updating php-file to check/uncheck checkmarks for the checkboxes and store this somehow - you could do this by storing the checked-status in the database, or just adding it to the current session (but that won't keep the state between sessions / logins)