1
farshid
an ajax aproach in theme
  • 2007/2/27 11:56

  • farshid

  • Just popping in

  • Posts: 34

  • Since: 2004/11/9


Hi;

I have done some modifications to the default theme (xoops1.0.16) to make urls load via rico. this should work for any theme.
this work is not done yet completely, but if you are interested on the matter you can test it. I am wondering if we can work on this and make it work better.

you can download a ready theme pack called "defaultaj" from: http://www.fanafzar.com/uploads/defaultaj.rar it is about 440K just unpack it in your theme folder.
NOTICE: as I said many links may not work properly this is just an idea.

If you need more details you can continue to read else you can test the file you downloaded above;

How to:
To do this you need to have rico files, you can download at:
http://www.openrico.org you can also download them from this url: http://www.fanafzar.com/uploads/Rico.rar

put the Rico folder in your theme folder, now you need to link these scripts in your theme:

<script type="text/javascript" src="<{$xoops_imageurl}>Rico/prototype.js"></script>
<
script type="text/javascript" src="<{$xoops_imageurl}>Rico/rico.js"></script>


now we need a little more javascript, add the following code just after the above lines in your theme.html file:
<script language="javascript">
function 
sanitizeATags(){
    
atags document.getElementsByTagName('a');
    for(var 
0atags.lengthi++){
        if((
atags[i].href != '') && (atags[i].href.indexOf('<{$xoops_url}>') == 0)){
            
onClickAttribut document.createAttribute("onClick");
            
onClickAttribut.nodeValue "getPage('"+atags[i].href+"');";
            
atags[i].setAttributeNode(onClickAttribut);
            
atags[i].href "javascript:void(0);";
        }
    }
}
var 
page_obj = Class.create();
page_obj.attributes = [ "url""title""content" ];
page_obj.prototype = {
   
initialize: function() {
   },
   
ajaxUpdate: function(ajaxResponse) {
      
this.placePage(ajaxResponse.childNodes);
   },
   
placePage: function(page_responce) {
         var 
pageHolder '';
        
//pageHolder += page_responce[0].getAttribute('url') + " - " + page_responce[0].getAttribute('title') + " - " + page_responce[0].childNodes[0].childNodes[0].nodeValue;
        
pageHolder += page_responce[0].childNodes[0].childNodes[0].nodeValue;
        
document.getElementById('ajax_content').innerHTML pageHolder;
        
sanitizeATags();
   }
};
var 
page_obj;
function 
registerAjaxPage(url) {
    
ajaxEngine.registerRequest'getPage'url );
    
ajaxEngine.registerAjaxObject'page', new page_obj() );
}
function 
getPage(url) {
    
registerAjaxPage(url);
    
ajaxEngine.sendRequest'getPage'"ajaxpage=1" );
}
</
script>



ok lets call sanitizeATags() function to make our Rico enabled links, to do this just replace:
<body>
with:
<body onLoad="sanitizeATags();">

in order to have a unique element to deal with lets add an extra div element for this just replace:
<div id="content">
  <{
$xoops_contents}>
</
div>

with:
<div id="content">
  <
div id="ajax_content">
    <{
$xoops_contents}>
  </
div>
</
div>



and finally we need some php code in our theme. we do this by adding 2 parts, one at the beginning of the theme.html file and one small part at the end of it. the code to add at the beginning (just before: <!DOCTYPE html PUBLIC ...) is:
if(isset($_GET['ajaxpage'])){
    
header("Content-type: text/xml; charset=UTF-8");
    echo 
'<?xml version="1.0" encoding="utf-8"?>';
    if(isset(
$_GET['blocks'])){
        <{/
php}><ajax-response>
        <
response type="object" id="blocks">
        <{
php}>
        
$sid 1;
        
$title "title";
        
$content "Block Content!!";
        echo 
"<block sid='".$sid."' title='<".$title."' content='".$content."' />";
        <{/
php}>
        </
response>
        </
ajax-response><{php}>
    }else{
        echo 
'<ajax-response>';
        echo 
'<response type="object" id="page">';
        
$url "page url";
        
$title $this->_tpl_vars['xoops_sitename'] . ' - ' $this->_tpl_vars['xoops_pagetitle'];
        echo 
'<page url="'.$url.'" title="'.$title.'">';
        echo 
'<content>';
        echo 
'<![CDATA['.$this->_tpl_vars['xoops_module_header'].$this->_tpl_vars['xoops_contents'].']]>';
        echo 
'</content>';
        echo 
'</page>';
        echo 
'</response>';
        echo 
'</ajax-response>';
    }
}else{
<{/
php}>


and at the end of theme.html file (just after </html>):
<{php}>
}
<{/
php}>


and that’s all, empty templates_c folder, and turn off debug mode, and make a test. I am waiting for your feed back.

So What:
xoops is a great system.

