We Keep Coding

Microsoft JScript runtime error 'document is undefined' in PHP

I'm developing a website which access the camera and takes the photo and upload it to server using PHP while going through this I got an error saying
Error: 'document' is undefined
Code: 800A1391
Source: Microsoft JScript runtime error
But this works good on mac and the problem arises in windows
main.js
$(document).ready(function() {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
$('#accesscamera').on('click', function() {
Webcam.reset();
Webcam.on('error', function() {
$('#photoModal').modal('hide');
swal({
title: 'Warning',
text: 'Please give permission to access your webcam',
icon: 'warning'
});
});
Webcam.attach('#my_camera');
});
$('#takephoto').on('click', take_snapshot);
$('#close').on('click', function(){
console.log('close');
Webcam.reset();
});
$('#retakephoto').on('click', function() {
$('#my_camera').addClass('d-block');
$('#my_camera').removeClass('d-none');
$('#results').addClass('d-none');
$('#takephoto').addClass('d-block');
$('#takephoto').removeClass('d-none');
$('#retakephoto').addClass('d-none');
$('#retakephoto').removeClass('d-block');
$('#uploadphoto').addClass('d-none');
$('#uploadphoto').removeClass('d-block');
});
$('#photoForm').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'photoUpload.php',
type: 'POST',
data: new FormData(this),
contentType: false,
processData: false,
success: function(data) {
if(data == 'success') {
Webcam.reset();
$('#my_camera').addClass('d-block');
$('#my_camera').removeClass('d-none');
$('#results').addClass('d-none');
$('#takephoto').addClass('d-block');
$('#takephoto').removeClass('d-none');
$('#retakephoto').addClass('d-none');
$('#retakephoto').removeClass('d-block');
$('#uploadphoto').addClass('d-none');
$('#uploadphoto').removeClass('d-block');
$('#photoModal').modal('hide');
swal({
title: 'Success',
text: 'Photo uploaded successfully',
icon: 'success',
buttons: false,
closeOnClickOutside: false,
closeOnEsc: false,
timer: 2000
})
}
else {
swal({
title: 'Error',
text: 'Something went wrong',
icon: 'error'
})
}
}
})
})
})
function take_snapshot()
{
//take snapshot and get image data
Webcam.snap(function(data_uri) {
//display result image
$('#results').html('<img src="' + data_uri + '" class="d-block mx-auto rounded"/>');
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
$('#photoStore').val(raw_image_data);
});
$('#my_camera').removeClass('d-block');
$('#my_camera').addClass('d-none');
$('#results').removeClass('d-none');
$('#takephoto').removeClass('d-block');
$('#takephoto').addClass('d-none');
$('#retakephoto').removeClass('d-none');
$('#retakephoto').addClass('d-block');
$('#uploadphoto').removeClass('d-none');
$('#uploadphoto').addClass('d-block');
}
My php file is
<div>
<form method="post" action="submit.php">
<input id="name" name="name" value="">
<input type="submit">
</form>
</div>
<div class="modal fade" id="photoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Capture Photo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
<div id="my_camera" class="d-block mx-auto rounded overflow-hidden"></div>
</div>
<div id="results" class="d-none"></div>
<form method="post" id="photoForm">
<input type="hidden" id="photoStore" name="photoStore" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning mx-auto text-white" id="takephoto">Capture Photo</button>
<button type="button" class="btn btn-warning mx-auto text-white d-none" id="retakephoto">Retake</button>
<button type="submit" class="btn btn-warning mx-auto text-white d-none" id="uploadphoto" form="photoForm">Upload</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="./plugin/sweetalert/sweetalert.min.js"></script>
<script src="./plugin/webcamjs/webcam.min.js"></script>
<script src="main.js"></script>
when I click the button submit the error occurs the photo upload all works fine but while submitting the 1st form it arises an error.
Is there any solution to solve this issue without npm at max.

Open dialog after closing another - populate dropdown with ajax call - jquery

