Display a modal dialog box on FullCalendar app - c#

I am using FullCalendar.io version 5.3.2 in an Asp.net Core Razor Page application.
I added a JavaScript function to create a modal dialog box to the application. My Index.cshtml file which is found at directory path: MyDemo > Pages > Calendar > Index.cshtml is shown below: -
#page
#model MyDemo.Pages.Calendars.IndexModel
#{
Layout = null;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href='~/lib/fullcalendar/lib/main.css' rel='stylesheet' />
<script src='~/lib/fullcalendar/lib/main.js'></script>
<link href="https://unpkg.com/bootstrap#4.5.0/dist/css/bootstrap.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet" />
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link href='~/lib/fullcalendar/lib/main.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
<script src='~/lib/fullcalendar/lib/main.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js'></script>
<script>
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
initialView: "month",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end) {
// Display the modal.
// You could fill in the start and end fields based on the parameters
$(".modal").modal("show");
$(".modal")
.find("#title")
.val("");
$(".modal")
.find("#starts-at")
.val("");
$(".modal")
.find("#ends-at")
.val("");
$("#save-event").show();
$("input").prop("readonly", false);
},
eventRender: function(event, element) {
//dynamically prepend close button to event
element
.find(".fc-content")
.prepend("<span class='closeon material-icons'></span>");
element.find(".closeon").on("click", function () {
$("#calendar").fullCalendar("removeEvents", event._id);
});
},
eventClick: function(calEvent) {
// Display the modal and set event values.
$(".modal").modal("show");
var title = $(".modal")
.find("#title")
.val(calEvent.title);
var start = $(".modal")
.find("#starts-at")
.val(calEvent.start);
var end = $(".modal")
.find("#ends-at")
.val(calEvent.end);
$("#save-event").show();
$("input").prop("readonly", false);
}
});
// Bind the dates to datetimepicker.
$("#starts-at, #ends-at").datetimepicker();
//click to save event
$("#save-event").on("click", function(event) {
var title = $("#title").val();
if (title) {
var eventData = {
title: title,
start: $("#starts-at").val(),
end: $("#ends-at").val()
};
$("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
}
$("#calendar").fullCalendar("unselect");
// Clear modal inputs
$(".modal")
.find("input")
.val("");
// hide modal
$(".modal").modal("hide");
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
.closeon {
border-radius: 5px;
}
input {
width: 50%;
}
input[type="text"][readonly] {
border: 2px solid rgba(0, 0, 0, 0);
}
/*info btn*/
.dropbtn {
/*background-color: #4CAF50;*/
background-color: #eee;
margin: 10px;
padding: 8px 16px 8px 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 100px;
margin-top: -300px;
}
.dropdown-content p {
color: black;
padding: 4px 4px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: grey;
}
.dropdown:hover .dropbtn span {
color: white;
}
</style>
</head>
<body>
<div id='calendar'></div>
<div id='datepicker'></div>
<div class="modal fade" tabindex="-1" role="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><input class="modal-title" type="text" name="title" id="title" placeholder="Event Title/Description" /></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<label class="col-xs-4" for="starts-at">Starts at</label>
<input type="text" name="starts_at" id="starts-at" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="col-xs-4" for="ends-at">Ends at</label>
<input type="text" name="ends_at" id="ends-at" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save-event">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>
The output solution appears as a blank webpage and the Console window shows the following error message and warning message: -
Error message:-
Uncaught TypeError: $(...).fullCalendar is not a function
at HTMLDocument.<anonymous> (index:40)
at e (jquery.min.js:2)
at t (jquery.min.js:2)
Warning message: -
jquery.min.js:2 jQuery.Deferred exception: $(...).fullCalendar is not a function TypeError: $(...).fullCalendar is not a function
at HTMLDocument.<anonymous> (https://localhost:44370/Calendars/index:40:28)
at e (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
at t (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307) undefined
Update
I have updated the code in the Index.cshtml page and the FullCalendar webpage is now visible. I added an Add Event button and when I click on the button, the prompt do not appear. When I check the Console Window, there are no errors:-
#page
#model MyDemo.Pages.Calendars.IndexModel
#{
Layout = null;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href='~/lib/fullcalendar/lib/main.css' rel='stylesheet' />
<script src='~/lib/fullcalendar/lib/main.js'></script>
<link href="https://unpkg.com/bootstrap#4.5.0/dist/css/bootstrap.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet" />
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
headerToolbar: {
left: 'title',
center: 'addEventButton',
right: 'prev,next today,dayGridMonth,timeGridWeek,timeGridDay'
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
customButtons: {
addEventButton: {
text: 'add event',
eventClick: function (event) {
var dateStr = prompt("Event ID: " + event.id + " Start Date: " + $.fullCalendar.formatDate(event.start, 'YYYY-MM-DD') + " End Date: " + event.end);
var date = new Date(dateStr + 'T00:00:00'); // will be in local time
if (!isNaN(date.valueOf())) { // valid?
calendar.addEvent({
title: 'dynamic event',
start: date,
end: date,
allDay: true
});
alert('Great. Now, update your database...');
} else {
alert('Invalid date.');
}
}
}
}
});
calendar.render();
});
</script>
</head>
<body>
<div class="p-5">
<h2 class="mb-4">Full Calendar</h2>
<div class="card">
<div class="card-body p-0">
<div id='calendar'></div>
</div>
</div>
</div>
<!-- calendar modal -->
<div id="modal-view-event" class="modal modal-top fade calendar-modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<h4 class="modal-title"><span class="event-icon"></span><span class="event-title"></span></h4>
<div class="event-body"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal-view-event-add" class="modal modal-top fade calendar-modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form id="add-event">
<div class="modal-body">
<h4>Add Event Detail</h4>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="v.title">
</div>
<div class="form-group">
<label>Start Date</label>
<input type='text' class="datetimepicker form-control" name="v.startdate">
</div>
<div class="form-group">
<label>End Date</label>
<input type='text' class="datetimepicker form-control" name="v.enddate">
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" name="v.description"></textarea>
</div>
<div class="form-group">
<label>Theme Color</label>
<select class="form-control" name="v.themecolor">
<option value="fc-bg-default">fc-bg-default</option>
<option value="fc-bg-blue">fc-bg-blue</option>
<option value="fc-bg-lightgreen">fc-bg-lightgreen</option>
<option value="fc-bg-pinkred">fc-bg-pinkred</option>
<option value="fc-bg-deepskyblue">fc-bg-deepskyblue</option>
</select>
</div>
<div class="form-group">
<label>Event Icon</label>
<select class="form-control" name="eicon">
<option value="circle">circle</option>
<option value="cog">cog</option>
<option value="group">group</option>
<option value="suitcase">suitcase</option>
<option value="calendar">calendar</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The FullCalendar webpage image:-


I added an Add Event button and when I click on the button, the prompt do not appear.
This demo shows how to add a new event to the calendar via a custom button, and in example code (by clicking "Edit in CodePen" at the top-right corner on that page) you would find click property is used.
And as #ADyson shared in comment, if you check the doc about "customButtons", you can also get detailed description of properties that customButton entry accepts.
Besides, please note that the callback function does not accept calendar event as argument.
`click` - a callback function that is called when the button is clicked. Accepts two arguments: ( mouseEvent, htmlElement ).
If you'd like to enable user to add a new event to the calendar via a custom button, you can modify the code to use two prompt for startdate and enddate, like below.
customButtons: {
addEventButton: {
text: 'add event',
click: function () {
var dateStr = prompt('Enter start date in YYYY-MM-DD format');
var dateEnd = prompt('Enter end date in YYYY-MM-DD format');
var str = new Date(dateStr + 'T00:00:00'); // will be in local time
var end = new Date(dateEnd + 'T00:00:00');
if (!isNaN(str.valueOf()) && !isNaN(end.valueOf())) { // valid?
calendar.addEvent({
title: 'dynamic event',
start: str,
end: end,
allDay: true
});
alert('Great. Now, update your database...');
} else {
alert('Invalid date.');
}
}
}
}

Related

How to pop up the modal div MVC

I want to pop up my div class that contains user at password text box but nothings happen and I test also my function if its running correctly that's why I put alert in my function. This my code bellow. I try so many solution and yet still not show my div. Can any give me a best solution regarding this matter or other way to pop up the web form without leaving my current page.
#model TBSWebApp.Models.User
#{
ViewBag.Title = "UserLogin";
Layout = "~/Layout/_webLayout.cshtml";
}
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Sign-in
</button>
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script>document.write(new Date().toDateString());</script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$("#btnShowModal").click(function () {
alert("test");
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
// });
</script>
I already solved my problem
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax(
{
type: "POST", //HTTP POST Method
url: "UserLogin/UserLogin", // Controller/View
dataType: "text/html",
data:
{ //Passing data
UserID: $("#userNameTextBox").val(),
Password: $("#passwordTextBox").val(),
}
});
});
});
//$(document).ajaxStart(function () { $("#loadingImg").show(); });
//$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>

