Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Laravel with Bootstrap open modal or popup automatically

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 4.74k
    Comment on it

    Hi Readers,


    If you are using Bootstrap in your application you should use modal to show popups in your web application. Modal is a very nice feature provided by the Bootstrap to show nice and beautiful popups which can be easily modifiable. I recently used them in my recent project.


    I had a form in my modal which need to be filled by the end user. I had implemented both client and server side validation on it. If there is any error from the client side it is shown immediately but if the error is from the server side I had a problem showing it. The reason behind it was that on successful submit of the form the webpage use to get reloaded and the modal close out.


    So, to open modal(popup) automatically we check for any error from the server side validation and thus open modal if found any. To make if possible you can use the following jQuery code.


    Syntax:-

    <div class="clearfix error2 col-md-12" id="errorMessageEmailShareModal">
        @if (count($errors-&gt;emailShare) &gt; 0)
        <script type="text/javascript">
            $(window).load(function() {
                $('#emailShare').modal('show');
            });
        </script>
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors-&gt;emailShare-&gt;all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>
    

    HTML Syntax:-

    <div class="modal fade" id="emailShare" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        .....
        ....
        ..
        .
    </div>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: