AJAX - Refresh Multiple div's at the same time.

[carrzkiss]

Hello All;

Example of this question.
http://ee.cffcs.com/test/dynamic.asp
code (ASP Classic / AJAX Code)
http://ee.cffcs.com/test/carrzkiss.zip

I need to do the following.
When you edit the Select menu ( --Create New Folder--)
This inserts a new record into the database (This is ASP Classic)
Now, this works, but what I need is to update ALL the Dynamic <div>
(The <div> are surrounding the <select> lists.) so that the newly entered record shows up across all the dynamic select list.

Is there a good source for accomplishing something like this?

Thank you
Carrzkiss

[djr33]

This is a general answer, but it'll help you get started:

An Ajax request loads a page, just like loading it in the browser, except that you load it to Javascript and the user doesn't see it (until you do something with the data).

Therefore you cannot do more than one at a time.

You can't load three separate things.

You can load a single page that has multiple parts, but this is complex because then you'll need to parse these into the three parts for each part of the page.

One way to do this would be to output the data as a Javascript array (output JS code text, including html within the JS data), and this is supported by some nice functions in PHP... I don't know about ASP. You could do it manually though if you'd like.

Alternatively you would need to use Javascript to split the content, perhaps at some sort of marker: 1. [content] 2. [content] 3. [content]
Split at 1. and 2. and 3., and then just display the data.



And finally the way to do "all three" "at [almost] the same time" is just to do three separate Ajax loads. This of course makes things get messy, but it's possible.
Create a new function like this:

function ajax3(one,two,three) {
    ajaxload(one);
    ajaxload(two);
    ajaxload(three);
}

And finally you could just load all three divs as a single section if your design allows for this: place all three into a single div then replace that whole parent div with the three child divs being replaced by whatever the content loaded by Ajax is. That is certainly easiest if it can work for your design.

[carrzkiss]

Hello Daniel.
I thank you for your reply, and has given me a few idea's, I just need the weekend to play around with them to see if I can manipulate them within the site.

The idea about the: function ajax3
This sound like something that "might" work for me, but considering that I am doing purely dynamic content, I do not know if 2 - 10 are going to be on the page.
Though I can do a count function within my SQL Select and check to see how many records exists and then create the ajax from their, but not sure how envolved that will be.

A lot of things to think about it.

I thank you once again for your information and knowledge and I will look into it all through-out the weekend.

Carrzkiss

[djr33]

If it's an unknown number, you can do a loop. Store the URLs (or other identifying values) in an array.

function ajaxloop(arrayurls) {
    for (i=0;i<scripts.length;i++) {
        ajaxload(arrayurls[i]);
    }
}

For each element in the array then it'll loop through and grab it.

[carrzkiss]

Very interesting.

I am not that experianced in AJAX (or) JavaScript to really understand how to do
What you are explaining here.
I understand the array, I understand the loop.
And I know that I need to add ajaxloop() somewhere, but that is about as far as I am knowledged.

Thanks for your Knowledge, it is mighty appreciated.

Wayne

[djr33]

Yes, and do realize these are just abstract examples. The only content of what I showed you is the loop and the function.

The rest is to implement it like you'd use anything else: instead of calling ajaxfunction() for a link, use ajaxloop(). Then inside ajaxloop() you will call ajaxfunction() for each instance you want to update.

Note that you'll probably also have to become somewhat familiar with arrays to do this. They're very useful, though, so it will not be a waste of time.

[carrzkiss]

Hello Daniel.
I have tried to do some research on ajaxloop() and was not able to find anything on it, except some post of ajax loop
But nothing explaining how it is done or how to implement it.

If you perhaps have an example of how to do it, that would be great.
If not, then could you please provide me with some links with information and hopefully examples so that I can try to figure this out on my own?

Thanks again Daniel
Wayne

[djr33]

Functions are just sets of stored operations. You can name them anything you'd like. In other words, you won't find anything about what I'm describing in a search because no one has ever written it (unless of course it's just by coincidence-- not that unlikely, so that's why you found some vague mention of something like it).

ajaxfunction() is my generic name for the function you're planning to use. It could also be called loadmypage() or dosomething(), or

ajaxloop() then is my function to loop through this operation several times. You can also name that myloop() or doloop() or whatever you'd like.


The idea is that you get this working without loading multiple pages, using a single function. (That's generally how Javascript works-- that's the easy part.)

Then once you're done with that you will create a function using this syntax:

function name([arguments]) {
///code to be executed
}

You probably don't need any arguments if you're always loading the same content on the page, so you can just skip that-- use name().

I chose ajaxloop() because it's descriptive (and it's also not reserved by some system function-- if you get a weird error it might be that you chose the same name as an existing function, so always be a bit creative). You could also use something like customfunction1(), but as a general rule it's good to use names you'll remember and are self explanatory. There aren't any rules about this, though. (Except in what characters you can use-- don't use spaces, start with lowercase letters and use numbers any time after the first character if you'd like. Underscores are ok too. Uppercase letters are irrelevant [equivalent to lowercase, not distinct], but I find it confusing/indirect.)

Hope this helps.

[carrzkiss]

Yes, I understand the function naming, just was not certain on rather there was an actual function out there that was or was not names ajaxloop().

So, basically, I need to do research and try to figure this one out on my own.
I do appreciate your information, though informative, but not enough to really go by.

Thank you for your time Daniel
Once I have the spare time to search for the information that is needed I will work on this, until then, it is going to have to set on on the back burner, as I have another project on the site that has taken priority over this one.

Take Care
Wayne

[carrzkiss]

Hello Daniel
I had forgotten all about this thread until I did a search for something unrelated and come across it.

For those that may need to do something like this in ASP Classic.
You can do something like this.

Depending on how many records you have show to the page, will depend on how many loads you will do.

Creating 2 recordsets from the same Select statement.
Should be something like this, of which is untested.

function ajax3(<%while not rs.eof%>one,two,three<%rs.movenext%><%wend%>) {
 <%while not rs1.eof%>
   ajaxload(one);
    ajaxload(two);
    ajaxload(three);
<%rs1.movenext%><%wend%>
}

<%
rs.close
rs1.close
%> 

Anyway, just thought that I would add this to the thread.

For other codes in Classic ASP and .NET, visit
http://www.cffcs.com
Wayne