Acumatica Rest API get Business Account

I'm trying to receive Business Account info through the rest API. I try with a filter and without the filter. It is using the default end point and the default BusinessAccount. The results of both runs are below after the code.
My code to get the Acumatica content
public async void GetCustomersActivitiesAsync(int top, string filterOperation, string filter)
{
string url = settings.url + settings.endpoint + "BusinessAccount";
string parametersFilter = "&$filter=BusinessAccount eq 'ABARTENDE'";
var uri = new Uri(url + parametersFilter);
try
{
var response = await client.GetAsync(uri);
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync();
}
else
{
err = await response.Content.ReadAsStringAsync();
try
{
ResponseMessage msg = JsonConvert.DeserializeObject<ResponseMessage>(err);
if (msg != null && msg.exceptionMessage != "") err = msg.exceptionMessage;
}
catch (Exception ex)
{
err = ex.Message;
}
}
}
catch (Exception ex)
{
Debug.WriteLine(#" ERROR {0}", ex.Message);
err = ex.Message;
}
}
When I run the filter it fails auto manically
When I do a filter it returns this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><link href="/A000/Content/font-awesome.css?timestamp=636698449900000000" type="text/css" rel="stylesheet" /><link href="/A000/App_Themes/Default/00_Controls.css?timestamp=636698449900000000" type="text/css" rel="stylesheet" /><title>
Error Has Occurred
</title><meta http-equiv="content-script-type" content="text/javascript" />
<style type="text/css">
.main
{
padding-left: 40px;
padding-right: 20px;
padding-top: 30px;
font-family: Arial;
}
.errCode
{
padding-bottom: 20px;
font-family: Arial;
font-size: 15pt;
}
.errMsg
{
font-size: 12pt;
}
.img
{
float: left;
margin-right: 10px;
}
.nxtSt
{
margin-top: 30px;
font-family: Arial;
font-size: 15pt;
}
.navTo
{
margin-top: 10px;
margin-left: 20px;
}
.errPnl
{
padding: 10px;
padding-top: 15px;
}
.grayBox
{
border: solid 1px #CCC;
background-color: #F9F9F9;
padding-top: 20px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 20px;
}
.traceLnk
{
margin-top: 20px;
}
</style>
<style type="text/css">
.frmBottom_CaptionL { background-position:left top;width:5px; }
.frmBottom_CaptionR { background-position:right top;width:5px; }
.frmBottom_CaptionM { }
</style></head>
<body>
<form name="form1" method="post" action="./Error.aspx" id="form1">
<input type="hidden" name="__RequestVerificationToken" id="__RequestVerificationToken" value="Aq4LEYY5T50IzZfjFHxJWWVP0lq4kLBG-ljIPF3eUYBdBo3UHLHNgHdHF8YW9hpS3nHqiATSFrDybUkJvaXapM_ZItg1" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="frmBottom_state" id="frmBottom_state" value="" />
<input type="hidden" name="__SmartPanelVisible" id="__SmartPanelVisible" value="" />
<input type="hidden" name="L10nEditor_state" id="L10nEditor_state" value="" />
<input type="hidden" name="inputBox_state" id="inputBox_state" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
<script type="text/javascript">
//<![CDATA[
var __appPath = '/A000/';var __nodePath="";var __nodeGuid="00000000-0000-0000-0000-000000000000";//]]>
</script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuRXh00&t=636698318120000000" type="text/javascript"></script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuQmFzZQ2&t=636698318120000000" type="text/javascript"></script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuRWRpdA2&t=636698318120000000" type="text/javascript"></script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuR3JpZA2&t=636698318120000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var __loadImgUri = "/A000/App_Themes/Default/Images/spinner.gif?imgTimeStamp=636698449900000000";
var __loadStr = "";
var _numbFormatInfo = {negativeSign:"-",currencySymbol:"$",percentSymbol:"%",number:{groupSeparator:",",decimalSeparator:".",groupSizes:[3],negativePattern:1,decimalDigits:2},currency:{groupSeparator:",",decimalSeparator:".",groupSizes:[3],positivePattern:0,negativePattern:0,decimalDigits:2},percent:{groupSeparator:",",decimalSeparator:".",groupSizes:[3],positivePattern:1,negativePattern:1,decimalDigits:2}};
var _dateFormatInfo = {am:"AM",pm:"PM",shortDate:"M/d/yyyy",shortTime:"h:mm tt",longDate:"dddd, MMMM d, yyyy",longTime:"h:mm:ss tt",timeSeparator:":",yearFix:0,monthNames:"January,February,March,April,May,June,July,August,September,October,November,December,",abbrMonthNames:"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,",dayNames:"Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",abbrDayNames:"Sun,Mon,Tue,Wed,Thu,Fri,Sat"};
__createPxContext(window);
var __PXFormView = {maxFileSizeMsg:"The file exceeds the maximal allowed size (25000 KB).",allowedFiles:".als;.cer;.csv;.dat;.doc;.docx;.epl;.exe;.gif;.ico;.ics;.jpeg;.jpg;.js;.mdb;.msi;.ofx;.pdf;.pfx;.ppt;.pptx;.qbo;.qfx;.rar;.rtf;.sql;.swf;.txt;.xls;.xlsx;.xml;.zip;.zpl;.pbix;.png;.svg;.tif;.tiff",allowedFilesMsg:"Only the following file types are allowed: {0}.",callbacks:[{name:"Refresh",repaintControls:1,blockPage:1,postData:0},{name:"Search",repaintControls:1,blockPage:1},{name:"Save",repaintControls:1,blockPage:1,commitChanges:1},{name:"Delete",repaintControls:1,blockPage:1},{name:"AddNew",repaintControls:1,blockPage:1,postData:0},{name:"NoteShow",blockPage:1,postData:0},{name:"NoteSave",repaintControls:3,blockPage:1,postData:0},{name:"FilesMenuShow",blockPage:1,postData:0},{name:"ActivityShow",blockPage:1,postData:0},{name:"LinkShow",repaintControls:3,blockPage:1,postData:0},{name:"LinkUpdate",repaintControls:3,blockPage:1,postData:0},{name:"LinkSend",repaintControls:3,blockPage:1,postData:0},{name:"NotifyMenuShow",repaintControls:3,blockPage:1,postData:0},{name:"NotifyShow",repaintControls:3,blockPage:1,commitChanges:1,postData:0},{name:"CheckActivity",blockPage:1,postData:0},{name:"UploadFile",blockPage:1}],errorCss:"FormError",warningCss:"FormWarn",infoCss:"FormInfo",minHeight:63,filesMenuUrls:{filesDisplayUrl:"~/Frames/GetFile.ashx",fileInfoUrl:"~/Pages/SM/SM202510.aspx"}};
var _frmBottom = {allowCollapse:0,minHeight:0,autoSize:{enabled:1,container:1}};
var _confirmMsg = "Any unsaved changes will be discarded.";
var __PXSmartPanel = {callBackMode:{blockPage:1,postData:0}};
var _L10nEditor = {loadOnDemand:1,autoReload:1,commandName:"SaveLoc",autoCallBack:{behavior:{postData:0}}};
var __PXInputBox = {activeEnter:0,buttonCss:"MessageButton",autoAdjustSize:1,callBackMode:{blockPage:1,postData:0}};
var _inputBox = {};
//]]>
</script>
<div class="main">
<div name="frmBottom" id="frmBottom">
<div style="position:relative;">
<div class="errCode">
</div>
<div class="grayBox">
<div class="img">
<img id="frmBottom_imgMessage" tabindex="100" src="../App_Themes/Default/Images/Message/error2.gif" border="0" />
</div>
<div class="errMsg">
<span id="frmBottom_lblMessage" class="errMsg">We're sorry! An error has occurred while processing your request. A report has been generated for our technical staff to investigate the problem. Please try to repeat your request later. Thank you for understanding.</span>
</div>
</div>
<div class="traceLnk">
<a id="frmBottom_lnkTrace" tabindex="101" href="Trace.aspx"><u><font color="Blue" size="4">Show Trace</font></u></a>
</div>
<div class="nxtSt">
</div>
<div class="navTo">
</div>
</div>
</div>
</div>
<table name="L10nEditor" cellspacing="0" cellpadding="0" id="L10nEditor" tabindex="300" class="SmartPanel" style="display:none;">
<tr>
<td id="L10nEditor_cap" class="SmartPanelC" valign="middle"><div class="sprite-icon control-icon" icon="Close" mode="c" style="float:right;">
<div class="control-icon-img control-Close">
</div>
</div>Translations</td>
</tr><tr>
<td class="SmartPanelCN" id="L10nEditor_cont" width="0" height="0"><div class="panelContent">
</div></td>
</tr>
</table><table name="inputBox" cellspacing="0" cellpadding="0" id="inputBox" tabindex="400" class="SmartPanel" width="400" style="display:none;">
<tr>
<td id="inputBox_cap" class="SmartPanelC" valign="middle"><div class="sprite-icon control-icon" icon="Close" mode="c" style="float:right;">
<div class="control-icon-img control-Close">
</div>
</div>Copy to clipboard (Ctrl+C)</td>
</tr><tr>
<td class="SmartPanelCN" id="inputBox_cont" width="400" height="0"><table tabindex="400" border="0" width="100%">
<tr>
<td><input name="inputBox$ctl01" type="text" class="editor" /></td>
</tr><tr>
<td align="right"><button type="button" class="MessageButton Button">OK</button><button type="button" class="MessageButton Button">Cancel</button></td>
</tr>
</table></td>
</tr>
</table></form>
</body>
</html>

