I am pretty new to web programming specially javascript and other front end logic. I am seeing this weird error where my code works perfectly fine on latest version of Firefox on Windows 10 but does not work on latest version of chrome on Windows 10.
Basically I have a form which consists of two multi select drop down and two buttons. For both these buttons, I send ajax POST request in their click listener with checkbox params to python flask server which in turn creates a file on the server then in success of my POST ajax, I send get request to download the file that I just created. In Firefox and chrome both, my POST calls are going and files are being generated correctly, however get request is not sent by chrome to download the file but firefox is sending correct get request to get the file.
Another weird thing is, chrome does download a file upon get request which it is sending somewhere but it is not reaching my server. I do not see get request in my flask server log from chrome but it does show up for firefox. In both cases files are downloaded but chrome downloads wrong file from some wrong place.
I also tried adding delay on server thinking, file is still being generated when POST request is returned but that also didn't change chrome behaviour.
Below is the snippet of my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" type="image/x-icon" href="static/images/main.png">
<title>Link Curation - Curated Results</title>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen"/>
<script>
$(document).ready(function(){
$('#progress').hide();
$('select').material_select();
// Download jsonlines
$("#jlines").click(function(e){
// Required for non-chrome browser
e.preventDefault()
var tags = $('#museums').val();
var codes = $('#codes').val();
var userObj = new Object();
userObj.data = {"tags":tags,"codes":codes,"type":"jlines"};
json_data = JSON.stringify(userObj);
console.log(json_data);
var sv = '{{server}}'.concat("/download");
$.ajax({
method: 'POST',
url: sv,
data: json_data,
contentType: 'application/json',
beforeSend: function(){
$('#progress').show();
document.getElementById("jlines").disabled = true;
console.log("downloading...")
},
success: function(data){
console.log("File Created!");
$('#progress').hide();
document.getElementById("jlines").disabled = false;
window.location.href = "/download?type=jlines";
},
error: function(xhr){
console.log('Request Status: ' + xhr.status + ' \nStatus Text: ' + xhr.statusText + ' \nResponse Text: ' + xhr.responseText);
Materialize.toast("Something went wrong. Please try again!",5000);
$('#progress').hide();
document.getElementById("jlines").disabled = false;
}
});
});
// Download triples
$("#triples").click(function(e){
// Required for non-chrome browser
e.preventDefault()
var tags = $('#museums').val();
var codes = $('#codes').val();
var userObj = new Object();
userObj.data = {"tags":tags,"type":"triples"};
json_data = JSON.stringify(userObj);
console.log(json_data);
var sv = '{{server}}'.concat("/download");
$.ajax({
method: 'POST',
url: sv,
data: json_data,
contentType: 'application/json',
beforeSend: function(){
$('#progress').show();
document.getElementById("triples").disabled = true;
console.log("downloading...")
},
success: function(data){
console.log("File Created!");
$('#progress').hide();
document.getElementById("triples").disabled = false;
window.location.href = "/download?type=triples";
},
error: function(xhr){
console.log('Request Status: ' + xhr.status + ' \nStatus Text: ' + xhr.statusText + ' \nResponse Text: ' + xhr.responseText);
Materialize.toast("Something went wrong. Please try again!",5000);
$('#progress').hide();
document.getElementById("triples").disabled = false;
}
});
});
});
</script>
<style>
#body {
min-height: calc(100vh - 10px);
}
</style>
</head>
<body>
<div>{% include 'header.html' %}</div>
<div id="body">
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<div class="row center">
<br><br>
<h5> Download the curated results (Tip: Select ulan to download all data!) </h5>
<br><br>
<div class="header col s12 m4">
<select multiple id="museums" >
<option value="" disabled selected>Choose museum(s)</option>
{% for tag in keys %}
<option value={{tag}}>{{tag}}</option>
{% endfor %}
</select>
</div>
<div class="header col s12 m4">
<select multiple id="codes">
<option value="" disabled selected>Choose pair status(s)</option>
<option value="3">Match</option>
<option value="4">Unmatch</option>
<option value="5">Not Sure</option>
</select>
</div>
<div class="header col s12 m4">
<form name ="download_data">
<div id="progress" class="preloader-wrapper small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<button id = "jlines" type="submit" class="btn" >Jsonlines</button>
<button id = "triples" type="submit" class="btn" >Triples</button>
</form>
</div>
</div>
</div>
</div>
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5>Curated results from all museums will show up below. You can sort them based on the status or URI or even search based on museum.</h5>
<br><br>
<iframe class="header col s12 light" src="datatable" style="border:0" height="1000" ></iframe>
</div>
</div>
</div>
</div>
<div>{% include 'footer.html' %}</div>
</body>
</html>
Thanks for the help.
Nilay
Related
This question already has an answer here:
How to upload a file via POST (doPost) to a Google Script's Web App?
(1 answer)
Closed 3 years ago.
I have an HTML form that lets the user upload a file. I want to then upload that file to my google drive.
My Javascript when the user clicks submit.
var data = new FormData();
data.append('resume', document.getElementById('file'));
fetch(scriptURL, {method: 'POST', body: data })
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
My google script
doPost(e){
uploadFile(e.parameter['file])
}
function uploadFile(file, name){
var blob = file.myFile;
var name = "file";
var contentType = "application/pdf";
var fileBlob = Utilities.newBlob(blob, contentType, name);
var file = folder.createFile(fileBlob);
}
I want the uploaded pdf to be stored in my google drive but What my current code gives me is a 9 byte pdf file that just says undefined
Try this -
Code.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('Form').setTitle('Form')
}
function upload(obj) {
var blob = Utilities.newBlob(Utilities.base64Decode(obj.data), obj.mimeType, obj.fileName)
DriveApp.createFile(blob);
return 'Done';
}
Form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<base target="_top">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function uploadData() {
const f = document.getElementById('upFile');
[...f.files].forEach((file, i) => {
const fr = new FileReader();
fr.onload = (e) => {
const data = e.target.result.split(",");
const obj = {
fileName: f.files[i].name,
mimeType: data[0].match(/:(\w.+);/)[1],
data: data[1]
};
var buttonID = document.getElementById('uploadButton');
$(buttonID).attr("disabled", "disabled");
google.script.run.withSuccessHandler((id) => {
M.toast({
html: id
});
$(buttonID).removeAttr("disabled");
}).upload(obj);
}
fr.readAsDataURL(file);
});
}
</script>
</head>
<body>
<div class="container center">
<div id="upload" class="col s12">
<form onsubmit="event.preventDefault(); uploadData()">
<div class="row">
<div class="input-field col s12 m6 l4 offset-m3 offset-l4">
<div>
<h4><br /></h4></div>
<div class="file-field input-field">
<div class="btn blue">
<span>File</span>
<input type="file" name="upFile" id="upFile" required="" aria-required="true">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload file" required="" aria-required="true">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l4 offset-m3 offset-l4">
<button class="waves-effect btn blue" type="submit" id="uploadButton">Upload</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I took the liberty of adding some Materialize CSS - hope that's alright :)
I'm doing some assignment for school, and I'm stuck at passing array from js to php.
I have to say I'm not some expert and I'm still learning. I can't figure out what am I missing. Hope someone will help me.
I try like this.
if(bets.length > 0) {
$.ajax({
url: "mybet.php",
method: "POST",
data: { bets : JSON.stringify( bets ) },
success: function(res) {
console.log(res);
}
});
}
and php file
if (isset($_POST['bets'])) {
$bets = json_decode($_POST['bets'], true);
print_r($bets);
}
bets is an array in js.. and I want if I click on button proceed to collect that array and pass to php so I can work with it. I'm getting undefined index for bets on line $bets = json_decode($_POST['bets']);
print_r($_POST) is empty
You are not sending a 'proceedBet' variable in your ajax request, either you send that variable by changing the data like this:
if(bets.length > 0) {
$.ajax({
url: "mybet.php",
method: "POST",
data: { bets : JSON.stringify( bets ), proceedBet: 'Some Value' },
success: function(res) {
console.log(res);
}
});
}
Or you have to change your condition to check if the bets exist like so:
if (isset($_POST['bets'])) {
$bets = json_decode($_POST['bets'], true);
print_r($_POST['bets']); // use print_r to check the data in the array
// User::redirect("ticket.php");
}
Hi here is an example I made for you:
first the html part is a simple modal to display data from request.php if the data I send from my js array is okay:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" id="btnDisplayModal" >
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal" >×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<br>
<div id="add-takeout-messages">
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
the javascript part is an ajax call which display data inside the modal when the request is done:
$(document).ready(function() {
var formData = {id:"1",name:"stan",lastname:"chacon",color:"blue"};
function _ajaxMessage(formData){
return $.ajax({
url: "request.php",
type: 'POST',
data:{data:JSON.stringify(formData)},
dataType: 'json'
})
}
$("#btnDisplayModal").on('click', function(){
_ajaxMessage(formData)
.done(function(response){
console.log(JSON.stringify(response));
$('#add-takeout-messages').empty();
$.each(response.messages,function(index,value){
console.log(index,value);
$('#add-takeout-messages').append('<div class="alert alert-success">' +
'<button type="button" class="close" data-dismiss="alert">×</button>' +
'<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> From: '+ value.from + '<br>' + ' msg: ' + value.msg +
'</div>')
})
$("#myModal").modal();
})
})
})
The request.php file is simple like the request file you are already using, so I guess the problem you have is your array, maybe it has an invalid format and thats why it goes empty.
if (isset($_POST["data"])) {
$data = json_decode($_POST["data"],true);
if ($data["name"] == "stan") {
$array = [
"status"=>"success",
"messages"=> [
array('date' => "2019-04-11", 'msg'=>'Love you', 'from'=>'Annie' ),
array('date' => "2019-04-10", 'msg'=>'Have a nice day', 'from'=>'Annie' )
]
];
echo json_encode($array);
}
}
check your array ant let us know if that was the problem =)
Hiope it helps
Simple working example you can change the logic if needed.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
let bets = [1,2,3]; // This must come dynamically.
if(bets.length > 0) {
$.ajax({url: "server.php", method: "POST", data: { bets : JSON.stringify( bets) }, success: function(result){
$("#div1").html(result);
}});
}
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Send Ajax Request</button>
</body>
</html>
Server side
<?php
if (isset($_POST['bets'])) {
$bets = json_decode($_POST['bets'], true);
print_r($_POST['bets']);
}
Im trying to emulate a simple page which includes facebook info like username, email etc. I'm not able to obtain the user's posts from the json received. Tried various methods like making the feed a different function but all failed. Please help.
$(document).ready(function() {
var fbtoken = 'your token here';
function getInfo() {
$.ajax('https://graph.facebook.com/me?access_token=' + fbtoken, {
success: function(response) {
console.log(response);
console.log(typeof(response));
$("#Id").html('<a target="blank" href="https://facebook.com/' + response.id + '">https://facebook.com/' + response.id + '</a>');
$('#name').text(response.name);
$('#about').text(response.about);
$('#birthday').text(response.birthday);
$("#email").text(response.email);
}
}
);
}
function getFeed() {
$.ajax('https://graph.facebook.com/me/posts?access_token=' + fbtoken, {
success: function(response) {
console.log(response);
console.log(typeof(response));
$("#feed").text(response.posts.data);
}
});
}
$("#loaddata").on('click', getInfo)
$("#loadfeed").on('click', getFeed)
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="FacebookPro.js"></script>
<title>Facebook Mockup</title>
</head>
<body>
<div class="container">
<h1 align="center">My Facebook Mockup</h1>
<a class="btn btn-primary" style="margin-left: 50%" id="loaddata">Run</a>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Id</h3><span id="Id"></span>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Name</h3><span id="name"></span>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>About</h3><span id="about"></span>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Birthday</h3><span id="birthday"></span>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Email</h3><span id="email"></span>
</div>
</div>
<h2 align="center">Feed</h2>
<a class="btn btn-primary" style="margin-left: 50%" id="loadfeed">Run</a>
<div class="row">
<h3>FB Feed=</h3><span id="feed"></span>
</div>
</div>
</div>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</html>
You can insert your token in the fbToken variable using Graph API Explorer in Tools And Support.
I think i'm making a mistake in retrieving the data part as it is an object-of-array but i'm having a hard time figuring out how to do it right.
I apologize ahead of time if this is something stupid like a semi-colon, but I'm having a hard time getting angular to recognize my controller (im a newbie to angular).
I get an error, Image Controller is undefined.
Notes: I am using the angular file upload plugin and this is a web api 2.0 application.
I have 2 Javascript files UniqueAPIStart, UniqueAPIImages
UniqueAPIStart(Fixed):
var UniqueAPI = angular.module('UniqueAPI', ['angularFileUpload']);
UniqueAPIImages(Fixed):
UniqueAPI.controller('ImageController', ['$scope', '$upload', function ($scope, $upload) {
$scope.$watch('myFiles', function() {
for (var i = 0; i < $scope.myFiles.length; i++) {
var file = $scope.myFiles[i];
$scope.upload = $upload.upload({
url: '/api/AdminImages', // upload.php script, node.js route, or servlet url
//method: 'POST' or 'PUT',
//headers: {'Authorization': 'xxx'}, // only for html5
//withCredentials: true,
data: { myObj: $scope.myModelObj },
file: file, // single file or a list of files. list is only for html5
//fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
//fileFormDataName: myFile, // file formData name ('Content-Disposition'), server side request form name
// could be a list of names for multiple files (html5). Default is 'file'
//formDataAppender: function(formData, key, val){} // customize how data is added to the formData.
// See #40#issuecomment-28612000 for sample code
}).progress(function(evt) {
console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :' + evt.config.file.name);
}).success(function(data, status, headers, config) {
// file is uploaded successfully
alert('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);
}).error(function (data, status) {
alert(data.error);
});
//.then(success, error, progress); // returns a promise that does NOT have progress/abort/xhr functions
//.xhr(function(xhr){xhr.upload.addEventListener(...)}) // access or attach event listeners to
//the underlying XMLHttpRequest
}
/* alternative way of uploading, send the file binary with the file's content-type.
Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed.
It could also be used to monitor the progress of a normal http post/put request.
Note that the whole file will be loaded in browser first so large files could crash the browser.
You should verify the file size before uploading with $upload.http().
*/
// $scope.upload = $upload.http({...}) // See 88#issuecomment-31366487 for sample code.
});
}]);
And then my cshtml:
#section scripts
{
<script type="text/javascript" src ="/Scripts/API/ImageController.js"></script>
}
<div class="container" ng-app="UniqueAPI">
<div class="row">
<div class="col-md-4" ng-controller="ImageController">
<form action="javascript:void(0);">
<div class="form-group">
<label for="imgDescription">Email address</label>
<input type="text" class="form-control" id="imgDescription" placeholder="Image Description">
<button ng-file-select ng-model="files" multiple="true">Attach Any File</button>
<div ng-file-drop ng-model="files" class="drop-box"
drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}"
multiple="true" allow-dir="true" accept="image/*">
Drop Images here
</div>
</div>
</form>
</div>
</div>
</div>
LayoutFile:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
<li>#Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular-file-upload-all.js"></script>
<script type="text/javascript" src="~/Scripts/angular-file-upload-shim.js"></script>
<script type="text/javascript" src="~/Scripts/angular-file-upload.js"></script>
<script type="text/javascript" src="~/Scripts/API/UniqueAPIStart.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
First of all I could't see you importing the required libraries:
<script src="https://angular-file-upload.appspot.com/js/angular-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
and. You are creating the module twice:
var UniqueAPI = angular.module('UniqueAPI', []);
angular.module('UniqueAPI', ['angularFileUpload']);
It should be something like this
var UniqueAPI = angular.module('UniqueAPI', ['angularFileUpload']);
I have one main page with menu buttons. When clicked, they change the main "content" area with AJAX. In the header of this page I have all of the appropriate Dojo references.
I know the AJAX works because i have successfully pulled in and displayed data in the content area, and I know the Dojo Dijit TimeTextBox works because I have successfully displayed it before I make any calls with AJAX.
When I try to make a call with AJAX and pull in new input fields for the TimeTextBox widget, they display only as regular text boxes, and seem to ignore the fact that I have them set to be the TimeTextBox.
Can anyone tell me how to fix this issue?
EDIT:
Here is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Page</title>
<link rel="stylesheet" type="text/css" href="styles/adminPage.css" />
<link rel="stylesheet" type="text/css" href="styles/adminStyle.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TimeTextBox");
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
require(["dojo/ready", "dijit/form/TimeTextBox"],
function(ready, TimeTextBox){
ready(function(){
new TimeTextBox({name: "timeInput", value: new Date(),
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
}
}, "timeInput");
});
});
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
$('#content').fadeIn('slow');
}
});
}
</script>
</head>
<body class="claro">
<div id="container">
<div id="header">
<span class="headerTitle">Lehman Nursery</span>
</div>
<div id="content">
<input type='text' name='date1' id='time1' value='T15:00:00'
data-dojo-type='dijit.form.TimeTextBox'
required='true' />
</div>
<div id="menu">
<a onclick="getPage('Home')">
<div id="homeButton" class="menuAppearance">
<img src="images/icons/home.png"/><br />
</div>
</a>
<a onclick="getPage('Links')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/links.png"/><br />Links</div>
<div class="description">
</div>
</div>
</a>
<a onclick="getPage('Hours')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/pictures.png"/><br />Pictures</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Events')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/events.png"/><br />Events</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Feedback')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/feedback.png"/><br />Feedback</div>
<div class="description">
</div>
</div>
</a>
</div>
</div>
</body>
<form>
<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" /></form>
^^That is the data being pulled in
Are the css files for those dijits pulled up? You might want to require them at the beginning (when the page loads) which get cached and will be used when the dijits are pulled via AJAX.
EDIT: Not sure but can suggest you try to add startup() call for the widget you created.
it apears to me like you are forgoetting to call:
dojo.parser.parse();
after setting the content i your ajax call. it should look like this:
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
dojo.parser.parse();
$('#content').fadeIn('slow');
}
});
}
the dojo parser will not execute by itself, it is too resourses expensive to do that, so each time the content changes so you add a dijit you moust call dojo.parser.parse();