Level 36
@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/
1 like
Aug 31, 2018
8
Level 1
Extending the app.blade crashing my Date picker used in view.
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">
</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>
<!-- Scripts -->
<script src="http://localhost/public/js/app.js"></script>
Removing the app.blade extends solves the problem.
Level 1
@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.
Level 36
<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>
Level 122
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
Level 1
@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.
Level 1
@Snapey : Yeah, Added 3 files at the same time. Let me edit and repost. Thanks for your response on this.
Level 122
Please format your code by putting 3 backticks ``` on a line before and after each code block (this includes your javascript)
Level 1
Thank you
Please or to participate in this conversation.