The query parameters, such as $filter, are separated from the path by ?. In your case that should give <base url>/BusinessAccount?$filter=<filter espression>.

Error: [ng:areq] Argument 'approvalCtrl' is not a function, got undefined

i create a project to show data from database to gridview with a code like this
this is for approval.html
<style type="text/css">
.auto-style4 {
width: 260px;
height: 50px;
}
.auto-style5 {
width: 292px;
height: 50px;
}
.auto-style6 {
width: 850px;
height: 50px;
}
.auto-style13 {
width: 260px;
height: 54px;
}
.auto-style14 {
width: 292px;
height: 54px;
}
.auto-style15 {
width: 850px;
height: 54px;
}
</style>
<style>
.panel-default > .panel-heading {
color: #f5ffff;
background-color: #6d1014;
}
.auto-style20 {
width: 260px;
height: 64px;
}
.auto-style21 {
width: 292px;
height: 64px;
}
.auto-style22 {
width: 850px;
height: 64px;
}
.auto-style23 {
width: 260px;
height: 10px;
}
.auto-style25 {
width: 129px;
}
.auto-style26 {
width: 292px;
height: 10px;
}
</style>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel panel-default" style="width: 900px;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Approval
</a>
</h4>
</div>
<div id="collapseTwo" class="collapse in">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
<div class="col-lg-10">
<form class="form-horizontal">
<div class="form-group">
<br />
<!--ROW 1 = Period -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label for="labelPeriod" class="control-label">Period</label>
</div>
<div class="col-md-4">
<input id="txtOldDate" max="txtNewDate" type="date" class="datepicker" />
</div>
<div class="col-md-1">
<label for="labelTo" class="control-label">To</label>
</div>
<div class="col-md-4">
<input id="txtNewDate" min="txtOldDate" type="date" class="datepicker" />
</div>
<div class="col-md-4"></div>
</div>
<br />
<!--ROW 2 = Department-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label for="labelDepartment" class="control-label">Department</label>
</div>
<div class="col-md-5">
<div class="side-by-side clearfix">
<div class="dropdown">
<select id="ddlDepartment" class="form-control">
<option>EDP Department</option>
<option>Departemen 2</option>
<option>Departemen 3</option>
</select>
</div>
</div>
</div>
<div class="col-md-5"></div>
</div>
<!--ROW 3 = Employee-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label for="labelEmployee" class="control-label">Employee</label>
</div>
<div class="col-md-5">
<div class="side-by-side clearfix">
<div class="dropdown">
<select id="ddlManagerApproval" class="form-control">
<option>Manager 1</option>
<option>Manager 2</option>
<option>Manager 3</option>
</select>
</div>
</div>
</div>
<div class="col-md-5"></div>
</div>
<br />
<!--ROW 4 = Button Show Data-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<input id="btnSubmit" type="button" class="btn btn-primary" value="Show" />
</div>
<div class="col-md-9"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--ROW 5 = Gridview-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2"></div>
<div class="col-md-5"></div>
</div>
<br />
<div ng-controller="approvalCtrl" class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<table class="table table-bordered table-hover">
<tr style="background-color:#6d1014; color:#FFFFFF">
<th>Ticket Number</th>
<th>Requester Account</th>
<th>Category</th>
<th>Sub Category</th>
<th>Subject</th>
<th>Body</th>
<th>FIle Name</th>
<th>Assigned To</th>
</tr>
<tbody ng-repeat="e in requestList">
<tr>
<td>{{e.TICKET_NUMBER}}</td>
<td>{{e.REQUESTER}}</td>
<td>{{e.CATEGORY}}</td>
<td>{{e.SUBCATEGORY}}</td>
<td>{{e.SUBJECT}}</td>
<td>{{e.BODY}}</td>
<td>{{e.CATEGORY}}</td>
<td>{{e.FILE_NAME}}</td>
<td>{{e.ASSIGNED_TO}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
this is approvalCtrl.js
(function (app) {
'use strict';
app.controller('approvalCtrl', function ($scope, GetDataService) {
function getAllDataRequest() {
GetDataService.getRequestData().then(function (emp) {
$scope.requestList = emp.data;
}, function (error) {
alert('failed to fetch data');
});
}
})(angular.module('myapplication'));
});
This is the approvalController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyApplication.Service.Controllers
{
public class ApprovalController : Controller
{
// GET: Approval
public ActionResult Index()
{
return View();
}
public JsonResult GetAll()
{
List<TRN_SERVICE_REQUEST> reqdata = new List<TRN_SERVICE_REQUEST>();
using (RREntities ed = new RREntities())
{
reqdata = ed.TRN_SERVICE_REQUEST.ToList();
return new JsonResult { Data = reqdata, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
}
This is the app.js
(function () {
'use strict';
var app = angular.module('myapplication', ['common.core', 'common.ui'])
.config(config)
.run(run);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "scripts/spa/home/index.html",
controller: "indexCtrl"
})
.when("/entry", {
templateUrl: "scripts/spa/entry/entry.html",
controller: "entryCtrl"
})
.when("/approval", {
templateUrl: "scripts/spa/approval/Approval.html",
controller: "approvalCtrl"
});
}
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
// handle page refreshes
$rootScope.repository = $cookieStore.get('repository') || {};
if ($rootScope.repository.loggedUser) {
$http.defaults.headers.common['Authorization'] = $rootScope.repository.loggedUser.authdata;
}
$(document).ready(function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none'
});
$('.fancybox-media').fancybox({
openEffect: 'none',
closeEffect: 'none',
helpers: {
media: {}
}
});
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
}
})();
The page result is shown in this image
Result Page
Why the result is getting an error is not a function?
Thanks in advance

