Uncaught TypeError: Object [object Object] has no method 'validationEngine' while using it in 'nyromodal' Popup?

StackOverflow https://stackoverflow.com/questions/16161908

Question

Here I have a situation like the following i want jquery validation Engine Plugin inside the nyromodal .If i am not using it with nyromodal means it is working fine here the some screen shot what i am having .............

This will Show the validation prompt This Will Show The Error In FireBug

Here is My Code:

<?php
require_once'../session.php';
?>
<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' >
<head>
    <title>HTML Form Builder</title>
    <link rel='stylesheet' type='text/css' href='<?php echo ROOT_PATH;?>css/validationEngine.jquery.css'/> 

<script type="text/javascript" src="<?php echo ROOT_PATH;?>js/jquery.min.1.7.1.js">
</script>
<script type="text/javascript" src="<?php echo ROOT_PATH;?>js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="<?php echo ROOT_PATH;?>js/jquery.validationEngine.js"></script>
    <script type='text/javascript'>
    $(function(){
        changeInnerHTML('doctor_id');
        changeInnerHTML('hospital_id');
        changeInnerHTML('clinic_id');
        changeInnerHTML('stockist_id');
        changeInnerHTML('chemist_id');
        changeInnerHTML('bloodbank_id');
        changeInnerHTML('dialysis_id');
        if($('#refSubmit').val() == 'grid')
        {
            $('#submit-form').hide();
        }
        $('form').attr('autocomplete','off');
        //$('form').attr('id','addForm');
        $('form').removeAttr('novalidate');
    });
    function changeInnerHTML(id)
    {
        if($('#dialog_box_'+id).length)
        {
            var tmp=id.split('_');
             $.get('getDataValues.php?ref='+tmp[0],function(data,status){
                $('#dialog_box_'+id).html(data);
            });
        }
    }
    $('#submit-form').live('click',function(){
        $('#preview_form').validationEngine('validate')?subForm():'';
    });
    function subForm()
    {
        $('#preview_form').submit();
    }
    </script>
    </head>
    <body>
    <div id='container'>


        <h1 id="form-name" style="background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px; border: none; margin: 8px 15px;">dfgdfg</h1>
        <form method="POST" action="saveData.php" id="preview_form" novalidate="novalidate">


        <div class="row" style="display: block;"><label class="field" for="textfield_1">textfield_1<div class="rqrd">*</div></label><span class="textField" data=""><input type="text" id="dialog_box_textfield_1" name="textfield_1" class="validate[required]" /></span></div><input type="button" class="button blue" value="Submit" id="submit-form"/><input type='hidden' id='tname' name='tname' value='surveyForm_2' /><input type='hidden' id='refSubmit' name='refSubmit' value='<?php echo $_GET['ref'];?>' /></form></div> <!--container-->

</body>
</html>
Was it helpful?

Solution

You need to wrap your jQuery code inside $(document).ready(function() { }); or $(function() { }); to let it see the whole DOM as well as using on() instead of live since live is deprecated and completely removed in jQuery version 1.9+

$(document).ready(function() {
    $('#submit-form').on('click',function(){
        $('#preview_form').validationEngine('validate')?subForm():'';
    });    
});

The other thing is to make sure the path to all your files are correctly targeted.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top