CODEWITHSUNDEEP
javascriptvue.jsmodal-dialogvue-component
rand_triest
rand_triest

Reputation: 135

The modal window is not active

I create a modal window using this example:

jsfiddle

In the modal I send data from table. My code:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
        <!--begin modal  -->
        <div id="my-modal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Item Clicked!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Text:{{text}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
  <!--end modal -->


    <table class="table table-condensed">
        <thead>
        <tr>
            <th>id</th>
            <th>task</th>
            <th>date</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in tasks">

            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.id}}</td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">
                {{row.text}}
                <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
            </td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.date_current}}</td>

        </tr>
        </tbody>
    </table>
</div>

But for some reason, the modal window is not active: enter link description here

How to fix it? For some reason, the window is not active. Script text her, only part for modal :

Script:
<script type="text/javascript">
    //send post and open menu
    new Vue({
        el: '#app6',
        data:{
            tasks:[],
            fields:[
                'id','text','date',
            ],
            text:'',
            id:'',
            active: true,              
        },
        methods: {

            itemClicked: function(item) {
                this.id = item.id;
                this.text = item.text;
              //  console.log(item.id);
                $("#my-modal").modal('show');
            }
               //open edit windows
        }
    })

Text fog get minimal limit.

Upvotes: 0

Views: 102

Answers (1)

Husam Elbashir
Husam Elbashir

Reputation: 7177

In the example they're using a combination of Bootstrap/jQuery. So that's what you should be using for your code to work, not Bulma. Again, the easiest way is to just use CDNs. So you need to include these lines in your head or somewhere before your main #app div ..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

And remove the Bulma stylesheet. It messed up the Bootstrap styles ..

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">


new Vue({
  el: '#app6',
  data: {
    tasks: [],
    fields: [
      'id', 'text', 'date',
    ],
    text: '',
    id: '',
    active: true,
  },
  methods: {

    itemClicked: function(item) {
      this.id = item.id;
      this.text = item.text;
      //  console.log(item.id);
      $("#my-modal").modal('show');
    }
    //open edit windows
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app6">
  <div id="my-modal" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Item Clicked!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
        </div>
        <div class="modal-body">
          Text:{{text}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!--end modal -->


  <table class="table table-condensed">
    <thead>
      <tr>
        <th>id</th>
        <th>task</th>
        <th>date</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in tasks">

        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction"> {{row.id}}</td>
        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction">
          {{row.text}}
          <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
        </td>
        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction"> {{row.date_current}}</td>

      </tr>
    </tbody>
  </table>
</div>

See this JSFiddle

Upvotes: 1

Related Questions