Develop Reference

Uncaught error typeerror calendar.fullcalendar is not a function

I have used fullCalendar plugin for my application. While executing I gain an error like,
uncaught error typeerror calendar.fullcalendar is not a function
I have refered uncaught-typeerror-fullcalendar-is-not-a-function, but isn't helpful for me.
I have organized my libaries like, at top of the page
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/calender/fullcalendar.css">
<link href='assets/packages/daygrid/main.css' rel='stylesheet' />
<link href='assets/packages/timegrid/main.css' rel='stylesheet' />
<link href="assets/packages/jqueryui/custom-theme/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
<link href='assets/packages/datepicker/datepicker.css' rel='stylesheet' />
<link href='assets/packages/colorpicker/bootstrap-colorpicker.min.css' rel='stylesheet' />
<link href="assets/packages/jqueryui/custom-theme/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
JavaScript libraries at bottom of the page
<script src="assets/ajax/jquery-3.4.1.min.js"></script>
<script src="assets/ajax/jquery.min.js"></script>
<script src="assets/calender/moment.min.js"></script>
<script src="assets/calender/jquery-ui.min.js"></script>
<script src="assets/calender/fullcalendar.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/app.js"></script>
<script src='assets/packages/daygrid/main.js'></script>
<script src='assets/packages/timegrid/main.js'></script>
<script src='assets/packages/list/main.js'></script>
<script src='assets/packages/interaction/main.js'></script>
<script src='assets/packages/datepicker/datepicker.js'></script>
<script src='assets/packages/colorpicker/bootstrap-colorpicker.min.js'></script>
Here is the query,
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
// put your options and callbacks here
editable:true,
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
eventSources: [
{
url: 'api/load.php',
}
],
})
$('#submitButton').on('click', function(e){
var startDate = $('#startDate').val();
var title = $('#title').val();
var endDate = $('#endDate').val();
var text_color = $('#text_color').val();
var color = $('#color').val();
// process the form
$.ajax({
type : "POST",
url : 'api/insert.php',
data : {
startDate:startDate,
title:title,
endDate:endDate,
text_color:text_color,
color:color,
},
success:function()
{
calendar.fullCalendar('refetchEvents');
if(data){
$('input[id=sumb]').prop('disabled',true);
} else {
//our handled error
}
},
});
doSubmit();
});
function doSubmit(){
$("#event-modal").modal('hide');
$("#calendar").fullCalendar('renderEvent',
{
title: $('#eventName').val(),
start: new Date($('#eventDueDate').val()),
},
true);
}
});
I don't know where I went wrong. Any help may highly appreciated

TypeError: $(...).autocomplete is not a

Above are all the scripts
and below them is the jquery autocomplete: all this simply does is is show an autocomplete from an input tag. I've tried re-arranging the script tags, adding different versions of jquery nothing seems to work
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
var aTags = ["ask", "always", "all", "alright", "one", "foo", "blackberry", "tweet", "force9", "westerners", "sport"];
$("#d").autocomplete({
source: aTags
});
});
</script>
<input id="d" type="text" />

dynamically load css files through jQuery does not work

Normaly I load a javascript file in html:
<script src="v/0.2/strapdown.js"></script>
This file strapdown.js itself loads css files (line 69 - 83): Github > strapdown.js
// Stylesheets
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/'+theme+'.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/strapdown.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/bootstrap-responsive.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
Now I want to load this javascript file dynamically with jQuery.getScript():
$.getScript("v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
The javascript file is loaded, but it does not load the css files.
When I state the css file directly in the html file it works:
<link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen" charset="utf-8">
But I want to have it dynamically, as it worked before.
Heres the code with the missing css files. Available on Github > test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
<!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
charset="utf-8"-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
function showmd( value ) {
$( "xmp" ).html( value );
$.getScript("v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
}
$.get( "readme.md", function( data ) {
showmd( data );
}, 'text');
</script>
</body>
</html>
How do I get the css files dynamically loaded via the original script, that I load via jQuery.getScript()?

If you try to load local resources with Ajax, you will face problems with your browser security.
This is what I faced when I used your code without modifications.
Here is the code i used to make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
<!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
charset="utf-8"-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
// http://stackoverflow.com/questions/11917734/jquery-ajax-call-success-how-do-i-change-a-global-variable-in-the-wrapper-javas
// http://stackoverflow.com/questions/7598821/return-responsetext-from-jquery-get
function showmd( value ) {
$( "xmp" ).html( value );
$.getScript("http://strapdownjs.com/v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
}
$.ajax({
url: "https://raw.githubusercontent.com/jerik/jerik.github.io/master/readme.md",
method: "GET",
success: function(data) {
showmd(data);
}
});
</script>
</body>
</html>

You have to download the css, wait for it to finish download and them use it
$.ajax({
url: 'includes/page/message/index.css',
dataType: 'text',
success: () => {
$("head").append("<link>");
let css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: 'includes/page/message/index.css'
});
}
});

Found a solution that works with http and https requests. I create an script tag with the required information and append it to the head tag. Firebugs reports a waring Synchrone XMLHttpRequests in the Main-Thread should not be used... but it works for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
function showmd( value ) {
$( "xmp" ).html( value );
$( 'head' ).append( '<script src="v/0.2/strapdown.js"><\/script>' );
}
$.get( "readme.md", function( data ) {
showmd( data );
}, 'text');
</script>
</body>
</html>

adding calender in text box

i want to load a calender in my text box i m working in asp.net and mvc
i want to load the text in red tex box i m writing this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
i m doing tis in my js
and i m doing this in my view bag i just want to show that i m adding libraries in my view bag
<script src="js/jquery.min.js"></script>
<script src="js/chkList.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="../../css/jquery-ui.css">

Html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDate" runat="server" ReadOnly = "true"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
</form>
</body>
</html>
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
string dt = Request.Form[txtDate.UniqueID];
}

here is the example..
$(function() {
$( "#datepicker" ).datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Ajax after load menu buttons

Hy guys ! I have a problem with my menu from index.It appears that after i load another page with ajax , the menu isn't working anymore.Can you help ? Thanks
Is a problem that index and header1 have the same javascript ?
INDEX HTML :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lukcomputers</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<!--Menu-->
<div id="menu"><img src="img/menu/menu.png" width="900" height="517" /></div>
<div id="service" class="font-menu" >SERVICE</div>
<div id="service-buton" class="font-menu-bold" >SERVICE</div>
</div>
<!--End of Menu-->
<div id="content"></div>
</body>
</html>
Javascript :
$(document).ready(function() {
$("#toggle").hide();
$('#service').click(function() { $('#toggle').toggle();$("#service").css('visibility', 'hidden');$("#service-buton").css('visibility', 'visible');});
$('#service-buton').click(function() { $('#toggle').toggle();$("#service").css('visibility', 'visible');$("#service-buton").css('visibility', 'hidden');});
$('#acasa').click(function() {
$.ajax({
url:"header1.html",
success: function(data) {
$("#content").html(data)}
});
});
});
Header1.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lukcomputers</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Content-->
<div id="paragraf1" class="myriad">Instalare sisteme oferare<br />(WINDOWS, LINUX),<br />instalare aplicatii, back-up date.</div>
<!--End of Content-->
</body>
</html>

What you are doing is a bad practice. use .load() if you want to load a specific part of a page into your current page. In your case, it is
$('#content').load('header1.html #paragraf1');

Your header1 html file shoud have only this line
<div id="paragraf1" class="myriad">Instalare sisteme oferare<br />(WINDOWS, LINUX),<br />instalare aplicatii, back-up date.</div>