I have this script inside a MS Sharepoint project. The javascript is using Papaparse to process a uploaded .CSV file. Could really use some help to get this script working. When I execute the code I get error: :TypeError: $(...).parse is not a function.
// Parse data from CSV file
function uploadCSV(callBack) {
try {
$('#fileInput').parse({
config: {
// base config to use for each file
delimiter: ";",
header: true,
//preview: 15,
async:true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results, file) {
callBack(results.data);
}
},
before: function() {
show();
},
error: {
// executed if an error occurs while loading the file
// or if before callback aborted for some reason
},
complete: function(results) {
}
});
}
catch(err) {
alert('Error inside function uploadCSV :' + err);
}
}
It looks like the problem has to do with how I load the papaparse library. Here is the source code from the page that loads the library:
<html lang="nl">
<head>
<script language="javascript" type="text/javascript" src="/sites/RTZB000/Scripts/JS/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/sites/RTZB000/Scripts/JS/papaparse.min.js"></script>
<script language="javascript" type="text/javascript" src="/sites/RTZB000/Scripts/DienstImport/uploadCSV.js"></script>
</head>
<body>
<style>
...
</style>
<div class="myTable">
<div class="myTableRow">
<div class="myTableCell fileUpload">
<p class="custom-para">Selecteer CSV</p>
<input type="file" name="csv" id="fileInput" class="upload">
</div>
<div class="myTableCell" id="uploadFile">
</div>
<div class="myTableCell" id="myUpload">
<input type="button" class="inputfile-2" onclick="myTrigger()" value="Uploaden" />
</div>
<div class="cssload-loader" id="loader">
<div class="cssload-inner cssload-one"></div>
<div class="cssload-inner cssload-two"></div>
<div class="cssload-inner cssload-three"></div>
</div>
<div class="myTableCell" id="mySpacer">
</div>
<div class="myTableCell" id="link1">
<a href="/sites/RTZB000/Dienststaten/Historie.aspx">
Historie
</a>
</div>
<div class="myTableCell" id="link2">
<a href="/sites/RTZB000/Lists/A_dienststaatTest/AllItems.aspx">
Alle items
</a>
</div>
<div class="myTableCell" id="link3">
<a href="/sites/RTZB000/Dienststaten/Vandaag.aspx">
Dienststaten
</a>
</div>
<div class="myTableCell" id="link4">
<a href="/sites/RTZB000/Lists/Telefoonlijst_ZHP/AllItems.aspx">
Telefoonlijst ZHP
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#uploadFile').hide();
$('#myUpload').hide();
$('#loader').hide();
// Laat de bestandsnaam zien naast de knop
document.getElementById("fileInput").onchange = function () {
var myVal = this.value.split(/\\/).slice(-1);
console.log(myVal);
document.getElementById("uploadFile").innerHTML = myVal;
$('#uploadFile').show();
$('#myUpload').show();
};
});
</script>
</body>
</html>
Maybe good to clarify that this page is part of Microsoft Sharepoint. Above html is embedded inside another html.
There are a few possibilities here:
JQuery isn't loading properly. Check your console for errors.
Something else is overriding your $ variable, probably another version of JQuery. Try to retrieve the original jQuery with $.noConflict().
The Paraparse library isn't loading as expected. Check your version of Paraparse and look for any errors in your console.
Related
So I have this div on my site
<div class="col-sm-4" >
<div id="RealTimeClose" class="nest">
<div class="title-alt">
<h6>
<span class="fontawesome-resize-horizontal"></span> Deposit Feed</h6>
<div class="titleClose">
<a class="gone" href="#RealTimeClose">
<span class="entypo-cancel"></span>
</a>
</div>
<div class="titleToggle">
<a class="nav-toggle-alt" href="#RealTime">
<span class="entypo-up-open"></span>
</a>
</div>
</div>
<div id="RealTime" style="min-height:296px;padding-top:20px;" class="body-nest">
<?php include('table1.php'); ?>
</div>
</div>
And Im trying to get it to continously load data from table1.php after like 1 second intervals... how can i go about doing this
$(function() {
function reloadTable(){
$.get( "table1.php", function( data ) {
$( "#RealTime" ).html( data );
});
}
reload = setInterval(reloadTable, 1000);
});
Uing JQuery / AJAX will solve your problem.
<html>
<head>
<title>New document</title>
<script src="jquery.js"></script> <!-- This is for including the JQuery, found at https://jquery.com -->
</head>
<body>
<script>
$(document).ready(function(){
$.ajaxSetup({cache:false});
});
var Interval = setInterval(function(){
$("#users").load("table1.php"); // $("#users") is a selector to select the id "users", and the load function explains itself...
}, 1000/*Refresh rate : currently one second*/);
</script>
<p>Users found: </p>
<div id="users">Users found her</div>
</body>
</html>
I am building an e-commerce site. Right now it's basically one HTML page that filters in based on page loads and clicks. I did it this because the entire site needed to be dynamic, as I'll be tying in a show shortly.
Everything seems to work fine now that I have placed the script on the actual pages instead of in a main .js file. I get a few hiccups here and there, and I'm hoping this issue will help fix some of them.
Sometimes when I click on the view cart button it throws back a type error saying that $a.mobile.document.on is not a function. This doesn't happen all the time. I can just click the button with the shopping cart open and the cart just refreshes. As I am clicking the button, nothing in the code should be changing, everything should be flowing the exact same. Why do I get the error sometimes? There is no pattern as to how often the error occurs (i.e. every 3rd click, etc...)
My code:
<head>
<meta charset="UTF-8"/>
<title>DATique</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jqm-icon-pack-fa.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="container" data-role="page" data-theme="b">
<div id="header" data-role="header">
<div id="headerGraphic"><img class="menu" src="img/products/DATique.png" alt="" align=center></div>
<!-- todo add tagline back in -->
<div data-role="footer" id="headerTagLine">an adult novelty company</div>
</div>
<div id="mainNavBar">
<div id="mainNav" data-role="navbar">
<ul>
<li class="home ui-icon-home">Home</li>
<li class="about ui-icon-question-circle">About</li>
<li class="contact ui-icon-envelope">Contact</li>
<li class="request ui-icon-lightbulb-o">Requests</li>
<li class="find ui-icon-location-arrow">Find</li>
</ul>
</div>
</div>
<div id="content" data-role="main">
<!-- todo add facebook plugin -->
<div id="sideBar">
<div id="sideNav">
<script>
</script>
</div>
</div>
<div id="productWindow">
<script>
</script>
</div>
</div>
<div data-role="footer" id="footer">
<ul>
<li id="addingItem"></li>
<li id="cartHolder">
<div class="view">View Cart</div>
<div class="cartImg"><img src="lib/png/shopping-cart.png"></div>
<div class="badge ui-corner-all"></div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var initialLoad = $.post('lib/aboutUs.php');
initialLoad.done(function (data) {
$('#productWindow').html(data);
});
var sideBar = $.post('lib/sideNav.php');
sideBar.done(function (data) {
$('#sideNav').html(data);
});
$('#cartHolder').unbind().click(function (data) {
var url = 'lib/cart.php';
var getCart = $.post(url);
console.log(data);
getCart.done(function (data) {
$('#content').html(data);
});
getCart.fail(function (data) {
console.log(data);
});
});
})
</script>
</body>
Here's my cart.php. The only file affected by the click event is the show cart button.
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<?php
session_start();
#$_SESSION = array();
$items = $_SESSION;
echo "<div id='showCart' class='ui-corner-all' style='max-width:400px;'>
<div data-role='header' data-theme='a' class='ui-corner-all' style='margin-top:20px;'>
<h1>Your Cart</h1>
</div>
<div role='main' class='ui-content ui-corner-all'>
<ul data-role='listview' data-split-icon='delete' data-split-theme='d'>";
foreach ($items['cart'] as $list) {
echo "<li ><a href='#'>
<img src = 'img/products/" . $list['itemNum'] . ".png'>
<h3 > " . $list['itemName'] . " </h3 >
<h1 style='text-align:right'> " . $list['price'] . "
</h1 ></a>
<a href='#' class='removeItem' name='" . $list['itemNum'] . "'>Remove Item</a>
</li >";
}
echo "</ul>
</div>
</div>"
?>
<script>
$(document).ready(function() {
console.log ("error ready");
function showCart() {
console.log("showCart Function");
var url = 'lib/cart.php';
var getCart = $.post(url);
getCart.done(function (data) {
console.log("cart received");
$('#content').html(data);
});
}
$('.removeItem').unbind().click(function () {
console.log("remove clicked");
var itemNum = {'itemNum': ($(this).attr('name'))};
var sent = $.post("lib/removeFromCart.php", itemNum);
sent.done(function () {
console.log("item removed from cart");
showCart();
});
});
});
</script>
I also have 2 other pages that have script on them that are loaded onto the home page by $.post.
Sorry if this question is easy, I just hope it isn't a period or brace somewhere. It's almost always a period or a brace. Again, looking to see if someone can tell me why this sometimes throws an error when I hit the view cart button. It seems to be doing it right after the console.log call in the cart.php.
Just a note not an answer
i had all my javascript in a myScript.js file that loaded at the bottom of the html of the main page. but none of the other pages with scipts would read the javascript on the main page for some reason until i loaded the .js file into each page.
$(document).ready(function() {
code 1
....});
$(document).ready(function() {
code 2
....});
code 1 is not able to access code 2 and vice versa, in php this is akin to this
function one(){
code 1
}
function too(){
code 2
}
One way around that is to globalize stuff, by using window. although it's not usually recommended.
var one;
var window.one;
for example( scope resolution ). Other ways involve using the DOM, by attaching to a object on the page, such as how a plugin works. for example using $(element).data('mydata', {foo:'bar'});
not sure if this was what you were saying but the explanation is way to long for a comment.
I am using the plugin ScriptCam to basicly take a picture with the webcam. I want to save the img once the user clicks "snapshot to image". It can download via the web browser thats okay for now, the end goal is have the img download to a particular destination folder, i would like this to work without using any php.
My Code:
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="scriptcam.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("#webcam").scriptcam({
showMicrophoneErrors:false,
onError:onError,
cornerRadius:20,
cornerColor:'e3e5e2',
onWebcamReady:onWebcamReady,
uploadImage:'upload.gif',
onPictureAsBase64:base64_tofield_and_image
});
});
function base64_tofield() {
$('#formfield').val($.scriptcam.getFrameAsBase64());
};
function base64_toimage() {
$('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64());
};
function base64_tofield_and_image(b64) {
$('#formfield').val(b64);
$('#image').attr("src","data:image/png;base64,"+b64);
};
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
}
function onError(errorId,errorMsg) {
$( "#btn1" ).attr( "disabled", true );
$( "#btn2" ).attr( "disabled", true );
alert(errorMsg);
}
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
$.each(cameraNames, function(index, text) {
$('#cameraNames').append( $('<option></option>').val(index).html(text) )
});
$('#cameraNames').val(camera);
}
</script>
</head>
<body>
<div style="width:330px;float:left;">
<div id="webcam">
</div>
<div style="margin:5px;">
<img src="webcamlogo.png" style="vertical-align:text-top"/>
<select id="cameraNames" size="1" onChange="changeCamera()" style="width:245px;font-size:10px;height:25px;">
</select>
</div>
</div>
<div style="width:135px;float:left;">
<p><button class="btn btn-small" id="btn2" onclick="base64_toimage()">Snapshot to image</button></p>
</div>
<div style="width:200px;float:left;">
<p><img id="image" style="width:200px;height:153px;"/></p>
</div>
<a href="#" class="downloadAsImage hide" download>Download</a>
<script type="text/javascript">
$(function() {
html2canvas($('.main'), {
onrendered: function(canvas) {
$('.downloadAsImage').attr('href', canvas.toDataURL()).removeClass('hide');
}
});
});
</script>
</body>
</html>
I am really having a hard time with this. the script at the bottom will save the whole page and when it does this the img isn't even saved to the page. I just want to save the img only that goes into the
<div style="width:200px;float:left;">
<p><img id="image" style="width:200px;height:153px;"/></p>
</div>
I'm trying to do a simple hello world using jQuery and Ajax for getting a response from a php in the same folder.
The jQuery code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
rel="stylesheet" type="text/css">
<script type="text/javascript">
function jsonIt(){
var x = document.getElementById("input1").value;
var y = document.getElementById("input2").value;
var obj = '{'
+'"id" : "'+x+'",'
+'"name" : '+y+''
+'}';
var person = {
id:x,
name:y
};
var str_json = JSON.stringify(person);
$.ajax({
type: 'get',
url: 'a.php',
dataType: 'text',
data: obj,
success: function(data) {
alert(data);
},
error: function(e){
console.log(e.message);
//alert('error');
}
});
alert("Pause");
}
</script>
</head>
<body>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-2">
<label for="inputEmail3" class="control-label">Email</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" id="input1" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<label for="inputPassword3" class="control-label">Password</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" id="input2" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="jsonIt()">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Simply, called using the HTML:
<button type="submit" class="btn btn-default" onclick="jsonIt()">Sign in</button>
And the php, in the same folder, called a.php is:
<?php echo "Helo world"; ?>
So when I click the button that calls the function jsonIt() I get the following response: "[object XMLDocument]" and not Hello world.
What could be?
EDITED
After the modifications the header code will be:
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
function jsonIt(){
$.ajax({
method: 'get',
url: 'a.php',
done: function(data) {
alert(data);
},
fail:function( jqXHR, textStatus ) {
console.log( "Request failed: " + textStatus );
}
});
//alert("Pause");
}
$(document).on('click', 'button[type="submit"]', function(e) {
e.preventDefault(); // prevents the default click action
jsonIt();
});
});
</script>
</head>
And the markup of the button like:
<button type="submit" class="btn btn-default" >Sign in</button>
But it stills returning me "[object XMLDocument]" and not Hello world.
If you're going to add jQuery scripts to the top of the page you need to surround them with a document ready handler:
<script type="text/javascript">
$(document).ready(function() {
function jsonIt(){
$.ajax({
method: 'GET',
url: 'a.php',
//url: 'http://practica00.tk/a.php',
dataType: 'text'
})
.done(function(data) {
alert(data);
})
.fail (function( jqXHR, textStatus ) {
console.log( "Request failed: " + textStatus );
});
alert("Pause");
}
$(document).on('click', 'button[type="submit"]', function(e) {
e.preventDefault(); // prevents the default click action
jsonIt();
});
});
</script>
The document ready handler insures that all of the DOM has loaded before the jQuery runs and attaches its event handlers. If you don't wrap in a document ready handler the jQuery may attempt to attach event handlers and methods to items which are not yet loaded into the DOM.
You really shouldn't use inline JavaScript to call functions, especially since you have jQuery available to you. If you are going to you still need to prevent default actions.
<button type="submit" class="btn btn-default" onclick="jsonIt(); return false;">Sign in</button>
If you'd like to use jQuery for the click you would remove the inline JavaScript from the button and add the following to your jQuery code:
$(document).on('click', 'button[type="submit"]', function(e) {
e.preventDefault(); // prevents the default click action
jsonIt();
});
I'm not sure why you're doing anything with a JSON string as you do not use it in your query anywhere. you never define the obj, so you shouldn't send it.
EDIT: I have updated my answer to reflect the more proper AJAX return methods with the version of jQuery being used.
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
If you want to do a simple "hello world" you should remove any code that distracts from the purpose before adding any complexity.
Additionally: To perform AJAX (and consequently PHP) you must execute the code from an operating web server, either your localhost or a test host where everything can be executed properly.
I downloaded handlebars from GitHub
and it contained handlebars.js and plugin.js in the source folder.As for told in the documentation the way to use the render function to fetch template from a file is as follow:
$.handlebars({
templatePath: 'path/to/templates',
templateExtension: 'hbs'
});
// now this will fetch <path/to/templates/content.hbs>
$('#some-element').render('content', {
// ...
});
and what i did did to use it is:
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/handlebars.js" type="text/javascript"></script>
<script src="js/plugin.js" type="text/javascript"></script>
$.handlebars({
templatePath: 'lib/assets',
templateExtension: 'html'
});
var data = {"username":uname};
$('.container').render('lockscreen', data);
lib/assets/lockscreen.html contains code like this:
<div class="center">
<div class="headline text-center" id="time"></div>
<div class="lockscreen-name" style="font-weight:600;font-size:16px;"><b>{{username}}</b></div>
<div class="lockscreen-item">
<div class="lockscreen-image"><img src="images/avatar5.png" alt="user image"/></div>
<div class="lockscreen-credentials">
<div class="input-group">
<input type="password" class="form-control" placeholder="password" id="pa_asd"/>
<div class="input-group-btn">
<button class="btn btn-flat"><i class="fa fa-arrow-right text-muted"></i></button>
</div>
</div>
</div>
</div>
<div class="lockscreen-link">Or sign in as a different user</div>
</div>
And I still can't get it done.I tried it using otherway...using a static function created by koorchik
function render(tmpl_name, tmpl_data) {
if ( !render.tmpl_cache ) {
render.tmpl_cache = {};
}
if ( ! render.tmpl_cache[tmpl_name] ) {
var tmpl_dir = '/lib/assets';
var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
var tmpl_string;
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
dataType: 'html',
success: function(data) {
tmpl_string = data;
}
});
render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
}
return render.tmpl_cache[tmpl_name](tmpl_data);
}
var rendered_html = render('lockscreen', data);
but got some sort of error like
_ is undefined
Can anybody help me????
That's because your code uses underscore.js, which is an external utility library, and _.template() is actually a function from that library. Your code doesn't find it because you haven't included the underscore.js script.
Here is a link to the latest minified version of underscore.js: http://underscorejs.org/underscore-min.js
You should include it before loading your resources, like this:
<script src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/handlebars.js" type="text/javascript"></script>
<script src="js/plugin.js" type="text/javascript"></script>