Pop up notification

[davy_yg]

Hello,

I would like to create notification on press Purchase through a pop up. Such as "Thank you. We will process your request. Please check your email." How to create the javascript to create pop up?

   <form action="{{ action('SettingController@getBackgroundTheme') }}" method="get" id="notification">
                                    <span class="setting-name">THEME</span>

                                    <!-- <form method="POST" action="/posts"> -->
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
                                    <!-- {{ csrf_field() }} --> 
                                    <span class="setting-value center">

                                    <select name="menu">
                                        <option value="">All</option>
                                        <option value="Handicraft">Handicraft</option>
                                        <option value="Farming">Farming</option>
                                        <option value="Services">Services</option>
                                        <option value="Tour & Travel">Tour & Travel</option>
                                        <option value="Trading">Trading</option>
                                        <option value="Fishery">Fishery</option>
                                        <option value="Lifestyle">Lifestyle</option>
                                        <option value="Music">Music</option>
                                        <option value="Property">Property</option>
                                        <option value="Hobby">Hobby</option>
                                        <option value="Politic">Politic</option>
                                    </select>

                                    <input type="submit" value="Submit">                                        
                                    <br><br>

                                    </span>
                                    </form>

                                    <form
                                        action="{{ action('SettingController@SendPicture') }}"
                                        method="post"
                                        >
                                    {{ csrf_field() }}

                                    <table>

                                        @foreach ($themes->chunk(3) as $chunk)
                                            <tr> 

                                            @foreach ($chunk as $theme)
                                                <td>

                                                    <a href="{{url('/')}}/uploads/theme/{{$theme->pic_name}}.jpg" data-lightbox="image-gallery" data-title="{{$theme->pic_name}}" >
                                                    <img width="100px"
                                                        height="100px"
                                                        src="{{url('/')}}/uploads/theme/{{$theme->pic_name}}.jpg"/></a> 
                                                    <input type="checkbox" name="pic[{{$theme->pic_name}}]" value="{{$theme->pic_name}}"/>

                                                </td> 
                                            @endforeach
                                            </tr>

                                        @endforeach

                                    </table>

                                    @if ( $themes->lastPage() == 0) <br><br><br><br> @endif 

                                    @if ( $themes->currentPage() != 1)
                                    <a href="{!! $themes->previousPageUrl() !!}"> << </a>@endif

                                    {!! $themes->currentPage() !!} of {!! $themes->lastPage() !!}

                                     @if ( $themes->currentPage() !=  $themes->lastPage())
                                    <a href="{!! $themes->nextPageUrl() !!}"> >> </a>@endif

                                    <br><br><input style="width: 15px; margin-bottom: -10px; position: relative;" type="checkbox" required name="chkbox_agreement" value="Terms & Agreement"/>&nbsp;&nbsp;&nbsp;
                                    <a href="#myModal" data-backdrop="false" data-toggle="modal">Terms & Agreement</a>                                      
                                    <div id="myModal" class="modal fade">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5>Terms & Agreement</h5>
                                                </div>
                                                <div class="modal-body">
                                                    By clicking Purchase you agree to the Term and Conditions.

                                                </div>
                                                <div class="modal-footer">
                                                     <button type="button" class="btn btn-default" data-dismiss="modal">Agree</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div><br><br><br>  

                                    <input type="submit" value="Purchase">  
                                    </form>