I want to show a dialog with jquery after another dialog is closed.
Here is the first dialog
When I press the Close button another dialog needs to be showed. This dialog which has a drop down, and I need to populate this dropdown with ajax call.
The problem is that I keep get this error on console: TypeError: $(...).get(...) is undefined. and the method from the controller is never reached.
This is the code that I'm using:
<script type="text/javascript">
$("#saveGeometryType_dialog").draggable({ handle: ".modal-header" });
function saveElements(options) {
}
function closeDialog(options) {
var $temp = $("<input/>", { id: 'temp' });
//$temp.val($(options.element).text()).select();
//document.execCommand("copy");
//var title = $("#geometry-dialog").dialog("option", "title");
//console.log($temp);
$temp.remove();
var title = "Linestring";
$('#saveGeometryType_dialog').modal('show');
$.ajax({
type: "POST",
url: "PlotDescriptions/GetCodes/" + title,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#ddlCode").get(0).options.length = 0;
$("#ddlCode").get(0).options[0] = new Option("Select code", "-1");
$.each(msg.d, function(index, item) {
$("#ddlCode").get(0).options[$("#ddlCode").get(0).options.length] = new Option(item.Display, item.Value);
});
},
error: function() {
$("#ddlCode").get(0).options.length = 0;
alert("Failed to load names");
}
});
}
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="saveGeometryType_dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Save geometry</h4>
</div>
<div class="modal-body">
<p></p>
<div class="saveGeometryType-header">
<div class="row">
<div class="col-md-4"> Cod </div>
<div class="col-md-4"> <select id="ddlCod">
</select> </div>
</div>
</div>
</div>
<div class="modal-footer">
<button onclick="saveElements({ 'element': '#saveGeometryType_dialog .modal-body > p', 'target': 'saveGeometryType_dialog .modal-body' });$('#saveGeometryType_dialog').modal('hide');" type="button" class="btn btn-primary">Save</button>
<button onclick="closeDialog({ 'element': '#saveGeometryType_dialog .modal-body > p', 'target': 'saveGeometryType_dialog .modal-body' });$('#saveGeometryType_dialog').modal('hide');" type="button" class="btn btn-default">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is the controller method that I need to reach. The parameter from the method should be the title from the first dialog, in this case the Linestring.:
[WebMethod]public static ArrayList GetCodes(string geometryType)
{
return new ArrayList()
{
new { Value = 1, Display = "Code1" },
new { Value = 2, Display = "Code2" }
};
}
Any help is appreciated.

How to use javascript to trigger a modal one after another

