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

  • luciorota

  • Module Developer

  • Posts: 216

  • 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/2617480/how-to-get-all-elements-which-name-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/1991608/find-base-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

Who's Online

157 user(s) are online (91 user(s) are browsing Support Forums)


Members: 0


Guests: 157


more...

Donat-O-Meter

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

Latest GitHub Commits