CODEWITHSUNDEEP
laravel
Inam
Inam

Reputation: 51

My bootstrap modal doesn't appears in laravel

I'm trying to create a bootstrap modal in laravel to edit sa post, the problem is that when I click the button or anchor the modal doesn't appears and in some cases it appears but then quickly it disappears I don't know where is the problem I'm new to laravel and I think the problem is with the links ...

app2.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
    <div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>

    <div class="container">


        @yield('content')

    </div>
    <!--<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
    <!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->

<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script> 
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>

</body>
</html>

dashboard.blade.php

@extends('layouts.app2')
@section('title')
dashboard
@endsection

@section('content')
<h1>Dashboard</h1><br>

<div class="row">

<div class="col-md-6 col-md-offset-6">

<div>
    <form action="{{url('/post')}}" method="post">
        {{csrf_field()}}
        <div class="form-group">
        <textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
        <!--<input type="hidden" value="{{Session::token()}}" name="_token">-->

     </form>
</div>

</div>

</div><br><br>
@foreach($posts as $post)
<div class="row">

<div class="col-md-6 col-md-offset-6">

<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>

<a href="" id="edit">Edit</a> | <a href="{{url('posts/delete/'.$post->id)}}">Delete</a> | <a href="">Like</a> | <a href="">Dislike</a>
</div>

</div>

<br>
@endforeach


<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </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>

@endsection

app_new.js

$('#edit').click(function(){
$('#edit-modal').modal();

    });

Upvotes: 0

Views: 2895

Answers (3)

user9319990
user9319990

Reputation:

This is one way to call a modal using jquery please try

$('#myModal').modal('show');

Upvotes: 0

Karan
Karan

Reputation: 1156

try this

<a href="" id="edit" data-toggle="modal" data-target="#modalEdit">Edit</a>

where #modalEdit is id of modal tag like

<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">

Upvotes: 0

yrv16
yrv16

Reputation: 2275

Use preventDefault() when you click on link.

$('#edit').click(function(e){
    e.preventDefault();
    $('#edit-modal').modal();
});

And add id='edit-modal' for your div with modal class.

Upvotes: 1

Related Questions