I want to use the code below to accomplish the following flow:
validate user's input (form in a modal pop up)
if no error, trigger another modal to show something. The content of the result modal comes from an ajax call.
The problem is the result modal never shows.
Edited: The problem seems in relation to e.preventDefault() as I tested with another version which makes the ajax call in $("#frmSchPkg").submit(function(e).
It works with preventDefefalut and doesn't work if preventDefault() is missing.
Perhaps the question is how to add preventDefault() to this posted javascript.
$.validate({
form: '#frmSchPkg',
onSuccess: function($form) {
var pkgnum12 = $("#pkgnum12").val();
var dataString = 'pkgnum12=' + pkgnum12;
$.ajax({
type: "GET",
url: "admin/sch_pkg_c.php",
data: dataString,
cache: false,
async: false,
success: function(data) {
console.log(data);
alert(data); // able to see data being expected. so the ajax call is successful
$('#text-modal').modal('hide'); // tried to comment this out for testing, 1st modal vanishes anyway at this point
$('#LookupResultModal').find('.ct_schpkgresult').html(data);
$('#LookupResultModal').modal('show');
},
error: function(err) {
console.log(err);
}
});
}
});
<div class="modal fade text-modal" id="text-modal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm2">
<div class="modal-content">
<div class="modal-header bg-shop">
<a class="close-modal" href="#" data-dismiss="modal">
<span class="menu-icon"></span>
</a>
<h2 class=""><b>Search</b></h2>
</div>
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSchPkg">
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
<input class="form-control" name="pkgnum12" id="pkgnum12" type="text" placeholder="enter tracking number" data-validation="number length" data-validation-length="12-12" />
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<button name="btnfind" id="btnfind" type="submit" class="clsfind btn btn-store btn-block">
<i class="fa fa-search"></i> Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="LookupResultModal" tabindex="-1" role="dialog" aria-labelledby="LookupResultModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header bg-shop">
<a class="close-modal" href="#" data-dismiss="modal">
<span class="menu-icon"></span>
</a>
<h2 class=""><b>Search Result</b></h2>
</div>
<div class="ct_schpkgresult"></div>
</div>
</div>
</div>

The JS script should be like
Ajax method should be inside validation onSuccess: function($form) { }
First modal hide and 2nd modal show should be in side Ajax method success: function(data) { }
$.validate({
form: '#frmSchPkg',
onSuccess: function($form) {
var pkgnum12 = $("#pkgnum12").val();
var dataString = 'pkgnum12=' + pkgnum12;
alert(dataString);
$.ajax({
type: "POST",
url: "admin/sch_pkg_c.php",
data: dataString,
cache: false,
success: function(data) {
console.log(data);
$('#text-modal').modal('hide'); //If all good hide first modal
$('#LookupResultModal').modal('show'); //show 2nd modal
$('#LookupResultModal').find('.ct_schpkgresult').html(data); //show response in 2nd modal
},
error: function(err) {
console.log(err);
}
});
}
});

I found the following solution:
$.validate({
form: '#frmSchPkg',
onSuccess: function(form) {
return $.sendFormDataViaAJAX(form);
}
});
$.sendFormDataViaAJAX = function(form) {
var pkgnum12 = $("#pkgnum12").val();
var dataString = 'pkgnum12=' + pkgnum12;
$.ajax({
type: "GET",
url: "admin/sch_pkg_c.php",
data: dataString,
cache: false,
async: false,
success: function(data) {
console.log(data);
$('#text-modal').modal('hide');
$('#LookupResultModal').find('.ct_schpkgresult').html(data);
$('#LookupResultModal').modal('show');
},
error: function(err) {
console.log(err);
}
});
return false;
};

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.

jquery daterangepicker not working in modal

I have a modal popup (from bootstrap) that opens and contains a text input with daterangepicker, but the daterangepicker does not work (i see nothing when i click on the textbox) and i see no errors in the console.
Here is the input:
<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
<input type="text" class="datePicker ui-rangepicker-input search-query input-small"
id="lastModifiedDateFilter" />
</div>
<div class="modal-footer">
#DossierReceipts.Cancel
</div>
Here is the javascript to create the daterangepicker:
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
And here is the javascript to open the popup:
$("#divCreateReceipt").modal("show");
Does anyone know why does this not work?
Thanks
UPDATE
Here is the complete code for the popup window:
#{
ViewBag.Title = "Dosare";
}
#using ExpertExecutor.Resources.Dossier
#section leftMenu{
#Html.Partial("_LeftMenu")
}
#Scripts.Render("~/bundles/daterangepicker")
#Scripts.Render("~/bundles/watermark")
#Styles.Render("~/Content/daterangepicker")
<script src="#Url.Content("~/Scripts/jquery.watermark.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("/Scripts/jquery.jqGrid.fluid.js")"></script>
#Html.Hidden("redirectUrl", (string)ViewBag.RedirectUrl)
<div class="form-search form-inline alert alert-info">
<fieldset>
<legend>#Index.FiltersCaption</legend>
<dl>
<dd>
<span>#Index.DossierColumn</span>
<input type="text" id="dossierFilter" class="search-query input-xxlarge" />
</dd>
<dd>
<span>#Index.DossierStatusColumn</span>
#Html.DropDownList("dossierStatusFilter", (List<SelectListItem>)ViewData["DossierStatuses"], new { #class = "input-medium" })
<span>#Index.LastModifiedDateColumn</span>
<input type="text" class="datePicker ui-rangepicker-input search-query input-small"
id="lastModifiedDateFilter" />
<span>#Index.LastOperatorColumn</span>
#Html.DropDownList("lastOperatorFilter", (List<SelectListItem>)ViewData["Users"])
</dd>
<dd>
<input type="button" class="btn btn-info" value="#Index.Search" onclick="applyFilter();"/>
<input type="button" class="btn btn-info" value="#Index.ClearFilter" onclick="clearFilter();" />
</dd>
</dl>
</fieldset>
</div>
<div id="dossiersGridWrapper" class="row-fluid">
<table id="dossiersGrid"></table>
<div id="dossiersGridPager"></div>
</div>
#if (!ViewBag.NoActions)
{
#Index.CreateDossier
}
<script type="text/javascript">
$('#dossierFilter').watermark('#Index.WatermarkSearchDossier');
$.jgrid.defaults.loadtext = '#Index.GridLoading';
var mvcJqGrid = {
customDblClick: "#ViewBag.customDblClick",
actions: {
buttonize: function (cellvalue, options, rowobject) {
return '<a onclick="return mvcJqGrid.actions.edit(\'' + options.rowId + '\')" href="#" title="Editare dosar"><i class="ui-icon ui-icon-pencil" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.costs(\'' + options.rowId + '\')" href="#" title="Cheltuieli dosar"><i class="ui-icon ui-icon-cart" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.imobil(\'' + options.rowId + '\')" href="#" title="Bunuri imobile"><i class="ui-icon ui-icon-home" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.mobil(\'' + options.rowId + '\')" href="#" title="Bunuri mobile"><i class="ui-icon ui-icon-suitcase" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.open(\'' + options.rowId + '\')" href="#" title="Open Dossier"><i class="ui-icon ui-icon-folder-open" style="display:inline-block"></i></a>';
},
edit: function (id) {
window.open('#Url.Action("EditDossier", "Dossier")?id=' + id, "_self");
return false;
},
costs: function (id) {
window.open('#Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('#Url.Action("DossierCosts", "Dossier")?id=' + id), "_self");
return false;
},
imobil: function (id) {
window.open('#Url.Action("OpenRedirect", "Dossier")?idDossier=' + id+'&strUrl='+encodeURI('#Url.Action("ImovableList", "Asset")?idDossier=' + id), "_self");
return false;
},
mobil: function (id) {
window.open('#Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('#Url.Action("MovableList", "Asset")?idDossier=' + id), "_self");
return false;
},
open: function (id) {
if (mvcJqGrid.customDblClick.length > 0 && typeof (window[mvcJqGrid.customDblClick]) == "function") {
return window[mvcJqGrid.customDblClick](id);
}
$.getJSON('#Url.Action("OpenDossier", "Dossier")' + "?id=" + id, function (data) {
if (data && data.success) {
var redirectUrl = $("#redirectUrl").val();
if (redirectUrl) {
window.open(redirectUrl, "_self");
} else {
window.location.reload();
}
} else {
alert("#Index.ErrorOpenDossier");
}
});
return false;
}
}
};
$("#dossiersGrid").jqGrid({
url: '#Url.Action("DossiersGridData", "Dossier")',
datatype: 'json',
mtype: 'POST',
colModel: [
{ name: "#Index.CompletedColumn", sortable: false, editable: false, index: "Completed" },
{ name: "#Index.DossierColumn", sortable: true, editable: false, index: "Dossier" },
{ name: "#Index.DossierStatusColumn", sortable: true, editable: false, index: "DossierStatus" },
{ name: "#Index.LastModifiedDateColumn", sortable: true, editable: false, index: "LastModifiedDate" },
{ name: "#Index.LastOperatorColumn", sortable: true, editable: false, index: "LastOperator" },
{ name: "#Index.CreditorsColumn", sortable: false, editable: false, index: "Creditors" },
{ name: "#Index.DebtorsColumn", sortable: false, editable: false, index: "Debtors" },
#if (!ViewBag.NoActions)
{
#:{ name: "#Index.Action", sortable: false, editable: false, index: "Action", formatter: mvcJqGrid.actions.buttonize }
}
],
viewrecords: true,
postData: {
dossierFilter: function () { return $("#dossierFilter").val(); },
dossierStatusFilter: function () { return $("#dossierStatusFilter").val(); },
lastModifiedDateFilter: function () { return $("#lastModifiedDateFilter").val(); },
lastOperatorFilter: function () {
return $("#lastOperatorFilter").val();
}
},
pager: "#dossiersGridPager",
rowNum: 10,
caption: "Lista dosare",
autowidth: true,
rowList: [10, 15, 20, 50],
emptyrecords: 'No record Found',
height: '100%',
ondblClickRow: mvcJqGrid.actions.open
});
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
function applyFilter() {
$("#dossiersGrid").trigger("reloadGrid");
}
function clearFilter() {
$('#dossierFilter').val("");
$("#dossierStatusFilter").val("");
$("#lastModifiedDateFilter").val("");
$("#lastOperatorFilter").val("");
$("#dossiersGrid").trigger("reloadGrid");
}
if (leftMenu) {
leftMenu.setContext('dossier-list help-dossier');
}
var resizeDossiersGrid = function () {
$("#dossiersGrid").fluidGrid({ example: "#dossiersGridWrapper", offset: 0 });
};
$(window).on('resize', resizeDossiersGrid);
$("#dossiersGrid").on("jqGridGridComplete", resizeDossiersGrid);
</script>
And here is the complete code for the calling page:
#using ExpertExecutor.DataLayer.Models
#using ExpertExecutor.Resources.Cost
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section leftMenu{
#Html.Partial("_LeftMenu")
}
#section head
{
#Scripts.Render("~/bundles/jqueryval")
<style type="text/css">
#divChooseDossier {
width: 900px;
}
#divCreateReceipt {
width: 900px;
}
</style>
}
<h2>#ViewBag.Title</h2>
#Html.Hidden("IdDossier", ViewData["IdDossier"])
<table id="dossierReceiptsGrid"></table>
<div id="divCreateReceipt" class="modal hide fade" role="dialog" aria-hidden="true">
</div>
#DossierReceipts.CreateReceipt
<div id="divConfirmDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#DossierReceipts.ConfirmDossier</h3>
</div>
<div class="modal-body">
<span>#DossierReceipts.ConfirmDossierMessage<strong>#(ViewData["Dossier"] != null ? string.Format("{0}/{1}", ((Dossier)ViewData["Dossier"]).DossierNumber, ((Dossier)ViewData["Dossier"]).DossierYear) : string.Empty)</strong>?</span>
</div>
<div class="modal-footer">
#DossierReceipts.Cancel
<input type="button" class="btn btn-primary" value="#DossierReceipts.ConfirmDossierOk" onclick="confirmDossier();"/>
<input type="button" class="btn" value="#DossierReceipts.SelectDossier" onclick="showChooseDossierModal();"/>
</div>
</div>
<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
#DossierReceipts.Cancel
</div>
</div>
<script type="text/javascript">
leftMenu.setContext('financial help-financial');
$("#dossierReceiptsGrid").jqGrid({
url: '#Url.Action("ReceiptsGridData")',
datatype: "json",
mtype: "POST",
postData: {
idDossier: '#ViewData["IdDossier"]'
},
colNames: ['#DossierReceipts.DossierColumn', '#DossierReceipts.ReceiptDateColumn', '#DossierReceipts.ReceiptValueColumn', '#DossierReceipts.ReceiptCurrencyColumn', '#DossierReceipts.ReceiptColumn'],
colModel: [
{ name: "Dossier", index: "Dossier", sortable: true, editable: false },
{ name: "ReceiptDate", index: "ReceiptDate", sortable: true, editable: false },
{ name: "ReceiptValue", index: "ReceiptValue", sortable: true, editable: false },
{ name: "Currency", index: "Currency", sortable: true, editable: false },
{ name: "Receipt", index: "Receipt", sortable: true, editable: false }
],
viewrecords: true
});
function confirmDossier() {
$("#divConfirmDossier").modal("hide");
$("#divCreateReceipt").modal("show");
}
var reloadDossiersGrid = true;
function showChooseDossierModal() {
$("#divConfirmDossier").modal("hide");
$("#divChooseDossier").modal("show");
if (reloadDossiersGrid) {
reloadDossiersGrid = false;
$.post('#Url.Action("Index", "Dossier")?redirectUrl=&noActions=true&partial=true&customDblClick=chooseDossier', null, function(postResponse) {
$("#divChooseDossier .modal-body").html(postResponse);
$("#divChooseDossier").on("shown", function() {
resizeDossiersGrid();
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
});
});
} else {
$("#divChooseDossier").modal("show");
}
}
function chooseDossier(id) {
$("#IdDossier").val(id);
$("#divChooseDossier").modal("hide");
$.get('#Url.Action("CreateReceipt", "Financial")?idDossier=' + id, null, function(getResponse) {
$("#divCreateReceipt").html(getResponse);
$("#divCreateReceipt").modal("show");
});
$.get('#Url.Action("GetDossierDisplayName")?id=' + id, null, function(getResponse) {
$("#divConfirmDossier .modal-body strong").text(getResponse.name);
});
$("#IdDossier").val(id);
}
$(function() {
$("a[href='#divCreateReceipt']").hide();
$("a[href='#divChooseDossier']").hide();
});
function showCreateReceiptOption() {
if ($("#IdDossier").val() && $("#IdDossier").val().length > 0) {
$("#divConfirmDossier").modal("show");
} else {
showChooseDossierModal();
}
}
</script>
Sorry for the long code