It seems to me that you've written the self-invoking function wrong. The arguments weren't placed rightly. Should've been one line below.
(function (app) {
'use strict';
app.controller('approvalCtrl', function ($scope, GetDataService) {
function getAllDataRequest() {
GetDataService.getRequestData().then(function (emp) {
$scope.requestList = emp.data;
}, function (error) {
alert('failed to fetch data');
});
}
});
})(angular.module('myapplication'));

You need to define the app in your HTML
<div ng-app = "myapplication"></div>

Fancybox cache issue (registered and unregistered user)

We are using a fancybox on our site. Registered users can see top panel on the fancybox, unregistered can't see it.
At first boot of images there are request to the server, create a template that displays a picture. But after the first click there is no request to the server - therefore if we click by registered user and after make log out and click again we see that top panel.
There is c# checking if user registered or not:
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
//show top panel
}
else{
//hide top panel
}
There is fancybox calling:
this.cont.find("a.imglnk").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
type: 'ajax',
ajax: { global: false, cache: false },
titleShow: false,
scrolling: 'no',
});
There is template by which we get picture (C#):
<div style="position: relative" id="mmgf_#(prefix)" class="mmgf">
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
<div class="fancy-box-top-panel">
<div class="choose-album-cover">
<div style='min-height: 22px; display: inline-block;'>
<div class='checkbox-test cb_gray'>
<input type='checkbox' id='choose-album-cover' name='choose-album-cover' value='on' />
</div>
</div>
<div class="album-cover">
#RenderMultimediaGalleryStrings.ChooseAlbumCover</div>
</div>
<div class="dn manage-album-cont">
<div class="move-dp-btn">
#RenderMultimediaGalleryStrings.Move
<div class="dn move-drop-down-list">
#if (albums != null && albums.Any())
{
foreach (var alb in albums)
{
#alb.Name
}
}
</div>
</div>
</div>
<div class="clearfix">
</div>
</div> }
<div style="width: 630px; height: 440px; overflow: hidden; text-align: center; position: relative;">
#if (Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image)
{
<img src="#(Html.KZStreamImagePath(Model.Id, 630, 440))" style="text-align: center;position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;" />
}
else
{
<iframe width="632" height="414" src="#(Html.Action("GetVideo", new { id = Model.Id }))" frameborder="0" allowfullscreen>
</iframe>
}
</div>
<div style="margin-top: 10px; font-family: Tahoma, Verdana, Segoe, sans-serif; font-weight: normal;
font-size: 14px; color: #000000; max-width: 630px;">
#Model.Description
</div>
</div>
Finally i need that at every image showing there are carried out an inspection :) Thanks :)

