Why The Jquery Function Just Only Work When One Chtml::ajaxlink Exists On The View?

[msoa]

Hi, i have this View code:

[html]

<script>


    $(document).ready(function(){


        $('#ajaxform').submit(function(){


            var formData = $(this).serialize();


            alert(formData);


            return false;


        });


    });


</script>


 


<form id="ajaxform" name="ajaxform" method="post">


    <input type="text" id="name" name="name">


    <input type="text" id="family" name="family">


    <input type="submit" id="submit" value="Submit">


</form>

[/html]

in above code, event handler on the submit dont work. but when add a CHtml::ajaxlink (or like it)that works. for example the submit event handler in followning code work.

[html]

<script>


    $(document).ready(function(){


        $('#ajaxform').submit(function(){


            var formData = $(this).serialize();


            alert(formData);


            return false;


        });


    });


</script>


 


<form id="ajaxform" name="ajaxform" method="post">


    <input type="text" id="name" name="name">


    <input type="text" id="family" name="family">


    <input type="submit" id="submit" value="Submit">


</form>


 


<!-- The following line dont related to above code, its just for enabling JQuery's function -->


<?php echo CHtml::ajaxLink('fetch-ajax-data', array('Ajax'), array('success'=>'js:function(data){$("#ajax-data").val(data)}')); ?>

[/html]

What is the reason?

[seenivasan (Chellamnivas)]

Dear Friend

When You have the following code.

<script>

        $(document).ready(function(){

            $('#ajaxform').submit(function(){

                var formData = $(this).serialize();

                alert(formData);

                return false;

            });

        });

    </script>

     

    <form id="ajaxform" name="ajaxform" method="post">

        <input type="text" id="name" name="name">

        <input type="text" id="family" name="family">

        <input type="submit" id="submit" value="Submit">

    </form>

It means that we have not registered the corescript "jquery".

But the following code registers main jquery. That is why it is working.

<?php echo CHtml::ajaxLink('fetch-ajax-data', array('Ajax'), array('success'=>'js:function(data){$("#ajax-data").val(data)}')); ?>

To circumvent that we can do the following.

<!--Register The Script -->

<?php Yii::app()->clientScript->registerCoreScript('jquery');?>


<!--Then Use The Script-->

<script>

        $(document).ready(function(){

            $('#ajaxform').submit(function(){

                var formData = $(this).serialize();

                alert(formData);

                return false;

            });

        });

    </script>

     

    <form id="ajaxform" name="ajaxform" method="post">

        <input type="text" id="name" name="name">

        <input type="text" id="family" name="family">

        <input type="submit" id="submit" value="Submit">

    </form>

Regards.

[msoa]

Thanks, i forgotten must register JQuery in main layout for automatic load.

So the following method will not work:

[html]

<script src="jquery-1.9.0.min.js"></script>

<script>

$(document).ready(function(){


    $('#ajaxform').submit(function(){


        var formData = $(this).serialize();


        alert(formData);


        return false;


    });


});

</script>

<form id="ajaxform" name="ajaxform" method="post">

<input type="text" id="name" name="name">


<input type="text" id="family" name="family">


<input type="submit" id="submit" value="Submit">

</form>

[/html]

right?