I have included two HTML pages and upon the button click Ajax call should populate page.
And 1 page is opening without any fail upon the 1st button click. But when i click on the 2 button to open the page. It just hangs. Page doesn't load/pagehang. I need to refresh it to get the current page.
Here is the code for calling page
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="btn btn-info" id="replocation" value="replocation">Representative Location</button>
<button type="button" class="btn btn-info" id="managerlocation" value="managerlocation">Manager Entry</button>
</div>
<div class="panel-body">
@include('layouts.newRepresentativeLocation')
@include('layouts.newManagerLocation')
</div>
</div>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
//----------------- Clicking on Representative location Entry ------
$('#replocation').on('click',function(){
$('#frmRepresentativelocation').trigger('reset');
$('#Retailerlocation').modal('show');
});
</script>
<script type="text/javascript">
//----------------- Clicking on Manager location Entry ------
$('#managerlocation').on('click',function(){
$('#frmManagerlocation').trigger('reset');
$('#Retailerlocations').modal('show');
});
</script>
</div>
</body>
Code for the second page which i need to open upon the button (Manager location)
<head>
<meta charset="utf-8">
<meta name="_token" content="{!! csrf_token() !!}"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="modal fade" id="Retailerlocations" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Representative Check IN Details</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="frmRepresentativelocation" name="frmRepresentativelocation" role="form" method="POST" action="StorePlacename">
</form>
</div>
</div>
</div>
</body>
Copied the same code which i have written for the first page.
Just changed model-fade id And form ID.
If i reference the first page upon the click. It works. and if the change the ID its not working. Please help me out.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire