We Keep Coding

the problem of repeated ajax requests in Laravel5.8

when i click on check-document The ajax request runs But I do not know why this request is repeated, and whenever I close the modal, it opens again
ajax code:
var id;
$('.check-document').click(function(e) {
id = $(this).attr("id-document");
var block = $(this).closest('.card');
e.preventDefault();
$(block).block({
message: '<span class="font-weight-semibold"><i class="icon-spinner4 spinner mr-2"></i> please wait...</span>',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: '10px 15px',
color: '#fff',
width: 'auto',
'-webkit-border-radius': 3,
'-moz-border-radius': 3,
backgroundColor: '#333'
}
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{route('admin.auth.document.show')}}",
type: 'POST',
dataType: 'json',
data: {
id: id,
},
success: function(result) {
if (result.type == 'success') {
$(".card").unblock();
$('#check-document').modal('show');
} else {
$(".card").unblock();
Swal({
title: "error !!",
confirmButtonText: "خب",
buttonsStyling: true,
type: "error"
});
}
},
error: function(xhr) {
//the status is in xhr.status;
//the message if any is in xhr.statusText;
}
});
});
modal :
<div id="check-document" class="modal fade check-document" data-backdrop="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">edit card</h5>
<button type="button" class="close close-modal" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-warning border-0 alert-dismissible any-errors" id="any-errors"
style="display:none">
</div>
</div>
</div>
</div>
</div>
and button:
see

How can I bind an array object to FullCalendar events?

Vue.component('full-calendar', {
template: '<div ref="calendar"></div>',
props: {
tasks: {
type: Array,
required: true
},
newtask: Object
},
watch: {
tasks: function (task) {
// this.tasks.push(task);
// this.cal.calendar.addEvent({
// title: task.title,
// start: task.start,
// end: task.end
// });
$("#addTaskModal").modal('hide');
}},
data () {
return {
cal: null
}
},
methods: {
init:function(){
var self = this;
self.cal = $(self.$refs.calendar);
var args = {
firstDay: 1,
lang: 'en',
header: {
left: 'prev,next today',
center: 'title',
right: 'addTaskButton / dayGridMonth,timeGridWeek,listMonth'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',
plugins: ["interaction", "dayGrid"],
eventLimit: true,
events: this.tasks,
dateClick: function(date)
{
self.$emit('date_clicked', date);
console.log('date clicked');
console.log(this);
},
eventClick: function(event)
{
self.$emit('event_clicked', event);
},
customButtons: {
addTaskButton: {
text: 'Add Task',
click: function() {
$("#addTaskModal").modal('show');
}
}
}
}
if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$emit('event::resized', event);
}
args.eventDrop = function(event)
{
self.$emit('event::dropped', event);
}
}
if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$emit('event::received', event);
}
}
self.cal.calendar = new FullCalendar.Calendar(self.$el,args);
self.cal.calendar.render();
}
},
mounted () {
this.init();
}
})
let vm = new Vue({
el: '#app',
data () {
return {
tasks: [
{
title: 'Event1',
start: '2019-05-10 12:30:00',
end: '2019-05-10 16:30:00'
},
{
title: 'Event2',
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
}
],
editable: false,
selectedDate : moment().format('DD-MM-YYYY'),
task: {
title:null,
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
},
newtask: {}
}
},
methods: {
addTask: function(event){
var d = moment().format('YYYY-MM-DD');
var sel = new Date(this.selectedDate.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
//console.log();
var date = new Date(moment(sel).format('YYYY-MM-DD')+ 'T00:00:00'); // will be in local time
this.tasks.push({
title: this.task.title,
start: date,
end: date
});
this.$nextTick(function () {
// DOM is now updated
// `this` is bound to the current instance
//this.doSomethingElse()
})
},
dateClicked: function(date) {
this.selectedDate = moment(date.date).format('DD-MM-YYYY');
},
eventClicked: function(event) {
this.selectedDate = moment(event.event.start).format('DD-MM-YYYY');
},
showObject: function() {
console.log(this.tasks);
}
}
})
<link href="https://fullcalendar.io/releases/core/4.1.0/main.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.1.0/main.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container mt-5" id="app">
<div>
<div class="row">
<div class="col-md-8">
<full-calendar
v-bind:tasks="tasks"
v-on:date_clicked="dateClicked"
v-on:event_clicked="eventClicked"
:newtask="newtask"
></full-calendar>
</div>
<div class="col-md-4">
<div class="pb-3">
<span id="CurrentDate" class="" style="cursor: pointer;">{{selectedDate}}</span>
<span class="badge badge-primary">{{tasks.length}}</span>
<button #click="showObject">show object</button>
</div>
<table class="table table-condensed">
<tbody v-for="task in tasks">
<tr>
<td>
<input
type="checkbox"
/>
</td>
<td>{{task.title}}</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr v-if="tasks.length==0">
<td colspan="3" class="text-center">No tasks to display</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="NewTaskTitle" placeholder="Enter task name" class="form-control" v-model="task.title" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-sm" #click="addTask">Add</button>
<button data-bind="click: CancelAddNewTask" class="btn btn-seconday btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
Hi everyone,
I am trying to bind an object ‘tasks’ with full calendar events however it is not working.
Please see example above provided. View it in full page please
When you add a task, I am expecting it to be added to the tasks objects and of course to be be binded to the events in full calendar.
Basically, I want to bind tasks array to full calendar events object, so if for example I remove an item should also be removed from the full calendar events
Please let me know if I am doing it wrong . thanks a bunch
[1]:

It should be as simple as updating the FullCalendar when new tasks are sent from the Parent (new Vue) to Child (full-calendar).
In your full-calendar component you should be able to just call the render() method which according to the FullCalendar docs will rerender the calendar if it already exists. In your architecture it is as simple as recalling the init() method. I also moved close modal logic to the appropriate place. This could probably user a bit more refactoriing but this should get you unstuck. Hope it helps.
watch: {
tasks: function (task) {
this.cal.calendar.render();
}
}
https://fullcalendar.io/docs/render
Vue.component('full-calendar', {
template: '<div ref="calendar"></div>',
props: {
tasks: {
type: Array,
required: true
},
newtask: Object
},
watch: {
tasks: function (task) {
this.init()
}
},
data () {
return {
cal: null
}
},
methods: {
init:function(){
var self = this;
self.cal = $(self.$refs.calendar);
var args = {
firstDay: 1,
lang: 'en',
header: {
left: 'prev,next today',
center: 'title',
right: 'addTaskButton / dayGridMonth,timeGridWeek,listMonth'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',
plugins: ["interaction", "dayGrid"],
eventLimit: true,
events: this.tasks,
dateClick: function(date)
{
self.$emit('date_clicked', date);
console.log('date clicked');
console.log(this);
},
eventClick: function(event)
{
self.$emit('event_clicked', event);
},
customButtons: {
addTaskButton: {
text: 'Add Task',
click: function() {
$("#addTaskModal").modal('show');
}
}
}
}
if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$emit('event::resized', event);
}
args.eventDrop = function(event)
{
self.$emit('event::dropped', event);
}
}
if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$emit('event::received', event);
}
}
self.cal.calendar = new FullCalendar.Calendar(self.$el,args);
self.cal.calendar.render();
}
},
mounted () {
this.init();
}
})
let vm = new Vue({
el: '#app',
data () {
return {
tasks: [
{
title: 'Event1',
start: '2019-05-10 12:30:00',
end: '2019-05-10 16:30:00'
},
{
title: 'Event2',
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
}
],
editable: false,
selectedDate : moment().format('DD-MM-YYYY'),
task: {
title:null,
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
},
newtask: {}
}
},
methods: {
addTask: function(event){
var d = moment().format('YYYY-MM-DD');
var sel = new Date(this.selectedDate.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
//console.log();
var date = new Date(moment(sel).format('YYYY-MM-DD')+ 'T00:00:00'); // will be in local time
this.tasks.push({
title: this.task.title,
start: date,
end: date
});
$("#addTaskModal").modal('hide');
this.$nextTick(function () {
// DOM is now updated
// `this` is bound to the current instance
//this.doSomethingElse()
})
},
dateClicked: function(date) {
this.selectedDate = moment(date.date).format('DD-MM-YYYY');
},
eventClicked: function(event) {
this.selectedDate = moment(event.event.start).format('DD-MM-YYYY');
},
showObject: function() {
console.log(this.tasks);
}
}
})
<link href="https://fullcalendar.io/releases/core/4.1.0/main.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.1.0/main.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container mt-5" id="app">
<div>
<div class="row">
<div class="col-md-8">
<full-calendar
v-bind:tasks="tasks"
v-on:date_clicked="dateClicked"
v-on:event_clicked="eventClicked"
:newtask="newtask"
></full-calendar>
</div>
<div class="col-md-4">
<div class="pb-3">
<span id="CurrentDate" class="" style="cursor: pointer;">{{selectedDate}}</span>
<span class="badge badge-primary">{{tasks.length}}</span>
<button #click="showObject">show object</button>
</div>
<table class="table table-condensed">
<tbody v-for="task in tasks">
<tr>
<td>
<input
type="checkbox"
/>
</td>
<td>{{task.title}}</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr v-if="tasks.length==0">
<td colspan="3" class="text-center">No tasks to display</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="NewTaskTitle" placeholder="Enter task name" class="form-control" v-model="task.title" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-sm" #click="addTask">Add</button>
<button data-bind="click: CancelAddNewTask" class="btn btn-seconday btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>

watch: {
tasks: function (tasks) {
this.calendarOptions.events = tasks;
let calendarApi = this.$refs.fullcalendar.getApi();
calendarApi.render();
},
},
... ...
<FullCalendar
ref="fullcalendar"
:options="calendarOptions"
/>

ShieldUI Grids: how to get the row where the doubleclick is fired

I have a search mask and I would like that when a double click on a line is made, the code of the selected line is returned.
I am using the shieldGrid from shieldui.
How can I get the selected row?
I try to retrieve the selected row but it still empty.
#using TheBetterWayStoreHandler.Resources
#model TheBetterWayStoreHandler.Models.CustomerGroupModel
#{
ViewBag.Title = "Ricerca Clienti";
Layout = "~/Views/Shared/_PagesLayout.cshtml";
}
<form id="searchCustomerForm" action='#Html.Raw(#Url.Action("SearchSelection", "Customer"))?selectedCustomer=' + selectedCustomer.value method="post">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#Url.Action("Index", "Dashboard")">The Better Way - #ViewBag.Title</a>
<ul class="navbar-nav">
<li class="nav-item">
<button type="submit" class="btn btn-outline-success" data-toggle="tooltip" title="Salva" data-placement="bottom" value="Input Button">
<span class="fa fa-hdd fa-lg" aria-hidden="true"></span>
</button>
</li>
</ul>
</nav>
<div class="container-fluid body-content" style="height: 100%">
<input id="selectedCustomer" name="selectedCustomer" type="hidden" value="">
<div id="customerSearchGrid"></div>
</div>
</form>
<script>
var selectedCustomerVar = "";
jQuery(function ($) {
$("#customerSearchGrid").shieldGrid({
dataSource: {
remote: {
read: "#Session["ApiPath"]" + "GetCustomerSearch?searchString=" + "#Session["SearchString"]",
}
},
rowHover: true,
columns: [
{ field: "CustomerCode", width: "80px", title: "#Resources.Tb_CustomerCode", type: String },
{ field: "CustomerDescription", title: "#Resources.Tb_CustomerDescription", type: String }
],
sorting: {
multiple: true
},
scrolling: true,
height: "700px",
selection: {
type: "row",
multiple: false,
toggle: true
},
editing: {
enabled: false
},
events: {
selectionChanged: function (e) {
var selected = e.target.contentTable.find(".sui-selected");
if (selected.length > 0) {
selectedCustomer.value = selected[0].cells[0].textContent;
}
else {
selectedCustomer.value = "";
}
},
ondblClickRow: function(rowId) {
var rowData = jQuery(this).getRowData(rowId);
var customerCode = rowData['CustomerCode'];
location.href = '#Url.Action("SearchSelection", "Customer")?selectedCustomer=' + customerCode;
}
}
});
});
$("#customerSearchGrid").dblclick(function () {
var sel = $("#customerSearchGrid").swidget().selectedRowIndices();
alert(sel);
window.searchCustomerForm.submit();
});
the selectedCustomer is empty, and the sel variable is empty too ...
Thanks.

