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

Published 1 month 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.

Dry7
Dry7
1 month ago (152,030 XP)

@nagendrabhat Perhaps the problem is that the app uses the $ sign as well as the jQuery. try this approach https://api.jquery.com/jquery.noconflict/

nagendrabhat

@Dry7 , Thanks for the response. I am just trying to figure out where can i add noConflict. It would really helpful for me if you can help me out of this.

Dry7
Dry7
1 month ago (152,030 XP)

@nagendrabhat


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.noConflict();
</script>

...

<script type="text/javascript">
            jQuery(function ($) {
              $('.pickWeek').datetimepicker({
                  format: "YYYY-MM-DD",
                  sideBySide: true,
                  daysOfWeekDisabled: [0]
              });
              jQuery('#datetimepicker1').data('DateTimePicker').minDate(moment().startOf('week'));
              jQuery('#datetimepicker1').data('DateTimePicker').maxDate(moment().endOf('week'));
          });
      </script>
Snapey
Snapey
1 month ago (1,037,395 XP)

Did you post lots of different pages all in one lump or does your code really look like that?

Im having real problems working out where to start

If this is multiple layouts and templates, format each with three backticks ``` on a line before and after each and then tell us between each block what we are looking at.

Otherwise it just looks like totally invalid html

nagendrabhat

@Dry7 Thanks for the code review. If i add noConflict after the JQuery, it is solving my Datepicker issue but not letting some other ajax scripts to workout.

nagendrabhat

@Snapey : Yeah, Added 3 files at the same time. Let me edit and repost. Thanks for your response on this.

Snapey
Snapey
1 month ago (1,037,395 XP)

Please format your code by putting 3 backticks ``` on a line before and after each code block (this includes your javascript)

nagendrabhat

Thank you

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