I try to add this on bottom I wonder why it does not work:

 <script>

  $(".notification").click(function(e){
             e.preventDefault();

            $.ajax({
            type: "POST",
            url: '{{action("SettingController@SendPicture")}}',
            data : {

            },

            success: function (response) {
                if (response=='"success"') {
                    pesanOk("Thank you. We will process your request. Please check your email.");

                }else{
                    pesanErr("failed");
                };
            }
        });

 </script>

[essential]

Hi,
might overseen this line:
It should be like this
if (response == "success") {
instead of

[davy_yg]

I already fix the if (response == "success") {

and the pop up has not appearing yet. Please help? What else should I change?

[Subraa_1]

Give me some time. Let me fix.

[davy_yg]

I updated my javascript: ( still does not receive any pop up)

$("#notification").click(function(e)         

            $.ajax({
            method: "POST",
            url: '{{action("SettingController@SendPicture")}}',
            data : {

            },

            success: function (response) {

                    pesanOk("Thank you. We will process your request. Please check your email.");
                    setTimeout(function(){location.reload()},1000);
                },  
                error:function()
                {
                    pesanErr("failed");
                };
            })

            return false;
        });

[diafol]

You don't have any braces following the function parameters:

 $("#notification").click(function(e) {...});

[essential]

Hi,
i've created a simple demonstration on how you would able to achive a simple modal that will handle your notification upon form submission

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A brief example on how to use java script to create your own popup notification using javascript and css">
  <meta name="author" content="Keith Santiago">
  <title>Custom Popup Sample</title>
  <link rel="stylesheet" href="your_css_path/modal.css">
</head>
<body>
  <div class="content-wrapper scale">
    <div class="layer">
      <form method="get" action="javascript:void(0)" id="notification">
        <select name="menu">
            <option value="">All</option>
            <option value="Handicraft">Handicraft</option>
            <option value="Farming">Farming</option>
            <option value="Services">Services</option>
            <option value="Tour & Travel">Tour & Travel</option>
            <option value="Trading">Trading</option>
            <option value="Fishery">Fishery</option>
            <option value="Lifestyle">Lifestyle</option>
            <option value="Music">Music</option>
            <option value="Property">Property</option>
            <option value="Hobby">Hobby</option>
            <option value="Politic">Politic</option>
        </select>
        <input type="submit" value="Submit">

      </form>
      <div id="myModal" class="modal hide">
        <div class="content">
          <p class="message">
            Thank you. We will process your request. Please check your email.
          </p>
          <div class="button">
            <button type="button" contextmenu="Hello World">DONE</button>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- Supplementary JavaScript -->
<script type="text/javascript" src="path_to_js/modal.js"></script>
</body>
</html>

modal.css

@import url("https://fonts.googleapis.com/css?family=Oswald|Roboto");

html {
  height: 100%;
  background-color: #fff;
  color: #555;
  font-size: 100%;
  font-family: 'Roboto', sans-serif;
  /* body element */ }
  html body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
   }
    html body div {
      box-sizing: border-box;
      width: 100%; }
    html body .scale {
      height: 100% !important; }
    html body .hide {
      height: 0;
      overflow: hidden; }
      html body .hide .content {
        height: 0; }
    html body .show {
      height: 100%; }
      html body .show .content {
        height: 35%; }
    html body .content-wrapper {
      background-color: #fff;
      overflow: hidden;
      /* all elements shoulb be nested inside the layer class */ }
      html body .content-wrapper .layer {
        /* form */
        /* modal */ }
        html body .content-wrapper .layer form {
          margin-top: 50px;
          margin-left: 50px; }
        html body .content-wrapper .layer .modal, html body .content-wrapper .layer .modal .content {
          clear: both;
          background-color: rgba(0, 0, 0, 0.9);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1000;
          /* modal content */ }
          html body .content-wrapper .layer .modal .content {
            width: 25%;
            background: #fff;
            text-align: center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 2px 3px 7px #000;
            -moz-box-shadow: 2px 3px 7px #000;
            -ms-box-shadow: 2px 3px 7px #000;
            -o-box-shadow: 2px 3px 7px #000;
            box-shadow: 2px 3px 7px #000;
            animation-name: slideDown;
            animation-duration: 2s;
             }
@keyframes slideDown {
  from {
    margin-top: -100%; }
  to {
    margin-top: 0%; } }
            html body .content-wrapper .layer .modal .content p.message {
              box-sizing: inherit;
              margin: 0 auto;
              padding: 10% 30px;
              height: 80%;
              overflow: hidden; }
            html body .content-wrapper .layer .modal .content .button {
              height: 20%;
              background-color: #f2f2f2;
              /* button */ }
              html body .content-wrapper .layer .modal .content .button button {
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -ms-border-radius: 3px;
                -o-border-radius: 3px;
                border-radius: 3px;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: thin solid #ccc;
                text-decoration: none;
                margin: 3% auto;
                letter-spacing: 2px;
                min-width: 25%;
                min-height: 50%;
                font-size: 100%;
                font-family: 'Oswald', sans-serif;
                cursor: pointer; }

modal.js

var modal = document.getElementById('myModal');
var form = document.getElementById('notification');
window.addEventListener('load',function(){
  var button = (modal.getElementsByTagName('button')[0]).addEventListener('click', function () {
      location.reload();
    });
  form.addEventListener('submit', function () {
      modal.className = "modal show";
  })
});

[Thomas_41]

Is your Ajax post actually working - is it successful? In your example the data key value pair for your Ajax post is empty.

Also, you are attempting to take action when the FORM is clicked, not the submit button. Shouldn't it be $('#notification').submit vs $('#notification').click?