Write content with AJAX

[bondo]

Hey everyone.

I am working on adding a 'search' field to a page and I'm using ajax to update the content of the page. When someone types a letter into the search box, the page content updates based on what they type. I have this all working as far as the Ajax & updating and whatever goes, but my problem is that I need to be able to get info based on what is displayed.

The content that get's updated is a list of checkboxes and descriptions. I need to be able to record which checkboxes have been checked/unchecked. I can get the ajax part working and I can get the recording of the checkboxes working, but not together. When the page content updates, it doesn't actually get written to the page, so there aren't any checkbox elements for me to examine.

So really what my question is is does anyone know of a way to replace content between two tags with javascript so that I can have my list of checkboxes to look through? OR does someone know a better way to do what I'm trying to do that doesn't require writing to the page?

Thanks

[~s.o.s~]

From what I understand, your web page has a text field which allows the user to enter his search criteria. Based on the user input, a new set of check boxes are fetched from the server but before doing that, you need to persist the state of the check boxes currently visible to the user. Is your requirement the recording of the state of the check boxes before the new content replaces them?

If yes, then you can make two async requests; one which serializes the state of the form [the one containing the check boxes] and sends it to the server and another which fetches the new content based on the search criteria. You can even glue together both the parts by sending both the serialized form state and the search criteria in the same request.

If it's something else, you need to be a bit more explicit with some pseudo code or illustrations.

[bondo]

No, I only have to record any changes to the checkboxes made after the search is completed, and actually the recording of the state of the checkboxes does not need to happen when a change is made. The way the form worked before is that a huge list (150+ checkbox items) shown. Users could then check/uncheck whatever they wanted and then they would click a save button at the bottom of the page. Obviously showing 150+ options to someone is a bit silly, nobody want's to read all that.

The form should work like so:

onpageload:
   show all checkboxes

on textfield keyup:
   repopulate list of checkboxes based on typed text

on savebutton click:
   record any currently checked checkboxes

The way it works currently is that everything on the page is POSTed to another page and info is recorded to our DB. The checkboxes are generated based on the current info in the DB for the checkboxes, so the number of checkboxes can change if anything is added/removed. Since all of the checkboxes have the same ID, I just grab the value of that ID and it gives me any boxes that were checked and records them. The checked boxes are saved in one field in the DB, comma separated.

I realize now as I'm typing this that I can't do it that way anymore because any previously recorded checkboxes will be overwritten if they weren't part of the new list of checkboxes, but weren't unchecked... Hmm, I see a whole new issue now.

After thinking about this a bit I think I misunderstood what you meant about recording the state of the form before new content replaces it. Initially the whole list will be shown and anything that was previously checked will show up as checked. When the list is replaces with new content based on the search, then yes, anything checked should be recorded. On the new list of things, anything checked on there should be recorded as well, but previously recorded checked boxes should stay recorded.

I know this kinda went all over the place, lol, but I have a bunch of ideas now for things to try. I appreciate any additional comments you have though. Thanks for your reply, you got me thinking about this in a different way.

[~s.o.s~]

> Since all of the checkboxes have the same ID

You would be violating the specification if you had more than one HTML element with the same value of ID attribute. There are better/valid ways of identifying or a grouping together form elements. Read this.

And since you have asked for additional comments, regarding CSV's, any database design which requires the application logic to slash and hack the retrieved data is broken IMO. Also, I would assign a unique name to each check box and each check box would have one of the two class names: checked and unchecked; this would facilitate easier processing via JavaScript and application of style sheets.

[bondo]

The whole system is pretty broken, IMO. It's not my design, it's just what I'm forced to work with, lol. I named all the checkboxes the same, but with different values, so that I could retrieve them through that one name in my page request and by doing so, all the array gives me is the values of the boxes that are checked.

I wound up just using a stupid table and showing and hiding rows to get it to do what it needed to do. I was getting bugged to get it working, so I just went with the slower, stupider way, but whatever. Blah. I'll go back and fix it right when I get time. There's really a lot of stuff about the whole system I'd like to change, if it were up to me.

Thanks for your help!