Rather than modifying the z-index of elements, you can also set the parentEl option (where the calendar control is created). This will allow the actual daterangepicker object to inherit the z-index of the modal container.
$("#lastModifiedDateFilter").daterangepicker({
parentEl: "#divChooseDossier .modal-body"
})
From the documentation:
parentEl: (string) jQuery selector of the parent element that the date
range picker will be added to, if not provided this will be 'body'

I had a similar problem with datepicker jquery.
When I clicked on the input, nothing happened, no error, nothing.
The problem was that the datepicker was working, but the calendar appeared under the modal, I hacked this with css :
.datepicker{
z-index: 1100 !important;
}
Maybe your problem is similar to the mine ,
Update after 8 years of service....
Look at the better answer at bottom of this answer

You can change z-index in event show.daterangepicker
$('.daterange-single').on('show.daterangepicker', function(e){
var modalZindex = $(e.target).closest('.modal').css('z-index');
$('.daterangepicker').css('z-index', modalZindex+1);
});

I resolve my issues with the couple of :
.datepicker{
z-index: 1100 !important;
}
#ui-datepicker-div {
width: 30% !important;
}

Simply remove tabindex="-1" from your Bootstrap modal.
<div class="modal" tabindex="-1">

On version 0.21.1, insert the below CSS code to effect.
.date-picker-wrapper{
z-index: 1100 !important;
}