jQuery not working

For Joomla! 2.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Note: All 1.6, 1.7 and 3.5 releases have reached end of life and should be updated to 3.x.

Moderators: ooffick, dam-man

Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
raaman_rai
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Fri Jan 04, 2013 11:06 am

jQuery not working

Postby raaman_rai » Fri Nov 16, 2012 10:37 am

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.

User avatar
toivo
Joomla! Champion
Joomla! Champion
Posts: 7332
Joined: Thu Feb 15, 2007 5:48 am
Location: Nottingham, UK
Contact:

Re: jQuery not working

Postby toivo » Fri Nov 16, 2012 1:05 pm

Which particular form are you working with?
Toivo Talikka, Global Moderator
my first programs were assembled and run in 16KB :)
http://archive.computerhistory.org/resources/text/GE/GE.GE-115SystemSoftware.1967.102646096.pdf#zoom=100

raaman_rai
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Fri Jan 04, 2013 11:06 am

Re: jQuery not working

Postby raaman_rai » Mon Nov 26, 2012 4:03 am

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: Select all

<?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?

bbolli
Joomla! Explorer
Joomla! Explorer
Posts: 455
Joined: Fri Nov 11, 2011 9:43 pm
Location: Chicago, IL

Re: jQuery not working

Postby bbolli » Fri Nov 30, 2012 9:46 pm

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.

raaman_rai
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Fri Jan 04, 2013 11:06 am

Re: jQuery not working

Postby raaman_rai » Thu Dec 06, 2012 5:53 am

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.

kamilg
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Oct 09, 2012 11:39 am
Location: Poland

Re: jQuery not working

Postby kamilg » Fri Dec 07, 2012 1:17 pm

Example:
JToolbar has 3. buttons:

Code: Select all

JToolBarHelper::apply('payment.apply');
JToolBarHelper::save('payment.save');
JToolBarHelper::cancel('payment.cancel');

Example Form:

Code: Select all

<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: Select all

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
             }
        }
     });
});

raaman_rai
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Fri Jan 04, 2013 11:06 am

Re: jQuery not working

Postby raaman_rai » Mon Dec 10, 2012 6:07 am

kamilg wrote:Example:
JToolbar has 3. buttons:

Code: Select all

JToolBarHelper::apply('payment.apply');
JToolBarHelper::save('payment.save');
JToolBarHelper::cancel('payment.cancel');

Example Form:

Code: Select all

<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: Select all

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: Select all

<?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?

kamilg
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Oct 09, 2012 11:39 am
Location: Poland

Re: jQuery not working

Postby kamilg » Mon Dec 10, 2012 11:57 am

Path to jQuery library, and validation lib is correct ?
Firebug don't have any errors ?
Replace <button> on <input type="submit" ... /> .


Try this:

Code: Select all

<?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: Select all

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

raaman_rai
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Fri Jan 04, 2013 11:06 am

Re: jQuery not working

Postby raaman_rai » Tue Dec 11, 2012 5:26 am

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.


Return to “Joomla! 2.5 Coding”

Who is online

Users browsing this forum: Google Feedfetcher and 6 guests