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.');
}
}
}
}
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>.
I have probably very simple question.
I have copied that code to my asp.net web application project but i couln't minimize the box.
Is there anything special i should do to use javascript with asp.net projects?
I tried the code tree times.
Put script code in to head block
Put script code to just before div starts
Put script code to just before form tag closes
Javascript code
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
html code
<div id="widnow">
<div id="title_bar"> Basic information
<div id="button"><img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
</div>
<div id="box">
</div>
</div>
css code
#widnow{
width:400px;
border:solid 1px;
}
#title_bar{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}
I am assuming you are missing reference to jquery. Replacing your script part with this will solve the problem if that is the case.
<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
// or use any version of jquery library..in your fiddle you used 1.7.2..Try the same instead..
<script>
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
Most probably you are missing the jquery file ....try this
<html>
<head runat="server">
<title></title>
<style>
#widnow
{
width: 400px;
border: solid 1px;
}
#title_bar
{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button
{
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box
{
height: 250px;
background: #DFDFDF;
}
</style>
<script src="Scripts/jquery-1.10.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
}
else {
$(this).html("-");
}
$("#box").slideToggle();
});
});
</script>
</head>
<body>
<div id="widnow">
<div id="title_bar">
Basic information
<div id="button">
<img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
</div>
<div id="box">
</div>
</div>
</body>
</html>
I have looked at:
The resizable control,
and this forum link,
all without finding the proper resolution.
I have a page (without a master page) that has 2 columns. Once column houses a menu structure, and the other a PDF viewer.
I want to be able to hide the menu, and expand the PDFviewer to the full page.
Unfortunately, I currently only have the Hide() option working.
Here is some code:
Style Sheet.css
body {
}
.wrapper {
margin: 0 auto;
}
.left {
width: 25%;
float: left;
background: #f4f4f4;
overflow: hidden;
}
.right {
width: 75%;
float: right;
margin-top: -20px;
padding-top: -20px;
}
Default.aspx
<div class="wrapper">
<div runat="server" id="left" class="left">
<div style="padding-top: 10px">
<asp:Label runat="server" Text="File List" Font-Size="20px" Font-Bold="True"></asp:Label>
- <a id="uploadLink" href="Upload.aspx">Upload</a>
<br />
<br />
<!-- Menu structure -->
</div>
</div>
<div class="right" id="right">
<a id="showh1">+</a>
<a id="hideh1">-</a>
<div style="border: 1px solid grey;">
<iframe runat="server" id="pdfHolder" width="100%" seamless="seamless" title="Doc"></iframe>
</div>
</div>
<asp:Label runat="server" ID="lbltest" Text=" ---- " Visible="False"></asp:Label>
</div>
Javascript snippet on Default.aspx
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
});
});
</script>
How can I correctly do this?
Try this:
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
$('div.right').css("width", "100%");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
$('div.right').css("width", "75%");
});
});
</script>