Jquery script in master page not working in Internet Explorer

I have this script in Master page (it shows a panel on hover of menu element)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#<%= menu1_lbl.ClientID %>').hover(function() {
$('#<%= sub_menu1_lbl.ClientID %>').slideDown(200);
},
function() {
$('#<%= sub_menu1_lbl.ClientID %>').hide();
});
$('#<%= sub_menu1_lbl.ClientID %>').hover(function() {
$('#<%= sub_menu1_lbl.ClientID %>').show();
$('#<%= menu1_lbl.ClientID %>').addClass("menuhover");
},
function() {
$('#<%= sub_menu1_lbl.ClientID %>').hide();
$('#<%= menu1_lbl.ClientID %>').removeClass("menuhover");
});
});
</script>
it works fine on Chrome & Firefox but it doesnt work in IE. Any ideas on what should I do to make it work?
thanks in advance.
UPDATE: Here is the full client-side generated code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Smart Finance </title>
<style type="text/css">
</style>
</head>
<body>
<form name="aspnetForm" method="post" action="ie_not_compatible.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWBAIBD2QWAgIBDxUHFi9GaW5hbmNhL2ltYWdlcy9iZy5wbmcZL0ZpbmFuY2EvaW1hZ2VzL2ltZzAzLmpwZxYvRmluYW5jYS9pbWFnZXMvYmcucG5nGS9GaW5hbmNhL2ltYWdlcy9pbWcwMi5qcGcZL0ZpbmFuY2EvaW1hZ2VzL2ltZzAyLmpwZxkvRmluYW5jYS9pbWFnZXMvaW1nMDIuanBnGS9GaW5hbmNhL2ltYWdlcy9pbWcwMi5qcGdkAgMPZBYCAgkPZBYCAgEPDxYCHgRUZXh0BQVlbmRyaWRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYDBRhjdGwwMCRMb2dpblN0YXR1czEkY3RsMDEFGGN0bDAwJExvZ2luU3RhdHVzMSRjdGwwMwUMY3RsMDAkY29uZmlnwdDc6GaGSg1K9roW+pf9g9bwZ08=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKDjNy/AwLh8tHdBgL0/brqCByGAqyFdaUy3EVtuUCi/i44T7vY" />
</div>
<div id="menu" style="top: 12px; width: 1250px; position: relative; float: left;">
<ul>
<li>Home</li>
<li id="faturatli">Default </li>
</ul>
</div>
<div id="ctl00_sub_menu1_lbl" style="display: none; top: 137px; padding: 15px 15px 15px 15px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .5); z-index: 99999; left: 155px; position: absolute;
float: left; width: 300px; background: #FFFFFF;">
Submenu panel
</div>
<div id="logoutcontainer" style="top: 113px; right: 50px; position: absolute;">
<div id="ctl00_Panel1" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_config')">
<span id="ctl00_userloggedin" style="color: #ADC9C9; font-size: small; font-weight: 700;">
endri</span> <a id="ctl00_LoginStatus1" href="javascript:__doPostBack('ctl00$LoginStatus1$ctl00','')"
style="color: #CCFFFF; font-size: small; font-weight: 700;">Logout</a>
<input type="image" name="ctl00$config" id="ctl00_config" src="images/config.png"
style="height: 20px; border-width: 0px;" />
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script defer="defer" type="text/javascript">
$(document).ready(function () {
"use strict";
$('#ctl00_menu1_lbl').hover(function () {
$('#ctl00_sub_menu1_lbl').slideDown(200);
}, function () {
$('#ctl00_sub_menu1_lbl').hide();
});
$('#ctl00_sub_menu1_lbl').hover(function () {
$('#ctl00_sub_menu1_lbl').show();
$('#ctl00_menu1_lbl').addClass("menuhover");
}, function () {
$('#ctl00_sub_menu1_lbl').hide();
$('#ctl00_menu1_lbl').removeClass("menuhover");
});
});
</script>
​
<div id="ContentDiv" style="float: left; position: relative; margin: 50px 50px 50px 50px;
text-align: left; top: 21px; left: 0px;">
<span class="style3">Not working on internet explorer.</span>
</div>
<script src="/finance/WebResource.axd?d=lLeg7eZU8UNEVWRCMptUog2&t=633750586290014532"
type="text/javascript"></script>
</form>
</body>
</html>

Hey This error usually comes when jquery library is not loaded properly.
Try to load it this way
<script type="text/javascript" src='<%=Page.ResolveUrl("http://code.jquery.com/jquery-1.7.2.min.js")%>'></script>

Categories

Resources