The Joomla! Forum ™



Forum rules


Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.



Post new topic Reply to topic  [ 9 posts ] 
Author Message
 Post subject: jQuery not working
PostPosted: Fri Nov 16, 2012 10:37 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Jan 04, 2013 11:06 am
Posts: 60
can anybody post some code for form validation in the frontend using jQuery.

i have followed all the instructions in the jquery documentation but it doesn't work with the joomla form.


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Fri Nov 16, 2012 1:05 pm 
User avatar
Joomla! Champion
Joomla! Champion

Joined: Thu Feb 15, 2007 5:48 am
Posts: 5076
Location: Nottingham, UK
Which particular form are you working with?

_________________
toivo
my first programs were assembled and run in 16KB :)
http://archive.computerhistory.org/resources/text/GE/GE.GE-115SystemSoftware.1967.102646096.pdf#zoom=100


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Mon Nov 26, 2012 4:03 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Jan 04, 2013 11:06 am
Posts: 60
toivo wrote:
Which particular form are you working with?

i am creating a component of my own, so i have my own form created. my code looks like below and its just for testing purpose:
Code:
<?php
defined('_JEXEC') or die('Restricted access');
?>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
/*Joomla.submitbutton = function(task)
{
    if (task == 'cancel' || document.formvalidator.isValid(document.id('adminForm'))) {
         Joomla.submitform(task, document.getElementById('adminForm'));
    } else {
         alert('Highlighted fields are missing');
    }
}*/
$jQuery("#adminForm").validate({
   rules: {
      "name":{
         required:true,
         maxlength:500
         }
 
   },
     messages: {
        "name" : {
           required:  "Hey, please enter ur name"
           }
     }
</script>
<form method="POST" name="adminForm" id="adminForm">
<fieldset>
<legend>Personal Details</legend>
<table>
    <tr>
        <td><label for="name">Name *</label></td>
        <td><input type="text" name="name" id="name"/></td>       
    </tr>   
    <tr>
        <td colspan="2"><input type="submit" value="Submit" class="submit" name="submit"></td>
    </tr>   
</table> 
</fieldset>           
<input type="hidden" name="option" value="<?php echo JRequest::getVar( 'option' );?>"/>
<input type="hidden" name="task" value="save"/>
<input type="hidden" name="view" value="form"/>
<?php echo JHTML::_( 'form.token' ); ?>   
</form>

The validation do not work as it suppose to. Where am i going wrong sir?


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Fri Nov 30, 2012 9:46 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Nov 11, 2011 9:43 pm
Posts: 455
Location: Chicago, IL
Quick thing to check: use any browsers web developer tools to verify if Joomla is also loading the MooTools framework, as it and jQuery both use the $. If so, there are a variety of techniques using jQuery's noConflict() function.

Also, while you have the developer tools open check out the console log to verify their aren't any errors.


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Thu Dec 06, 2012 5:53 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Jan 04, 2013 11:06 am
Posts: 60
bbolli wrote:
Quick thing to check: use any browsers web developer tools to verify if Joomla is also loading the MooTools framework, as it and jQuery both use the $. If so, there are a variety of techniques using jQuery's noConflict() function.

Also, while you have the developer tools open check out the console log to verify their aren't any errors.

The browser is loading mootools as well as the jquery(you can see the page source image attached). The noConflict() mode is cofigured as i am using jQuery Library Plugin.

Still then i cannot make it work. I'm tired of this now. Its quite frustrating as i have tried everything given in the net.


You do not have the required permissions to view the files attached to this post.


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Fri Dec 07, 2012 1:17 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Oct 09, 2012 11:39 am
Posts: 4
Location: Poland
Example:
JToolbar has 3. buttons:
Code:
JToolBarHelper::apply('payment.apply');
JToolBarHelper::save('payment.save');
JToolBarHelper::cancel('payment.cancel');

Example Form:
Code:
<form method="post" action="index.php" name="adminForm" id="my_form">
   <div>
         <label forr="name_inp">Your name:</label>
         <input type="text" name="name" id="name_inp" value="" />
      </div>
      //other fields...
</form>


Javascript:
Code:
Joomla.submitbutton = function(task)
{
        if (task == '')
        {
                return false;
        }
        else
        {
                var isValid=true;
                var action = task.split('.');
                if (action[1] != 'cancel' && action[1] != 'close')
                {
                        // validate forms
                        jQuery("form#my_form").submit();
                }
 
               
        }
        return false;
   
}

jQuery(document).ready(function()
{
     jQuery("form#my_form").validate({
        errorClass: "form_error_input",
        successClass: "form_ok_input",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Mon Dec 10, 2012 6:07 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Jan 04, 2013 11:06 am
Posts: 60
kamilg wrote:
Example:
JToolbar has 3. buttons:
Code:
JToolBarHelper::apply('payment.apply');
JToolBarHelper::save('payment.save');
JToolBarHelper::cancel('payment.cancel');

Example Form:
Code:
<form method="post" action="index.php" name="adminForm" id="my_form">
   <div>
         <label forr="name_inp">Your name:</label>
         <input type="text" name="name" id="name_inp" value="" />
      </div>
      //other fields...
</form>


Javascript:
Code:
Joomla.submitbutton = function(task)
{
        if (task == '')
        {
                return false;
        }
        else
        {
                var isValid=true;
                var action = task.split('.');
                if (action[1] != 'cancel' && action[1] != 'close')
                {
                        // validate forms
                        jQuery("form#my_form").submit();
                }
 
               
        }
        return false;
   
}

jQuery(document).ready(function()
{
     jQuery("form#my_form").validate({
        errorClass: "form_error_input",
        successClass: "form_ok_input",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});

Thankyou for your reply but here in your example you have used Toolbar buttons which is usually not used in frontend. Instead i have used normal html buttons for the form to submit. My page looks like below:
Code:
<?php
defined('_JEXEC') or die('Restricted access');
//JHTML::_('behavior.calendar');
//JHtml::_('behavior.tooltip');
//JHTML::_('behavior.formvalidation');
//JHTML::_('behavior.mootools');
?>
<style>
.invalid
{
   color:red;
   border-color: red
}
</style>
<script type="text/javascript">
Joomla.submitbutton = function(task)
{
        if (task == '')
        {
                return false;
        }
        else
        {
                var isValid=true;
                var action = task.split('.');
                if (action[1] != 'cancel' && action[1] != 'close')
                {
                        // validate forms
                        jQuery("#adminForm").submit();
                }
 
               
        }
        return false;
   
}

jQuery(document).ready(function()
{
     jQuery("#adminForm").validate({
        errorClass: "invalid",
        successClass: "valid",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});

</script>
<form method="POST" action="index.php" name="adminForm" id="adminForm">
Personal Details
<table>
    <tr>
        <td><label for="name">Name *</label></td>
        <td><input type="text" name="name" id="name" value=""></td>       
    </tr>   
    <tr>
        <td colspan="2">
         <button value="Submit" name="submit">Submit</button>
         <button value="Cancel" name="cancel">Cancel</button>
      </td>
    </tr>   
</table>             
<input type="hidden" name="option" value="<?php echo JRequest::getVar( 'option' );?>"/>
<input type="hidden" name="task" value="save"/>
<input type="hidden" name="view" value="form"/>
<?php echo JHTML::_( 'form.token' ); ?>   
</form>

Nothing happens and the form gets submitted without filling the input. Can you go through it and advice me anything?


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Mon Dec 10, 2012 11:57 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Oct 09, 2012 11:39 am
Posts: 4
Location: Poland
Path to jQuery library, and validation lib is correct ?
Firebug don't have any errors ?
Replace <button> on <input type="submit" ... /> .


Try this:
Code:
<?php
defined('_JEXEC') or die('Restricted access');
//JHTML::_('behavior.calendar');
//JHtml::_('behavior.tooltip');
//JHTML::_('behavior.formvalidation');
//JHTML::_('behavior.mootools');
?>
<style>
.invalid
{
   color:red;
   border-color: red
}
</style>
<script type="text/javascript">
jQuery(document).ready(function()
{
     jQuery("#adminForm").validate({
        errorClass: "invalid",
        successClass: "valid",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});

</script>
<form method="POST" action="index.php" name="adminForm" id="adminForm">
Personal Details
<table>
    <tr>
        <td><label for="name">Name *</label></td>
        <td><input type="text" name="name" id="name" value=""></td>       
    </tr>   
    <tr>
        <td colspan="2">
         <input type="submit" value="Submit" name="submit" />
         <input type="submit" value="Cancel" name="submit" />
      </td>
    </tr>   
</table>             
<input type="hidden" name="option" value="<?php echo JRequest::getVar( 'option' );?>"/>
<input type="hidden" name="task" value="save"/>
<input type="hidden" name="view" value="form"/>
<?php echo JHTML::_( 'form.token' ); ?>   
</form>


If above code doesn't run, add this code:

Code:
jQuery(document).ready(function()
{
    jQuery("#adminForm").submit(function()
    {
           alert("Form submit!");
    });
});


Top
 Profile  
 
 Post subject: Re: jQuery not working
PostPosted: Tue Dec 11, 2012 5:26 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Jan 04, 2013 11:06 am
Posts: 60
Thankyou kamilg, finally it worked. the code in the last post did not require any changes. i only had to include the validation library in the page.

Many many thanks onceagain, now i feel i can work with jquery too in joomla.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 



Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group