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

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

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

#1 User is online   msoa 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 257
  • Joined: 15-August 12

Posted 04 March 2013 - 02:36 AM

Hi, i have this View 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>


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.

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


What is the reason?
0

#2 User is offline   seenivasan 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 620
  • Joined: 17-June 12
  • Location:Chennai,TamilNadu,India.

Posted 04 March 2013 - 03:13 AM

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.
0

#3 User is online   msoa 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 257
  • Joined: 15-August 12

Posted 04 March 2013 - 04:34 AM

Thanks, i forgotten must register JQuery in main layout for automatic load.
So the following method will not work:

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

right?
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users