2
Chappy
Re: an ajax aproach in theme
  • 2007/2/27 13:16

  • Chappy

  • Friend of XOOPS

  • Posts: 456

  • Since: 2002/12/14


This looks really cool. How much does it add to a site's load time overhead? The idea is, as I said, really neat!
MMM...It tastes like chicken! ...

3
farshid
Re: an ajax aproach in theme
  • 2007/2/27 14:02

  • farshid

  • Just popping in

  • Posts: 34

  • Since: 2004/11/9


well, nice tip; I haven't tested it yet, but in theory:

1- server process may not change cause I think when XOOPS attempts to set theme variables, it has already done all the process to make the final file and variables are ready, so although in this code we do not send block and theme variables they are all loaded by the server. (correct me if I am wrong)

2- the bandwidth may save much as theme images an styles and scripts are not loaded in each request. (well this is the Ajax advantage!!)

And I am working on changing the blocks too, as when you navigate to another page that has different blocks some Ajax response would be sent to get new blocks and replace them if any changes. the step after that would be adding Rico drop zone and drag and drop facilities. and some special form elements, some that will generate on the fly by javascript to make for example forms act in Ajax environment, and some to be used in modules (modules that will be developed for this purpose in the future maybe).

I think after doing these then there will be a great difference in the performance (still in the bandwidth).
any ideas?

4
irmtfan
Re: an ajax aproach in theme
  • 2007/2/28 4:42

  • irmtfan

  • Module Developer

  • Posts: 3419

  • Since: 2003/12/7


thank you
its very needed for future of XOOPS themes

5
farshid
Re: an ajax aproach in theme
  • 2007/2/28 6:55

  • farshid

  • Just popping in

  • Posts: 34

  • Since: 2004/11/9


Thanks,

I just wanted to mention that this theme right now have some serious problems with explorer, if you want to test it use Firefox, I will make it work with ie as soon as possible.

Another good thing about this is that we have the site in both styles: Ajax version and html version, search engines will see the html version while user may browse both Ajax and html, I am thinking of some switch between Ajax and html versions.

Any ideas?

6
farshid
Re: an ajax aproach in theme
  • 2007/3/3 15:43

  • farshid

  • Just popping in

  • Posts: 34

  • Since: 2004/11/9


I have made some changes to some files, now we can submit most forms Ajaxy! both post and get methods are working, there is some bugs with input file type in a form.

I have made a small test site here: http://www.fanafzar.com/xoops/ to show you the functionality of this kind of themes. I will put the files for all to download and test on other themes as soon as possible.

and don't forget only fire fox is working now!!

enjoy.

7
Lance_
Re: an ajax aproach in theme
  • 2007/3/3 16:26

  • Lance_

  • Home away from home

  • Posts: 983

  • Since: 2004/1/12


Just checked out the test site.

Love it. Really impressive.

Cheers.
GDL-Web.com :: Website development.
Xoopslance.com::Freelancing and Projects
thelionsden-arena.net:: Clan/League/Ladder Hosting

8
highlander
Re: an ajax aproach in theme
  • 2007/3/3 20:37

  • highlander

  • Not too shy to talk

  • Posts: 151

  • Since: 2004/12/5


Hello Farshid,

Your demo site (proof of concept) is really impressive.
I will check it out regularly to see how far you can get this idea going.

Keep up the good work !

Highlander
So, I'm in the park wondering why frisbees get larger as they get closer when suddenly, it hits me...
www.AnimalPedigree.com

9
sinablack
Re: an ajax aproach in theme
  • 2007/3/3 20:56

  • sinablack

  • Just popping in

  • Posts: 41

  • Since: 2007/1/12


Quote:

farshid wrote:
I have made some changes to some files, now we can submit most forms Ajaxy! both post and get methods are working, there is some bugs with input file type in a form.

I have made a small test site here: http://www.fanafzar.com/xoops/ to show you the functionality of this kind of themes. I will put the files for all to download and test on other themes as soon as possible.

and don't forget only fire fox is working now!!

enjoy.

you know dear farshid, it was really coooooooool
i enjoyed it myself.
by the way does some body have any idea about a website witch can give us some of those ajax codes????
thank you all.
@ irmtfan:
dear irmtfan as you are supporting the XOOPS development in persian you have better to know that these changes are also useful to xoops2.0.16 and it could not just be used for XOOPS 2.3 we shall think on both side ,either now and future.
Soon we must all face the choose between what is good to US and what is the truth!!!
300 the movie

10
kris_fr
Re: an ajax aproach in theme
  • 2007/3/3 21:27

  • kris_fr

  • Theme Designer

  • Posts: 1009

  • Since: 2005/12/31


nice

but read this topics, in my package "jseffects" you have "rico" also

A +

Login

Who's Online

67 user(s) are online (46 user(s) are browsing Support Forums)


Members: 0


Guests: 67


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Jul 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits