CODEWITHSUNDEEP
javascriptphpjqueryhtmlyii2
Olga
Olga

Reputation: 443

jQuery popover buttons (php)

I have a a button to generate presentations. I generate 8 presentation with one click, and then I can edit each one by clicking on its name. There I have another, smaller form. I want to have also some button there, that will let me choose which fields I want to edit. This applies to "place" part - you can specify the place, if you want to. I have a button to show/hide fields connected to place edition. 

<div>
  <?= 
Html::button(Yii::t('app', 'Add new place'), [
'id' => "add-different-place-btn",
'class' => 'btn btn-success',
])
?>
  <?= 
Html::button(Yii::t('app', 'Delete new place'), [
'id' => "delete-different-place-btn",
'class' => 'btn btn-success',
])
?>
</div>
<br />
<div id="place-hidden-different">
  <div id="place-name-hidden">
    <?= $form->field($place, "[{$index}]name")->textInput()->label(Yii::t('app', 'New place')) ?>
  </div>
  <div id="place-city-hidden">
    <?= $form->field($place, "[{$index}]city")->textInput() ?>
  </div>
  <div id="place-street-hidden">
    <?= $form->field($place, "[{$index}]street")->textInput() ?>
  </div>
  <div id="place-postcode-hidden">
    <?= $form->field($place, "[{$index}]post_code")->textInput() ?>
  </div> 
</div>

Then, in my jQuery part I figured out something like this. Notice that I'm really new to jQuery, so it can be something really obvious :) 

$('.btn-popover-link').on('click', function () {
  $(document).ready(function () {
    $('#place-hidden-different').hide();
    $('#delete-different-place-btn').hide();

    $('#add-different-place-btn').on('click', function () {
      $('#place-hidden-different').show();
      $('#add-different-place-btn').hide();
      $('#delete-different-place-btn').show();
    });

    $('#delete-different-place-btn').on('click', function () {
      $('#place-hidden-different').hide();
      $('#add-different-place-btn').show();
      $('#delete-different-place-btn').hide();
    });
  });
});

But, instead of getting what I want to, I get things like that:

First

It looks ok. But it doesn't work. Nothing happens on clicking "Dodaj nowe miejsce" (Add new place). Morover, in other presentation I get full variety of that form - example below. None of the buttons is working at all, in some popovers there are no buttons at all, in some just not working.

Second

What can cause this situation?

Upvotes: 3

Views: 106

Answers (1)

Gregoire
Gregoire

Reputation: 767

If I get it well, you are using the same ID #add-different-place-btn for each of the 8 presentations button. If this is right, the code is working as expected: IDs must be unique ! You should move to a class selector like you did with .btn-popover-link.

Also you should move $('.btn-popover-link').on('click', function () {}); inside the $(document).on("ready", function() { ... here ... });. Even better with $(window).on("load", function() {}); but it depends on the kind of code you are running.

Upvotes: 1

Related Questions