How to add a dynamic session message in my index page.

Level 50

how about using flash messages with vue?do u use vue in your project? u can use this

Flash.vue

<template> 

    <div class="alert alert-flash" :class="'alert-'+level" role="alert" style="padding-right:20px; padding-left:20px" v-show="show" v-text="body">
    
</div> 
</template>

<script>
export default {
  props: ["message", "levels"],
  data() {
    return {
      body: this.message,
      level: this.levels,
      show: false
    };
  },
  created() {
    if (this.message) {
      this.flash();
    } 
  },
  methods: {
    flash() {
      this.show = true;
      this.hide();
    },
    hide() {
      setTimeout(() => {
        this.show = false;
      }, 4000);
    }
  }
};
</script>
<style>
.alert-flash {
  position: fixed;
  right: 25px;
  bottom: 25px;
}
</style>

Vue.component('flash', require('./components/Flash.vue'));

const app = new Vue({

    el: '#app',
   
});

in your main layout under id app put this

<div id='app'>
<flash levels="{{session('level','success')}}" message="{{session('flash')}}"></flash>
        
</div>

when you store in session you have to pass one message property it will by default success message . if you want danger message you have to pass levels prop as well

example

return back()->with(['levels'=>'danger', 'message'=>'sorry, permission denied'])

1 like

Level 1

@rin4ik That's a very cool option! I am definitely going to try it! The problem is I disabled my app.js file because it messed up with DataTable jQuery. Should I just put the script below in my app.blade.php file?

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

And where should I put the template, js, and style you provided since I don't have a app.js anymore?

rin4ik

Level 50

you need app.js . vue installed automatically in every laravel installation you don't need cdn. try to install datatables via npm.

Level 1

@rin4ik Interesting! I will give it a try! Thank you.

1 like

Best Answer

Level 67

That's a lot to do just to hide something, especially if you're already using jquery. You don't need to use a second javascript library to do this, and can do it a lot simpler in jquery.

@if (\Session::has('success'))
    <div class="alert alert-success fade-message">
         <p>{{ \Session::get('success') }}</p>
    </div><br />

    <script>
    $(function(){
        setTimeout(function() {
            $('.fade-message').slideUp();
        }, 5000);
    });
    </script>
@endif

That's it. Set a timer for 5 seconds, and make anything with the class of 'slide-message' slide up and disappear after that. Only 5 lines of extra code minus the script tags. With a cool animation, too. Vue is cool and all, and has it's place, but in this case it's not the right tool for the job if you're not already using Vue but are using jQuery.

Level 1

@Cronix Thank you for sharing that, I tried it, but not working as expected. I used the CDN below. Is it because those library is out dated?

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

Level 67

Where are you loading those scripts? In the <head> of your document or somewhere else?

They need to be loaded before the code I showed for it to work, or you need to move the <script> part of what I wrote to after they are loaded wherever that is.

So my code needs to come after you are doing

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

What does your console say? Always post the errors, don't just say "it doesn't work".

Level 1

@Cronix I just replaced my library to below. But it is still not working.

{{--<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>--}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Level 1

@Cronix Got it! I loaded them at bottom of the page. Let me fix it real quick!

Level 67

Yes,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function(){
        setTimeout(function() {
            $('.fade-message').slideUp();
        }, 5000);
    });
</script>

That would make it work. You'd also be able to use it on different pages. If you want anything else to fade after 5 seconds, you just need to add the class 'fade-message' to it and it will work for that too.

<span class="fade-message">Hide me too</span>

Level 1

@Cronix I did put the code below in the header from app.blade.php file.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But it is still not working, I don't see anything in the console either, I doubted if I was in the right page, but I double checked I was in the same page.

Level 1

@Cronix Wait! I might figured it out.

Level 1

@Cronix Got it! I forgot to add 'fade-message' class in the success message! Silly me! Sorry about wasting time, Thank you so much for your help.

1 like