Below is the code that I am using to try to submit a form.. I am getting the following error in firebug:
$("#submit").ajaxForm is not a function
However, the form will submit but go to the test.php page and does not show the success div..
Any help is very much appreciated.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#submit').ajaxForm(function() {
$('form#submit').fadeOut(function(){$('div.success').fadeIn();});
});
});
</script>
<script src="jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen">
<style>
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:360px;
padding:12px;
}
.error{
margin:0 auto;
width:360px;
padding:12px;
}
.success{
margin:0 auto;
width:360px;
padding:12px;
}
/* ----------- stylized ----------- */
#errored{
border:solid 2px #FAB6C2;
background:#FDE4E1;
font-weight: bold;
}
#successStyle{
border:solid 2px #C0D27B;
background:#E6EFC2;
font-weight: bold;
}
#stylized{
border:solid 2px #EE901F;
background:#FAB766;
}
.LV_valid {
color:#00CC00;
}
.LV_invalid {
color:#CC0000;
}
.LV_validation_message{
font-weight:bold;
margin:0 0 0 5px;
}
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
border: 1px solid #00CC00;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
border: 1px solid #CC0000;
}
</style>
<style type="text/css" media="screen">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
padding: 40px;
}
h1 {
margin-top: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 20px;
clear: both;
}
label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 3px;
clear: both;
}
</style>
</head>
<body>
<form id="submit" method="post" action="test.php">
<br>
<div id="stylized" class="myform">
<ul>
<li><label>Name:</label><input type="text" id="name" name="name" size="40"/></li>
<script type='text/javascript'>
var name = new LiveValidation('name');
name.add(Validate.Presence, { failureMessage: ' Name required!' });
name.add( Validate.Length, { minimum: 2 } );
</script>
<li><label>Email:</label><input type="text" id="email" name="email" size="40"/></li>
<script type='text/javascript'>
var email = new LiveValidation('email');
email.add(Validate.Presence, { failureMessage: ' Email required!' });
email.add( Validate.Email );
</script>
<li><label>Password:</label><input type="text" id="password" name="password" size="40"/></li>
<script type='text/javascript'>
var password = new LiveValidation('password');
password.add(Validate.Presence, { failureMessage: ' Password required!' });
password.add( Validate.Length, { minimum: 6 } );
</script>
<li><label>Verify Password:</label><input type="text" id="verifypassword" name="verifypassword" size="40"/></li>
<script type='text/javascript'>
var verifypassword = new LiveValidation('verifypassword');
verifypassword.add(Validate.Presence, { failureMessage: ' Password required!' });
verifypassword.add( Validate.Length, { minimum: 6 } );
verifypassword.add( Validate.Confirmation, { match: 'password' } );
</script>
<li><label>Company:</label><input type="text" id="custom1" name="custom1" size="40"/></li>
<script type='text/javascript'>
var custom1 = new LiveValidation('custom1');
custom1.add(Validate.Presence, { failureMessage: ' Company required!' });
</script>
<li><label>Country:</label><input type="text" id="custom2" name="custom2" size="40"/></li>
<script type='text/javascript'>
var custom2 = new LiveValidation('custom2');
custom2.add(Validate.Presence, { failureMessage: ' Country required!' });
</script>
<li><label>Job Title:</label><input type="text" id="custom3" name="custom3" size="40"/></li>
<script type='text/javascript'>
var custom3 = new LiveValidation('custom3');
custom3.add(Validate.Presence, { failureMessage: ' Job Title required!' });
</script>
<li><label>Telephone:</label><input type="text" id="custom4" name="custom4" size="40"/></li>
<script type='text/javascript'>
var custom4 = new LiveValidation('custom4');
custom4.add(Validate.Presence, { failureMessage: ' Telephone required!' });
</script>
<li><label>Address:</label><input type="text" id="custom5" name="custom5" size="40"/></li>
<script type='text/javascript'>
var custom5 = new LiveValidation('custom5');
custom5.add(Validate.Presence, { failureMessage: ' Address required!' });
</script>
<li><label>City:</label><input type="text" id="custom6" name="custom6" size="40"/></li>
<script type='text/javascript'>
var custom6 = new LiveValidation('custom6');
custom6.add(Validate.Presence, { failureMessage: ' City required!' });
</script>
<li><label>State:</label><input type="text" id="custom7" name="custom7" size="40"/></li>
<script type='text/javascript'>
var custom7 = new LiveValidation('custom7');
custom7.add(Validate.Presence, { failureMessage: ' State required!' });
</script>
<li><label>Postal Code:</label><input type="text" id="custom8" name="custom8" size="40"/></li>
<script type='text/javascript'>
var custom8 = new LiveValidation('custom8');
custom8.add(Validate.Presence, { failureMessage: ' Postal Code required!' });
</script>
<li><label>What programs and genres are you interested in?</label><input type="text" id="custom9" name="custom9" size="40"/></li>
<script type='text/javascript'>
var custom9 = new LiveValidation('custom9');
custom9.add(Validate.Presence, { failureMessage: ' Interest required!' });
</script>
<li>
<label>Terms and Conditions:</label><textarea name="terms" readonly='readonly' cols='40' rows='6'>Terms of Use</textarea>
</li>
<li>
<label> I have read and agree to the terms and conditions.</label><input name="custom10" id="custom10" type="checkbox" />
</li>
<li>
<button type="submit">Register</button>
</li>
</ul>
</div>
</form>
<div class="success" style="display: none;">
<div id="successStyle">
Thank you for submitting your request.<br><br>It will be reviewed shortly and a confirmation e-mail sent to you.
</div>
</body>
</html>
The form will submit as non-ajax if the ajax submit doesn't work.
Make sure that you have included the necessary jquery.js and any plugins needed for the function.
Also, triple check the following code for syntax errors and such:
$('#submit').ajaxForm(function() {
$('form#submit').fadeOut(function(){$('div.success').fadeIn();});
});
I would comment out the $('form#submit')... part first.
Related
At the core, I am trying to generate a table with links that can be clicked on a reload of a PartialView. Everything is working except I cannot get the page to stop refreshing. What I would like to do is only load the PartialView inside of the researchDiv. I do have <add key="UnobtrusiveJavaScriptEnabled" value="true" /> in the web.config.
I've changed the view and partialview to now use ajax, but the same issue is occurring and I'm not entirely sure of what to do. If I click a link the entire page refreshes instead of just the htmlContainer.
In my _LayoutDashboard I do have the unobtrusive jscripts, and when the page renders there are 0 Console errors.
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">
This is the view
#model Stocks.BLL.ExecutingTrades.Model.WatchList.ExeTradesWatchList
#{
ViewBag.Title = "WatchList";
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 20%;
border: 1px solid black;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-childsmall {
float: left;
}
.float-child {
width: 80%;
float: left;
height: 1000px;
}
</style>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<p>Last Update: #Html.Label(DateTime.UtcNow.ToString()) - Time in UTC</p>
<div class="float-container">
<div class="float-childsmall">
#foreach (var watchList in Model.ViewExecutingTradesUserWatchListFollowShort)
{
<table id="customers">
<caption class="text-center"><h2>#watchList.WatchListName</h2></caption>
<caption class="text-center"><p style="font:10px;">#watchList.WatchListDescription</p></caption>
<tr>
<th>Ticker</th>
</tr>
#foreach (var ticker in Model.ViewUserWatchListTickerModel.Where(y => y.UserWatchListId == watchList.UserWatchListId).ToList())
{
<tr>
<td><a target="_blank" href="https://finviz.com/quote.ashx?t=#ticker.Ticker">#ticker.Ticker </a></td>
<!--<td>
#{
<button type="button" class="btn" id='wlButton_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
#Html.DisplayFor(modelItem => #ticker.Ticker)
</button>
}
</td>-->
<div class="btnB" id='div_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
<p class="category-title">#ticker.Ticker</p>
</div>
</tr>
}
</table>
}
</div>
<div class="float-child" id="researchDiv">
<div id="htmlContainer">
#Html.Partial("_Research", new ExecutingTrades.Models.TickerInMem() { Ticker = "META" });
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".btnB").click(function () {
$.ajax({
url: '#Url.Action("_Research", "Dashboard")',
type: "GET",
data: { ticker: this.id.substring(this.id.lastIndexOf('+')) },
cache: false,
async: true,
success: function (data) {
$("#htmlContainer").html(data);
}
});
});
})
</script>
_Research which is the partialview
#model ExecutingTrades.Models.TickerInMem
<!-- TradingView Widget BEGIN -->
<style>
.tradingview-widget-container {
border: 3px solid #fff;
padding: 20px;
height: 650px;
}
</style>
<div class="tradingview-widget-container">
<div class="tradingview-widget-copyright"><span class="blue-text">#Model.Ticker</span> by TradingView</div>
<script type="text/javascript">
alert(#Model.Ticker);
</script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:#Model.Ticker",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_37810"
}
);
</script>
</div>
And the Controller
public ActionResult _Research(string ticker)
{
if (string.IsNullOrWhiteSpace(ticker))
return View();
var model = new TickerInMem();
model.Ticker = ticker.Split('+').Last();
model.Exchange = "NASDAQ";
return PartialView("_Research", model);
}
When I debug - everything works, i can hit the partial view being called and the model is correct.
When the page loads:
When clicking on a link:
All I really want to do is load the 2nd graph which I click it to where the partial view in rendered on the view.
So my MVC and Ajax are correct, the real issue was inside of the tradingview control, I had removed the div it was referencing in the container.
"container_id": "tradingview_37810"
So i have an ESP8266 (ESP-01) on AP mode and is working fairly good enough. I can receive data from the client and have used AJAX to handle the data. When connected to a single client, if i send data from the serial it shows up on the client webpage and is working as expected. But when i connect multiple clients, only the last connected client gets the data and the older ones remain static. Is there a way to send the data to multiple clients at once?
Here's the code.
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
const byte DNS_PORT = 53;
IPAddress apIP(172, 217, 28, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);
void handleRoot() {
String html ="<!DOCTYPE html> <html style=\"text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;\"> <head> <title>EDNCS</title> <meta name=\"viewport\" content=\"width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1\" /> </head> <body> <h1 style=\"color: #ff6600;\">Emergency Distributed Network Communication Service</h1> <p style=\"text-align: right; color: #ffff00;\">-Owned and maintained by Wolf Lusana.</p> <div style=\"color: #339966\"> <div> <strong><span style=\"color: #ff0000;\">Name: </span><input type=\"text\" id=\"name\"> <h2 span style=\"color: #ff6600;\">IMPORTANT BROADCASTS</h2> <div id=\"chatRoomDiv\" style=\"border:2px solid #ccc; width:300px; height: 300px; overflow-y: scroll; overscroll-behavior-x:unset; color:#FFFFFF; margin: 0 auto; display: flex; flex-direction: column-reverse;\"> <ul id=\"chatRoomList\" style=\"list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;\"></ul> </div> <br> <strong><span style=\"color: #ff0000;\">Message: </span> <input type=\"text\" id=\"message\"> <br><br> <button type=\"button\" onclick=\"sendData()\">CHAT</button> <button type=\"button\" >BROADCAST</button> <br> <script> function sendData() { var inputDataCH = document.getElementById(\"message\").value; var nameDataCH = document.getElementById(\"name\").value; var showDataCH = nameDataCH+\": \"+inputDataCH; if(nameDataCH==null||nameDataCH==\" \"||nameDataCH==\"\"||inputDataCH==null||inputDataCH==\" \"||inputDataCH==\"\"){ alert(\"Please enter your name and message. Thank you.\");} else{ var xhttpCH = new XMLHttpRequest(); xhttpCH.open(\"GET\", \"catchData?data=!\"+showDataCH, true); xhttpCH.send(); document.getElementById(\"message\").value = ''} } setInterval(function() { getData(); }, 500); function getData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { updateChatRoom(this.responseText); } }; xhttp.open(\"GET\", \"throwData\", true); xhttp.send(); } function updateChatRoom(needData){ var ulCH = document.getElementById(\"chatRoomList\"); var liCH = document.createElement(\"li\"); var objDivCH = document.getElementById(\"chatRoomDiv\"); objDivCH.scrollTop = objDivCH.scrollHeight; liCH.appendChild(document.createTextNode(needData)); ulCH.appendChild(liCH); } </script> </html>";
webServer.send(200, "text/html", html);
}
void handleData() {
String dataChat = webServer.arg("data");
if(dataChat[0]=='!'){
dataChat[0] = '%';
Serial.println(dataChat);
}
}
void handleThrow() {
String throwData;
if (Serial.available() > 0) {
throwData = Serial.readString();
}
webServer.send(200, "text/plane", throwData);
}
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP("Emergency Network Service");
dnsServer.start(DNS_PORT, "*", apIP);
webServer.onNotFound([]() {
handleRoot();
});
webServer.on("/",handleRoot);
webServer.on("/catchData", handleData);
webServer.on("/throwData", handleThrow);
webServer.begin();
}
void loop() {
dnsServer.processNextRequest();
webServer.handleClient();
}
And here is the HTML code
<!DOCTYPE html>
<html style="text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;">
<head>
<title>EDNCS</title>
<meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1" />
</head>
<body>
<h1 style="color: #ff6600;">Emergency Distributed Network Communication Service</h1>
<p style="text-align: right; color: #ffff00;">-Owned and maintained by Wolf Lusana.</p>
<div style="color: #339966">
<p>Please enter your name before sending your message on the network.</p>
<div>
<strong><span style="color: #ff0000;">Name: </span><input type="text" id="name">
<h2 span style="color: #ff6600;">IMPORTANT BROADCASTS</h2>
<div id="chatRoomDiv" style="border:2px solid #ccc; width:300px; height: 300px; overflow-y: scroll; overscroll-behavior-x:unset; color:#FFFFFF; margin: 0 auto; display: flex;
flex-direction: column-reverse;">
<ul id="chatRoomList" style="list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;"></ul>
</div>
<br>
<strong><span style="color: #ff0000;">Message: </span> <input type="text" id="message">
<br><br>
<button type="button" onclick="sendData()">CHAT</button> <button type="button" >BROADCAST</button>
<br>
<script>
function sendData() {
var inputDataCH = document.getElementById("message").value;
var nameDataCH = document.getElementById("name").value;
var showDataCH = nameDataCH+": "+inputDataCH;
if(nameDataCH==null||nameDataCH==" "||nameDataCH==""||inputDataCH==null||inputDataCH==" "||inputDataCH==""){
alert("Please enter your name and message. Thank you.");}
else{
var xhttpCH = new XMLHttpRequest();
xhttpCH.open("GET", "catchData?data=!"+showDataCH, true);
xhttpCH.send();
document.getElementById("message").value = ''}
}
setInterval(function() {
getData();
}, 500);
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
updateChatRoom(this.responseText);
}
};
xhttp.open("GET", "throwData", true);
xhttp.send();
}
function updateChatRoom(needData){
var ulCH = document.getElementById("chatRoomList");
var liCH = document.createElement("li");
var objDivCH = document.getElementById("chatRoomDiv");
objDivCH.scrollTop = objDivCH.scrollHeight;
liCH.appendChild(document.createTextNode(needData));
ulCH.appendChild(liCH);
}
</script>
</html>
Thanks.
Im trying to use Dropzone in my french laravel app (latest version) When I save my form I get the error
Call to a member function getClientOriginalName() on null
I try to see if my request sent something with dd() but I get null
This is my function on the controller
public function enregistrer(Request $request){
$photo = $request->file('file');
$imageName = $photo->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$demande = new Demande();
$demande->filename = $imageName;
$demande->cin= $request('cin');
$demande->apoge=$request('apoge');
$demande->generatedCode= uniqid();
$demande->save();
return redirect('/demande');
}
And this is my view
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- All for dropzone -->
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<title>Submission E-Docs</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<form role="form" action="{{url('demande/store')}}" method="POST" enctype="multipart/form-data" class="dropzone" id="dropzone">
#csrf
<label> Votre CIN:</label>
<input type="text" name="cin"/>
<label> Votre Apogée:</label>
<input type="text" name="apoge"/>
<!-- <input name="file" type="file" multiple /> -->
<br>
<input type="submit" class="btn btn-outline-primary btn-lx" style="font-family:'Quicksand', sans-serif; font-size:20px "value="Créer">
</form>
</div>
</div>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 10,
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 60000,
success: function (file, response) {
console.log(response);
},
error: function (file, response) {
return false;
}
};
</script>
</body>
</html>
I thought It was due the
You are renaming the user chosen file dropboxJS before sending it to the server
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name; //<-- gets a unique name
},
This name is dynamic and cannot be predicted on the controller, but in controller you are using
$photo = $request->file('file');
Obviously this would fail as the name could be anything based on the time it was sent. So first option is to remove the renameFile, but if that's not possible you need some way to access the file without knowing the name it was uploaded as
Try this
//$photo = $request->file('file');
$fileBag = $data->files; //Symfony\Component\HttpFoundation\FileBag
$collFile = $fileBag->all(); //an array of Symfony\Component\HttpFoundation\File\UploadedFile
if(count($collFile)){
$photo = $collFile[0];
//.. other code
}
else{
echo 'No file was uploaded';
}
This basically tries to get all files from the FileBag into an array then attempts to pick the first one from it.
I am making a little game for my website.
I will have a bunch of colourful circles that change colour when you hover but when you click each will disappear.
I have two questions.
1) How can I make some random circle disappear when I press a certain one (I mean I don't wanna to get rid of the one I clicked but instead some other random. Just to train coordination).
2) How can I add timer that will start the moment you click the first item and the moment you click the last one?
and here's the code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://static.jsbin.com/js/render/edit.js?3.35.2"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<title> game no 5 </title>
<style>
.container{
position:absolute;
top:100px;
left:40%;
width:100px;
}
.one{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
}
.two{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
left:100px;
}
.three{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
left:200px;
}
.four{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position:absolute;
top:100px;
}
.five{
width:100px;
height:100px;
border-radius:50px;
background:blue;
position:absolute;
top:100px;
left:100px;
}
.six{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
top:100px;
left:200px;
}
</style>
</script>
</head>
<body>
<div class="container">
<div class="one pop"></div>
<div class="two pop"></div>
<div class="three pop"></div>
<div class="four pop"></div>
<div class="five pop"></div>
<div class="six pop"></div>
</div>
<script>
var safeColors = ['00','33','66','99','cc','ff'];
var rand = function() {
return Math.floor(Math.random()*6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#"+r+g+b;
};
$('.pop').hover(function() {
$('div').each(function() {
$(this).css('background',randomColor());
});
});
$(".pop").click(function(){
$(this).toggle();
});
</script>
</body>
</html>
I'm trying to learn Kendo and want to a basic DateTimePicker using Kendo UI Core. I've added the following links to the head and code from the example but it only returns a basic input box with no datepicker or anything else. It seems like I'm missing a script or something. Anyone have any ideas on some help?
<head runat="server">
<script src="Kendo/js/jquery.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.datepicker.min.js"></script>
<script src="Kendo/js/kendo.datetimepicker.min.js"></script>
<script src="Kendo/js/kendo.popup.min.js"></script>
<script src="Kendo/js/kendo.timepicker.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="example">
<div id="to-do">
<input id="datetimepicker" />
</div>
<script>
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date()
});
});
</script>
<style>
#to-do {
height: 52px;
width: 221px;
margin: 30px auto;
padding: 91px 0 0 188px;
}
#to-do .k-datetimepicker {
width: 200px;
}
html.k-material #to-do {
height: 55px;
width: 260px;
padding: 87px 0 0 150px;
}
html.k-material #to-do .k-datetimepicker {
width: 240px;
}
</style>
</div>
</form>
</body>
You need to include kendo.calendar.min.js and kendo.popup.min.js before kendo.datepicker.min.js. The full list of JavaScript files requirements is available here.