1
luciorota
Are Xoops form classes ajax friendly?
  • 2013/5/11 20:41

  • luciorota

  • Module Developer

  • Posts: 212

  • Since: 2007/4/20


In my opinion NO... too much html and javascript code mix
It will be useful to use jquery and to separate html from javascript code...
are there some tricks?


2
irmtfan
Re: Are Xoops form classes ajax friendly?
  • 2013/5/12 4:32

  • irmtfan

  • Module Developer

  • Posts: 3419

  • Since: 2003/12/7


In 2.5.6 XoopsForm ajax is not using at all.
Even there are many limitations for module developers in xoops.js and Xoopsform classes.
Quote:

are there some tricks?

I am very basic in js and didnt know JQuery at all so I had to search a lot to find some very needed js functions for my needs in newbb and userlog:
function isOneChecked($name) {
  
// All <input> tags...
  
var chx document.getElementsByName($name);
  for (var 
i=0i<chx.lengthi++) {
    
// If you have more than one checkbox group, also check the name attribute
    // for the one you want as in && chx[i].name == 'choose'
    // Return true from the function on first match of a checked item
    
if (chx[i].type == 'checkbox' && chx[i].checked) {
      return 
true;
    } 
  }
  
// End of the loop, return false
  
return false;
}
// http://stackoverflow.com/questions/26 ... e-starts-with-some-string
function preventSubmitEmptyInput($prefix) {
    var 
eles = [];
    var 
inputs document.getElementsByTagName("input");
    for(var 
0inputs.lengthi++) {
        if(
inputs[i].name.indexOf($prefix) == 0) {
            
eles.push(inputs[i]);
        }
    }
    for(var 
0eles.lengthi++) {
        if (
eles[i].value =='') {
            
eles[i].setAttribute('name''');
        }
    }
    return 
true;
}
// START irmtfan - improve: add alt, title, id and innerHTML - recognize a IMG tag for src
function ToggleBlock(blockidiconsrc_expandsrc_collapsealt_expandalt_collapseclass_expandclass_collapse)
{
    var 
Img_tag='IMG';
    var 
el=document.getElementById(blockid);
    if (
el.className == class_expand)
    {
        
el.className class_collapse;
        if (
icon.nodeName  == Img_tag) {
            
icon.src src_collapse;
        }
        
icon.altalt_collapse;
        
icon.id findBaseName(src_collapse);
        
SaveCollapsed(blockidtrue);
    }
    else
    {
        
el.className class_expand;
        if (
icon.nodeName == Img_tag) {
            
icon.src src_expand;
        }
        
icon.altalt_expand;
        
icon.id findBaseName(src_expand);
        
SaveCollapsed(blockidfalse);
    }
    
icon.title icon.alt;
    if (
icon.nodeName  != Img_tag){
        
icon.innerHTML=icon.alt// to support IE7&8 use innerHTML istead of textContent
    
}
    
document.getElementById(blockid "text").innerHTML=icon.alt;    
}
// source: http://stackoverflow.com/questions/19 ... name-in-url-in-javascript
function findBaseName(url) {
    var 
fileName url.substring(url.lastIndexOf('/') + 1);
    var 
dot fileName.lastIndexOf('.');
    return 
dot == -fileName fileName.substring(0dot);
}
// END irmtfan - improve: add alt, title and innerHTML - recognize a IMG tag for src
function SaveCollapsed(objidaddcollapsed)
{
    var 
collapsed GetCookie(toggle_cookie);
    var 
tmp "";
    if (
collapsed != null)
    {
        
collapsed collapsed.split(",");
        for (
i in collapsed)
        {
            if (
collapsed[i] != objid && collapsed[i] != "")
            {
                
tmp tmp collapsed[i];
                
tmp tmp ",";
            }
        }
    }

    if (
addcollapsed)
    {
        
tmp tmp objid;
    }

    
expires = new Date();
    
expires.setTime(expires.getTime() + (1000 86400 365));
    
SetCookie(toggle_cookietmpexpires);
}

