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

Posted 5 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.

Reply to

Use Markdown with GitHub-flavored code blocks.