Extending the app.blade crashing my Date picker used in view.

Posted 3 months ago by nagendrabhat

Here is the view-source

<!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">

 <!-- CSRF Token -->
    <meta name="csrf-token"     content="XWWmBWBkKxpdQhQR3ikcjWpBtQeXFntXuoUvgZQb">

    <title>Laravel</title>

    <!-- Styles -->
        <link href="http://localhost/public/css/app.css" rel="stylesheet">

    <script>
        window.Laravel =    {"csrfToken":"XWWmBWBkKxpdQhQR3ikcjWpBtQeXFntXuoUvgZQb"};
    </script>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
            <div class="navbar-header">

                <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Branding Image -->
                <a class="navbar-brand" href="http://localhost/public">
                    Laravel
                </a>
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    &nbsp;
                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="nav navbar-nav navbar-right">
                    <!-- Authentication Links -->
                                                <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                 <span class="caret"></span>
                            </a>

                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href="http://localhost/public/logout"
                                        onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
                                        Logout
                                    </a>

                                    <form id="logout-form" action="http://localhost/public/logout" method="POST" style="display: none;">
                                        <input type="hidden" name="_token" value="XWWmBWBkKxpdQhQR3ikcjWpBtQeXFntXuoUvgZQb">
                                    </form>
                                </li>
                            </ul>
                        </li>
                                        </ul>
            </div>
        </div>
    </nav>

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Representative Ordering</title>
<meta charset="utf-8">
<meta name="_token"     content="XWWmBWBkKxpdQhQR3ikcjWpBtQeXFntXuoUvgZQb"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>

<div class="container">
<div class="panel panel-default">
 <div class="panel-heading">
    <button type="button" class="btn btn-info" id="add" value="add">Enter   Sampling</button>
</div>

<div class="panel-body">
 <html>
<head>
<meta charset="utf-8">
<meta name="_token" content="XWWmBWBkKxpdQhQR3ikcjWpBtQeXFntXuoUvgZQb"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
×

Sampling Details

        <div class='col-sm-6'>
          <label> Please select the Date </label>
          <div class="form-group">
           <div class='input-group date pickWeek' id='datetimepicker1' name="date">
               <input type='text' class="form-control" name="date" />
               <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
               </span>
             </div>
           </div>
         </div>
         <!-- Script for picking up the date -->
         <script type="text/javascript">
            $(function () {
              $('.pickWeek').datetimepicker({
                  format: "YYYY-MM-DD",
                  sideBySide: true,
                  daysOfWeekDisabled: [0]
              });
              $('#datetimepicker1').data('DateTimePicker').minDate(moment().startOf('week'));
              $('#datetimepicker1').data('DateTimePicker').maxDate(moment().endOf('week'));
          });
      </script>
        <div class="col-lg-6 col-sm-4">
          <label> Please select the doctor </label>
          <div class="form-group">
            <select name="doctorselected" id="doctorselected" class="form-control">
              <option value="0" disabled="true" selected="true">Please select</option>
                                  <option value="4">k</option>
                                  <option value="5">Nagendra</option>
                                  <option value="6">Test</option>
                                  <option value="7">Test</option>
                                  <option value="8">Pass</option>
                              </select>
          </div>
        </div>
        <!--Sampling details -->
        <div class="panel-body">
          <table class ="table table-hover" id="TableData">
            <caption>Sampling Tablets</caption>
            <thead>
              <th>Tablet name</th>
              <th>Quantity</th>
             </thead>
             <tbody id="tbody"></tbody>
           </table>
        </div>
      </div>
    </div>
    <input type="hidden" name="id" id="id" value="">
    <div class="modal-footer">
      <input type="submit" value="save" id="save" class="btn btn-primary">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </form>
$('#doctorselected').on('change', function(e){ console.log(e); var doctorid = e.target.value; var url = 'http://localhost/public/getdocDetails'; $.ajax({ type : 'get', url : url, data : {'doctorid':doctorid}, success:function(data){ console.log(data); var d = $.parseJSON(data); console.log(d); var output = ''; var $tabledata = $('#tbody'); $tabledata.empty(); $.each(d[0].products.split(","), function (index, product) { output += '' +'' + product + '' + '' + ''+ '' }); $('#tbody').append(output); }, error:function(data) { console.log(data); } }); }); Please confirm the data which you been saved into the database Sampling ID Doctor's name Date Sampling Tablets Quantity Action 24 6 2018-08-23 Sinarest,Globate -G 10,30 Edit Delete 25 5 2018-08-21 Crocin,Sinarest 10,10 Edit Delete 26 7 2018-08-22 Sinarest,Mankind 1,2 Edit Delete 27 5 2018-08-22 Crocin,Sinarest , Edit Delete 28 6 2018-08-22 Sinarest,Globate -G 10,2 Edit Delete 29 7 2018-08-21 Sinarest,Mankind 10,20 Edit Delete 30 5 2018-08-28 Crocin,Sinarest 10,30 Edit Delete 31 6 2018-08-28 Sinarest,Globate -G 10,20 Edit Delete 32 6 2018-08-31 Sinarest,Globate -G 2,3 Edit Delete 33 5 2018-08-29 Crocin,Sinarest 10,20 Edit Delete $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') } }) //----------------- Clicking on Add Customer ------ $('#add').on('click',function(){ $('#save').val('Save'); $('#frmRepresentative').trigger('reset'); $('#Retailer').modal('show'); }); $('#frmRepresentative').on('submit',function(e){ $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') } }) e.preventDefault(); var form = $('#frmRepresentative'); var formData = form.serialize(); console.log(formData); var url='http://localhost/public/StoreSampling'; console.log(url); var state = $('#save').val(); $.ajax({ type : 'post', url : url, data : formData, success:function(data){ var row = '' + '' + data.id + ''+ '' + data.doctorselected+ ''+ '' + data.date+ ''+ '' + data.products + ''+ '' + data.quantity + ''+ ' Edit'+ ' Delete'+ ''; $('#test').append(row); $('#frmRepresentative').trigger('reset'); }, error:function(data){ console.log('Failed'); console.log(data); } }); });
<!-- Scripts -->

<script src="http://localhost/public/js/app.js"></script>

Removing the app.blade extends solves the problem.

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.