function 
SetCookie(namevalueexpires)
{
    if (!
expires)
    {
        
expires = new Date();
    }
    
document.cookie name "=" escape(value) + "; expires=" expires.toGMTString() +  "; path=/";
}

function 
GetCookie(name)
{
    
cookie_name name "=";
    
cookie_length document.cookie.length;
    
cookie_begin 0;
    while (
cookie_begin cookie_length)
    {
        
value_begin cookie_begin cookie_name.length;
        if (
document.cookie.substring(cookie_beginvalue_begin) == cookie_name)
        {
            var 
value_end document.cookie.indexOf (";"value_begin);
            if (
value_end == -1)
            {
                
value_end cookie_length;
            }
            return 
unescape(document.cookie.substring(value_beginvalue_end));
        }
        
cookie_begin document.cookie.indexOf(" "cookie_begin) + 1;
        if (
cookie_begin == 0)
        {
            break;
        }
    }
    return 
null;
}
/**
 * Newbb Javascript Validation functions
 *
 * @copyright       The XOOPS Project http://sourceforge.net/projects/xoops/
 * @license         GNU GPL 2 (http://www.gnu.org/licenses/old-licenses/gpl-2.0.html)
 * @module             newbb
 * @since           4.3
 * @author          irmtfan
 * @version         $Id$
 */

/**
* Function for validation of xoops forms: prevent user select nothing or disable some options
* @param elName : elements name
* @param elType : element type eg: select, checkbox
* @param prevent: prevent user select nothing: true or false
* @param disablecat: disable categories in forum select box: true or false
* @param elMsg: the message
*/


function validate(elNameelType preventdisablecatelMsg)
{
    var 
0;
    var 
el=document.getElementsByName(elName);
    var 
is_valid true;
    switch (
elType) {
        case 
'checkbox':
            var 
hasChecked false;
            if (
el.length) {
                for (
0el.lengthi++) {
                    if (
el[i].checked == true) {
                        
hasChecked true;
                        break;
                    }
                }
            } else {
                if (
el.checked == true) {
                    
hasChecked true;
                }
            }
            if (!
hasChecked) {
                if (
el.length) {
                    if (
prevent) {el[0].checked true;}
                    
el[0].focus();
                }else{
                    if (
prevent) {el.checked true;}
                    
el.focus();            
                }
                
is_valid false;
            }
            break;
        case 
'select':
            
el el[0];
            if (
disablecat) {
                for (
0el.options.lengthi++ ) {
                    if (
el.options[i].value 0) {
                        
el.options[i].disabled  true;
                        
el.options[i].value '';                        
                    }
                }                
            }
            
            if (
el.value == '') {
                
is_valid false;
                if(
prevent) {
                    for (
0el.options.lengthi++ ) {
                        if (
el.options[i].value != '') {
                            
el.value el.options[i].value;
                            break; 
// loop exit
                        
}
                    }
                }
            }
            break;
    }
    return 
is_valid;
}


As you can see there are very basic and common needs:
1- check if at least one checkbox is selected in a multi-checkbox. It is useful if you want to submit only when one selected.

2- prevent to submit empty input elements. it is very useful when you have many $_GET in the URL and you dont want to end up with a messy URI with some empty arguments like this:
/index.php?id=&time=&select=&cat=&post=234

using the above js function in this URI it remove all empty arguments and only post=234 is remained.
/index.php?post=234


3- toggle (show/hide) very needed just having the ability to change a css class is enough.

4- set and get cookie in browser.

5- prevent user select nothing in multiselect checkbox or select form. It is a common bug in all xoops modules like publisher, news, ... which user can select nothing and break the module from working.

I didnt review 2.6 fully. but there are many limitations in 2.6 too. I hope core team add more useful js functions with document and instruction for general usage of module developers.

Login

Username:
Password:

Lost Password? Register now!

Who's Online

65 user(s) are online (32 user(s) are browsing Support Forums)


Members: 0


Guests: 65


more...

Donat-O-Meter

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

Latest GitHub Commits