Management automat butoane popup

Este vorba despre automatizarea butoanelor unui popup de a executa actiuni in documentul din iframe-ul popup-ului.

De exemplu atunci cand avem un CRUD in popup : dorim ca butoanele din interiorul popup-ului sa fie ascunse si sa se afiseze in afara iframe-ului, in footer-ul popup-ului. De exemplu:

  • in index: butonul de NEW
  • in form: butoanele de SAVE si BACK

Cum se face

Pasul 1: creeaza toate butoanele necesare (adica toate care apar in popup, in toate actiunile) in footer-ul modalului, adica in div-ul modal-footer, cu aceleasi ID-uri ca si cele din iframe si cu clasa hide (!).

Pasul 2: adauga (manual) actiunile onclick specifice fiecarui buton, folosind functiile de JS:

  • gotoSubgridForm(): face redirect, exact ca un href
  • submitSubgridForm(): face submit la form

Pasul 3: in PHP-ul care contine popup-ul seteaza functia syncronizeButtons() pe onLoad-ul iframe-ului. Aceasta functie face automat afisarea si ascunderea butoanelor in functie de ce butoane apar in iframe. Nu mai trebuie sa faci manual asta.

Exemplu de implementare

In backend, in sectiunea de template-uri de conturi, avem un popup care afisaza CRUD-ul pentru sintetice si analitice.

Creeam toate butoanele, pe hide si adaugam si actiunile corespunzatoare pe onclick iar pe iframe load adaugam syncronizeButtons() :

<div class="modal-footer" id="commonButtons">
  <button type="button" class="btn btn-primary hide"  id="commonButtonSave"    onclick="submitSubgridForm('account-analitic-iframe','commonButtonSave');"><?= Yii::t('app', 'Save') ?></button>
  <button type="button" class="btn btn-primary hide"  id="commonButtonBack"    onclick="gotoSubgridForm('account-analitic-iframe','commonButtonBack');"><?= Yii::t('app', 'Back') ?></button>
  <button type="button" class="btn bal-button hide"   id="commonButtonAdd"     onclick="gotoSubgridForm('account-analitic-iframe','commonButtonAdd');"><?= Yii::t('app', 'Add') ?></button>
  <button type="button" class="btn bal-button hide"   id="commonButtonManage"  onclick="gotoSubgridForm('account-analitic-iframe','commonButtonManage');"><?= Yii::t('app', 'Manage') ?></button>
  <button type="button" class="btn btn-default hide"  id="close-modal-button"  data-dismiss="modal">Close</button>
</div>

Si respectiv

<?php
$js = "
jQuery( document ).ready(function($) {
   $('#select2-apaccountanalitic-parentaccountid-container').each(function() {
    $(this).html($(this).html().replace(/&nbsp;/g, ''));
});
});";

$this->registerJs($js, \yii\web\View::POS_END);
?>

 

Evident, in iframe avem in index (vezi acelasi ID ca in footer-ul popului:  commonButtonAdd):

<?= Html::a(Yii::t('app', 'Create account'), ['create', 'templateId' => (isset($_GET['templateId'])) ?$_GET['templateId'] :''], ['class' => 'btn btn-success pull-right', 'id' => 'commonButtonAdd']) ?>

Si respectiv in form (vezi aceleasi ID ca in footer-ul popului:  commonButtonSave si respectiv commonButtonBack):

<div class="form-group">
  <?= Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success pull-right','id'=>'commonButtonSave']) ?>
  <?= Html::a(Yii::t('app', 'Cancel'), Yii::$app->request->referrer, ['class' => 'btn btn-default pull-right margin-right-20','id'=>'commonButtonBack']) ?>
</div>

 

Cum functioneaza

Functia syncronizeButtons() este setata pe iframe load. Deci la fiecare end-of-load se va apela. Va scana continutul iframe-ului cautand butoanele. Pentru toate butoanele gasite, va afisa butoanele cu aceleasi ID-uri din footer-ul popup-ului, si le va ascunde pe cele care nu sunt gasite in iframe (de aici necesitatea ca butoanele din footer-ul popup-ului sa aiba exact aceleasi id-uri ca si cele din interiorul iframe-ului).

 

About

Software Development Manager, Architect

Categories: UI/UX |

Leave a Reply

Your email address will not be published. Required fields are marked *

[TOP]