2015-04-02 8 views
6

मैं वाईआई 2 में मोडल विंडोज़ में फॉर्म बनाने पर काम कर रहा हूं, और मुझे कोई समस्या है जहां मानक वाईआई फॉर्म AJAX सत्यापन काम नहीं कर रहा है जब फॉर्म बूटस्ट्रैप मोडल विंडो के अंदर है।वाईआई 2: बूटस्ट्रैप मॉडल फॉर्म सत्यापन (अजाक्स) - अजीब व्यवहार पर कोई अंतर्दृष्टि?

स्पष्ट होने के लिए, जब दायर फोकस खो देता है तो प्रत्येक फ़ील्ड के लिए AJAX फॉर्म सत्यापन ट्रिगर किया जाता है। यह मानक वाईआई फॉर्म सत्यापन है, इसलिए मैं आवश्यक फ़ील्ड में क्लिक करके और फिर फ़ील्ड से बाहर क्लिक करके मोडल में फॉर्म का परीक्षण कर रहा हूं। यह वाईआई AJAX सत्यापन को ट्रिगर करता है और उस क्षेत्र के नीचे एक लाल त्रुटि संदेश प्रदर्शित करना चाहिए जो कहता है कि "फ़ील्ड" खाली नहीं हो सकता है। "

फिर, मेरी समस्या यह है कि कभी-कभी AJAX सत्यापन कार्य करता है और कभी-कभी ऐसा नहीं होता है।

मैं पृष्ठ पर मोडल कोड कहां से संबंधित है, इस संबंध में इस मुद्दे को फँसाने में कामयाब रहा, लेकिन यह मुझे समझ में नहीं आता कि निम्नलिखित मोडल में फॉर्म के AJAX सत्यापन व्यवहार को कैसे प्रभावित करेगा।

सबसे पहले मैं आपको वह कोड दिखाऊंगा जो ठीक से काम करता है। वाईआई फॉर्म सत्यापन मोडल विंडो में प्रपत्र पर अपेक्षित के रूप में काम करता है।

<?php 
use yii\helpers\Html; 
use yii\helpers\Url; 
use yii\grid\GridView; 
use yii\bootstrap\Modal;  
?> 
<div class="category-index"> 

    <h1><?= Html::encode($this->title) ?></h1> 

    <?= Html::button('Create Category', [ 
     'class' => 'btn btn-success btn-ajax-modal', 
     'value' => Url::to('/category/create'), 
     'data-target' => '#modal_category', 
    ]); ?> 

    <?php 
    Modal::begin([ 
     'id' => 'modal_category', 
     'header' => '<h4>Category</h4>', 
    ]); 
    echo '<div class="modal-content"></div>'; 
    Modal::end(); 
    ?> 

    <?= GridView::widget([ 
     'dataProvider' => $dataProvider, 
     'filterModel' => $searchModel, 
     'columns' => [ 
      ['class' => 'yii\grid\SerialColumn'], 
      'id', 
      'title', 
      ['class' => 'yii\grid\ActionColumn'], 
     ], 
    ]); ?> 
</div> 

चीजें उपरोक्त कोड में गौर करने योग्य

1) यह मेरा श्रेणी/सूचकांक दृश्य है, इसलिए यह एक बनाने के बटन, बूटस्ट्रैप मोडल कोड, और फिर श्रेणियों में से Yii gridview है।

2) निर्माण बटन में btn-ajax-modal कक्षा है। इस वर्ग को एक जेएस फ़ंक्शन द्वारा पहचाना जाता है जो मोडल विधवा को प्रदर्शित करने और मोडल में फ़ॉर्म सामग्री लोड करने के लिए अन्य बटन विशेषताओं का उपयोग करता है। बटन मान विशेषता मॉडल और रूप को पहचानती है जिसे लोड किया जाना चाहिए।

यहाँ जे एस समारोह है कि मोडल दिखाना और फ़ॉर्म लोड हो रहा है संभालती है:

$('.btn-ajax-modal').click(function(){ 
    var elm = $(this), 
     target = elm.attr('data-target'), 
     ajax_body = elm.attr('value'); 

    $(target).modal('show') 
     .find('.modal-content') 
     .load(ajax_body); 
}); 

तो, इसके बाद के संस्करण कोड के सभी पूरी तरह से काम करता है, और मुझे आशा है कि इस दूसरों की मदद करेगा है!

लेकिन ... अगर मैं उपरोक्त कोड में कुछ बहुत ही सरल परिवर्तन करता हूं, तो AJAX फॉर्म सत्यापन अब काम नहीं करता है, और मुझे नहीं पता कि क्यों।

पहले परिवर्तन:

1) gridview कोड नीचे बूटस्ट्रैप मोडल कोड ले जाएँ, और ajax का सत्यापन नहीं रह गया काम करता है।

<div class="category-index"> 

    <h1><?= Html::encode($this->title) ?></h1> 

    <?= Html::button('Create Category', [ 
     'class' => 'btn btn-success btn-ajax-modal', 
     'value' => Url::to('/category/create'), 
     'data-target' => '#modal_category', 
    ]); ?> 

    <?= GridView::widget([ 
     'dataProvider' => $dataProvider, 
     'filterModel' => $searchModel, 
     'columns' => [ 
      ['class' => 'yii\grid\SerialColumn'], 
      'id', 
      'title',  
      ['class' => 'yii\grid\ActionColumn'], 
     ], 
    ]); ?> 

    <?php //*** SEE MODAL CODE IS NOW BELOW GRIDVIEW CODE 
    Modal::begin([ 
     'id' => 'modal_category', 
     'header' => '<h4>Category</h4>', 
    ]); 
    echo '<div id="modalContent"></div>'; 
    Modal::end(); 
    ?> 

</div> 

यह क्यों gridview कोड नीचे मोडल कोड का स्थान बदलना ajax फ़ॉर्म सत्यापन टूट जाएगा मेरे लिए कोई मतलब नहीं है। मोडल अभी भी उचित रूप को प्रदर्शित करता है और लोड करता है, लेकिन जब मैं एक आवश्यक फ़ील्ड पर ध्यान देता हूं और हटा देता हूं तो AJAX फॉर्म सत्यापन ट्रिगर नहीं होता है।

और यह और भी अधिक विचित्र हो जाता है ...

दूसरा परिवर्तन:

2) इसके बजाय gridview कोड नीचे मोडल कोड हिलाने की, बस gridview पूरी तरह use yii\grid\GridView; भी हटा दी।

<?php 
use yii\helpers\Html; 
use yii\helpers\Url; 
use yii\bootstrap\Modal;  
?> 
<div class="category-index"> 

    <h1><?= Html::encode($this->title) ?></h1> 

    <?= Html::button('Create Category', [ 
     'class' => 'btn btn-success btn-ajax-modal', 
     'value' => Url::to('/category/create'), 
     'data-target' => '#modal_category', 
    ]); ?> 

    <?php 
    Modal::begin([ 
     'id' => 'modal_category', 
     'header' => '<h4>Category</h4>', 
    ]); 
    echo '<div class="modal-content"></div>'; 
    Modal::end(); 
    ?> 

</div> 

यह परिवर्तन कार्य रोकने के लिए मोडल में फ़ॉर्म के लिए AJAX फॉर्म सत्यापन का भी कारण बनता है।

पृथ्वी पर क्या? ग्रिडव्यू को कैसे हटाया जा सकता है, जिसमें मोडल/फॉर्म सेटअप के साथ बिल्कुल कुछ नहीं है, जिससे काम बंद करने के लिए AJAX फॉर्म सत्यापन का कारण बनता है?

मुझे ब्राउज़र कंसोल में कोई त्रुटि नहीं दिखाई दे रही है, वाईआई डीबग मॉड्यूल में कोई त्रुटि नहीं है। लेकिन किसी कारण से, AJAX फ़ील्ड सत्यापन प्रदर्शित नहीं हो रहा है।

इतनी लंबी पोस्ट के लिए खेद है, लेकिन मैं जितना संभव हो उतना स्पष्ट और विशिष्ट होना चाहता था। मुझे यकीन नहीं है कि यह कुछ अजीब वाईआई 2 बग है, अगर मैं अपना दिमाग खो रहा हूं, या इसके लिए कोई तार्किक स्पष्टीकरण है।

यदि किसी के पास कोई विचार, उत्तर या सुझाव हैं, तो कृपया साझा करें! और मेरे साथ दिमागी तूफान के लिए धन्यवाद!

उत्तर

6

इस चुनौती का समाधान यह सुनिश्चित करना था कि मोडल विंडो में फ़ॉर्म में एक आईडी विशेषता है। Yii2 AJAX सत्यापन के लिए ठीक से कार्य करने के लिए फॉर्म आईडी महत्वपूर्ण है।

संबंधित मुद्दे