Probably the dblclick event is raised before the selection is handled...
You can try using the selectionChanged event for handling the selection change.

jqgrid edit button link not working when i use onSelectRow event

i am using jqgrid one grid contain master data and other grid contain detail data , when i click master grid row detail will show in detail grid (Master detail) so i am using onselectRow event i want to use edit button link in master when i use previous code then onselectrow event not fire and data not show in master grid , and this code working good in master detail grid . kindly expert tell what is the problem when i use edit button link in master grid then why event not fire .
Jqgrid
jQuery(document).ready(function ($) {
// master grid
var $grid = $("#jqGrid");
$grid.jqGrid({
url: '#Url.Action("RequisitionGrid")',
datatype: "json",
jsonReader: { id: 'Req_ID' },
colModel: [
{ name: 'Req_ID', index: 'Req_ID', label: 'Req ID', hidden: true, editable: true, editable: "disabled", align: "center", width: 12 },
{ name: 'Comp_ID', index: 'Comp_ID', label: 'Comp ID', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 2 },
{ name: 'GL_Year', index: 'GL_Year', label: 'GL Year', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 40 },
{
name: 'ReqDate', index: 'ReqDate', label: 'Date', width: 3,
editable: true, edittype: 'text',
editoptions: {
size: 10, maxlengh: 10,
dataInit: function (element) {
$(element).datepicker({ dateFormat: 'yy/mm/dd' })
}
}
},
{ name: 'Job', index: 'Job', label: 'Job', width: 15, editable: true },
{ name: 'ApprovedBy', index: 'ApprovedBy', label: 'Approved by', width: 7, editable: true },
{ name: 'IsApproved', index: 'IsApproved', hidden: true, label: 'Approved', width: 10, editable: true },
{
name: 'Req_ID', label: '', search: false, width: '3', formatter: function (cellvalue, options, rowObject, rowdata) {
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqMainUpdateMethod(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
}
},
],
height: 250,
shrinkToFit: true,
search: true,
autowidth: true,
rowNum: 20,
viewrecords: true,
page: 1,
scroll: 1,
viewrecords: true,
rownumbers: true, // show row numbers
rownumWidth: 25,
navOptions: {
reloadGridOptions: { fromServer: true }
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
reloadGridOptions: {
fromServer: true
}
},
forceClientSorting: true,
loadonce: true,
caption: 'Requisition Main',
emptyrecords: 'No Records are Available to Display',
onSelectRow: function (ids) {
if (ids != null) {
var data = $("#jqGrid").getRowData(ids);
$("#jqGridDetails").jqGrid('setGridParam', { url: "/Home/RequisitionDetailGrid/" + data.Req_ID, datatype: 'json' });
$("#jqGridDetails").jqGrid('setCaption', 'Requisition Detail For :: <b style="color: Red">' + data.Job + '</b>');
$("#jqGridDetails").trigger("reloadGrid");
}
},
onSortCol: clearSelection,
onPaging: clearSelection,
pager: "#jqGridPager"
});
});
// detail grid
$("#jqGridDetails").jqGrid({
url: '#Url.Action("RequisitionDetailGrid")',
mtype: "GET",
datatype: "json",
page: 1,
colModel: [
{ key: true, name: 'Req_ID_Det', index: 'Req_ID_Det', label: 'Req Det ID', hidden: true, editable: true, align: "center", width: 12 },
{ name: 'ReqNo', index: 'ReqNo', label: 'Req No', hidden: true, align: "left", width: 40 },
{ name: 'SrNo', index: 'SrNo', label: 'Sr No', align: "left", width: 3 },
{ name: 'GL_Year', index: 'GL_Year', hidden:true,editable:true, label: 'GL_Year', width: 5 },
{ name: 'ItemDesc', index: 'ItemDesc', label: 'Item Desciption', width: 20 },
{ name: 'Qty', index: 'Qty', label: 'Qty', width: 2 },
{ name: 'Remarks', index: 'Remarks', label: 'Remarks', width: 10 },
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodFormatter(cellvalue, options, rowObject);
}
},
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodDelete(cellvalue, options, rowObject);
}
},
],
autowidth: true,
shrinkToFit: true,
navOptions: {
reloadGridOptions: { fromServer: true }
},
rowNum: 5,
loadonce: true,
height: '100',
viewrecords: true,
caption: 'Requisition Detail',
emptyrecords: 'No Records are Available to Display',
pager: "#jqGridDetailsPager"
});
function clearSelection() {
jQuery("#jqGridDetails").jqGrid('setGridParam', { url: "RequisitionDetailGrid", datatype: 'json' }); // the last setting is for demo purpose only
jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid:: none');
jQuery("#jqGridDetails").trigger("reloadGrid");
}
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:getbyID(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
function MethodDelete(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqDelete(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Delete</a>';
}
HTML
<!--Requsitition Detail Update Model-->
<div class="modal fade" id="ReqMainUpdateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Update Requisition Main</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<form id="NewOrderForm">
<div class="modal-body">
<div class="form-row">
<div class="col" id="Req_ID">
<div class="md-form">
#Html.TextBoxFor(m => m.Req_ID, new { #class = "form-control mr-sm-3", #id = "txtReqIDmain", Required = true })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<!-- Requisition Date-->
<label for="lblReqDate">Req Date</label>
<div class="md-form">
#Html.TextBoxFor(m => m.ReqDate, new { #class = "form-control mr-sm-3", #id = "txtReqDateMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblJOB"> JOB</label>
<div class="md-form">
#Html.TextBoxFor(m => m.Job, new { #class = "form-control mr-sm-3", #id = "txtReqjOBMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApprovedBy"> Approved By </label>
<div class="md-form">
#Html.TextBoxFor(m => m.Approvedby, new { #class = "form-control mr-sm-3", #id = "txtApprovedByMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApproved"> Approved </label>
<div class="md-form">
#Html.CheckBoxFor(m => m.IsApproved, new { #class = "form-control mr-sm-3", #id = "txtIsApprovedMain" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="ReqMainUpdate" type="submit" class="btn btn-danger" onclick="RequisitionDetail_Update();">Update Record</button>
</div>
</div>
</form>
</div>
<!--/.Content-->
</div>
</div>

Javascript runtime error: 'function' is undefined

It says my function is undefined yet it is clearly defined below the body of the program's content.
<button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">
#*Add*#
function CmdBranchAdd_OnClick() {
alert('Hi');
#*$('#BranchEdit').modal({
show: true,
backdrop: false
});
document.getElementById('BranchEdit-BranchCode').value = "";
document.getElementById('BranchEdit-Branch').value = "";
document.getElementById('BranchEdit-CompanyID').value = "";*#
}
at the moment, the main body of the function has been commented out to test if it can connect to the function. but when run and pressed, it return a javarscript runtime error stating that the function in the button in undefined.
Edit #1:
Sorry, copied wrong line of code xD Forgive me
<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>
while I'm at it, here are the loaded scripts - the function was originally supposed to call for a modal but It should just alert for now. But it's doesn't.
<script src="~/js/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript"> </script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />
Edit #2: Here's the entire code block to see if it has any problems.
#{
ViewBag.Title = "Branch";
}
<!-- Script Linkings -->
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />
#*<link href="/css/bootstrap.min.css" rel="stylesheet" /> --- this S.O.B will make things white. Big "NO, NO" *#
#*List*#
<div id="DivEvents">
<div class="container">
<div class="row">
<div class="col-lg-11">
<br /><br /><br />
<h2 style="margin-bottom:5px; margin-top:5px;">Branches</h2>
<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div id="BranchGrid" class="grid"></div>
</div>
</div>
<br />
<div class="row">
<div class="btn-group col-md-7" id="naviagtionPageEvent">
<button type="button" class="btn btn-default" id="btnMoveToFirstPageEvent">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" class="btn btn-default" id="btnMoveToPreviousPageEvent">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
<button type="button" class="btn btn-default" disabled style="width:100px" id="btnCurrentPageEvent"></button>
<button type="button" class="btn btn-default" id="btnMoveToNextPageEvent">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
<button type="button" class="btn btn-default" id="btnMoveToLastPageEvent">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
</div>
</div>
#*Edit Detail*#
<div class="modal fade" id="BranchEdit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">Branch Edit</h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>Branch Code</dt>
<dd>
<input class="form-control" id="BranchEdit-BranchCode" type="text" />
</dd>
<dt>Branch</dt>
<dd>
<input class="form-control" id="BranchEdit-Branch" type="text" />
</dd>
<dt>Company ID</dt>
<dd>
<input class="form-control" id="BranchEdit-CompanyID" type="text" />
</dd>
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">
Ok
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="CmdBranchEditCancel">
Cancel
</button>
</div>
</div>
</div>
</div>
#*Loading*#
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="Loading..." aria-hidden="true">
<div class="modal-dialog" style="width: 220px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Loading...</h4>
</div>
<div class="modal-body">
<img src="/img/progress_bar.gif" />
</div>
</div>
</div>
</div>
#*Module*#
<script type="text/javascript">
var Branches;
var BranchGrid;
var btnFirstPageEvent;
var btnPreviousPageEvent;
var btnNextPageEvent;
var btnLastPageEvent;
var btnCurrentPageEvent;
#*Edit*#
function CmdBranchEdit_OnClick() {
Branches.editItem(Branches.currentItem);
$('#BranchEdit').modal({
show: true,
backdrop: false
});
var Branch = Branches.currentEditItem;
document.getElementById('BranchEdit-BranchCode').value = Branch.BranchCode ? Branch.BranchCode : '';
document.getElementById('BranchEdit-Branch').value = Branch.Branch ? Branch.Branch : '';
document.getElementById('BranchEdit-CompanyID').value = Branch.CompanyID ? Branch.CompanyID : '';
}
#*Add*#
$(document).ready(function(){
function CmdBranchAdd_OnClick() {
alert('Hi');
#*$('#BranchEdit').modal({
show: true,
backdrop: false
});
document.getElementById('BranchEdit-BranchCode').value = "";
document.getElementById('BranchEdit-Branch').value = "";
document.getElementById('BranchEdit-CompanyID').value = "";*#
}
}
#*Delete*#
function CmdBranchDelete_OnClick() {
Branches.editItem(Branches.currentItem);
var Id = Branches.currentEditItem.Id;
var BranchDescription = Branches.currentEditItem.Branch;
if (confirm("Delete " + BranchDescription + "?") == true) {
$.ajax({
type: "DELETE",
url: "/api/DeleteEvent/" + Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
statusCode: {
200: function () {
window.location.reload();
},
404: function () {
alert("Not found");
},
400: function () {
alert("Bad request");
}
}
});
}
}
#*Save Edit*#
function CmdBranchEditOk_OnClick() {
if (confirm("Save Event?") == true) {
var Branch = new Object();
Branch.BranchCode = document.getElementById('BranchEdit-BranchCode').value;
Branch.Branch = document.getElementById('BranchEdit-Branch').value;
Branch.CompanyID = document.getElementById('BranchEdit-CompanyID').value;
var data = JSON.stringify(Event);
// Add New
if (Branch.Id == 0) {
$.ajax({
type: "POST",
url: "/api/AddEvent",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
success: function (id) {
if (id > 0) {
window.location.reload();
} else {
alert("Not added");
}
}
});
// Edit
} else {
$.ajax({
type: "PUT",
url: "/api/UpdateEvent/" + Branch.Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
statusCode: {
200: function () {
window.location.reload();
},
404: function () {
alert("Not found");
},
400: function () {
alert("Bad request");
}
}
});
}
}
}
#*List Functions*#
function GetBranches() {
var Branches = new wijmo.collections.ObservableArray();
$('#loading').modal('show');
$.ajax({
url: '/api/Event',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (Results) {
$('#loading').modal('hide');
if (Results.length > 0) {
for (i = 0; i < Results.length; i++) {
Branches.push({
EditId: "<button class='btn btn-primary btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchEdit_OnClick()'>Edit</button>",
DeleteId: "<button class='btn btn-danger btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchDelete_OnClick()'>Delete</button>",
Id: Results[i]["Id"],
BranchCode: Results[i]["BranchCode"],
BranchDescription: Results[i]["Branch"],
CompanyID: Results[i]["CompanyID"],
});
}
} else {
alert("No data.");
}
}
}).fail(
function (xhr, textStatus, err) {
alert(err);
}
);
return Branches;
}
#*Delete*#
function DeleteBranch(Id) {
$.ajax({
type: "DELETE",
url: "/api/DeleteEvent/" + Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { Id: BranchId },
success: function (response) {
alert("Branch Deleted.");
window.location.reload();
},
failure: function (response) {
alert("Error - " + response.d);
},
error: function (e) { }
});
window.location.reload();
}
function UpdateNavigateButtonsEvent() {
if (Branches.pageSize <= 0) {
document.getElementById('naviagtionPageEvent').style.display = 'none';
return;
}
document.getElementById('naviagtionPageEvent').style.display = 'block';
if (Branches.pageIndex === 0) {
btnFirstPageEvent.setAttribute('disabled', 'disabled');
btnPreviousPageEvent.setAttribute('disabled', 'disabled');
btnNextPageEvent.removeAttribute('disabled');
btnLastPageEvent.removeAttribute('disabled');
}
else if (Branches.pageIndex === (Branches.pageCount - 1)) {
btnFirstPageEvent.removeAttribute('disabled');
btnPreviousPageEvent.removeAttribute('disabled');
btnLastPageEvent.setAttribute('disabled', 'disabled');
btnNextPageEvent.setAttribute('disabled', 'disabled');
}
else {
btnFirstPageEvent.removeAttribute('disabled');
btnPreviousPageEvent.removeAttribute('disabled');
btnNextPageEvent.removeAttribute('disabled');
btnLastPageEvent.removeAttribute('disabled');
}
btnCurrentPageEvent.innerHTML = (Branches.pageIndex + 1) + ' / ' + Branches.pageCount;
}
$(document).ready(function () {
btnFirstPageEvent = document.getElementById('btnMoveToFirstPageEvent');
btnPreviousPageEvent = document.getElementById('btnMoveToPreviousPageEvent');
btnNextPageEvent = document.getElementById('btnMoveToNextPageEvent');
btnLastPageEvent = document.getElementById('btnMoveToLastPageEvent');
btnCurrentPageEvent = document.getElementById('btnCurrentPageEvent');
Branches = new wijmo.collections.CollectionView(GetBranches());
BranchGrid = new wijmo.grid.FlexGrid('#BranchGrid');
BranchGrid.initialize({
columns: [
{
"header": "Edit",
"binding": "EditId",
"width": 60,
"allowSorting": false,
"isContentHtml": true
},
{
"header": "Delete",
"binding": "DeleteId",
"width": 60,
"allowSorting": false,
"isContentHtml": true
},
{
"header": "Branch Code",
"binding": "BranchCode",
"allowSorting": false,
"width": "4*"
},
{
"header": "Company ID",
"binding": "CompanyID",
"allowSorting": false,
"width": 80
},
{
"header": "Branch",
"binding": "BranchDescription",
"allowSorting": false,
"width": "4*"
},
],
autoGenerateColumns: false,
itemsSource: Brances,
isReadOnly: true,
selectionMode: wijmo.grid.SelectionMode.Row
});
BranchGrid.trackChanges = true;
Branches.pageSize = 15;
});
UpdateNavigateButtonsEvent();
// Page Button Events
btnFirstPageEvent.addEventListener('click', function () {
Branches.moveToFirstPage();
UpdateNavigateButtonsEvent();
});
btnPreviousPageEvent.addEventListener('click', function () {
Branches.moveToPreviousPage();
UpdateNavigateButtonsEvent();
});
btnNextPageEvent.addEventListener('click', function () {
Branches.moveToNextPage();
UpdateNavigateButtonsEvent();
});
btnLastPageEvent.addEventListener('click', function () {
Branches.moveToLastPage();
UpdateNavigateButtonsEvent();
});
});
</script>
Tried Rao's suggestion - still nothing :( This is starting to be a pain in the ass..)

You have code for a method called
CmdBranchAdd_OnClick
But the element references a function called
CmdBranchEdit_OnClick

move this line
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
to the top of other js files.
Also you have two jquery.js file included. Only choose one which is the best fixing your application.
<script src="~/js/jquery.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

Few Suggestions:
Try wrapping your function inside as below
$(document).ready(function(){
function CmdBranchAdd_OnClick() {
alert('Hi');
}
});
then as #user86745458 said remove either jquery.js or jquery-latest.min.js reference and keep your js files at the top of all other links!!
Try changing type of button from submit to just button.