jquery bulk upload javascript issue - javascript

I am running into a javascript issue where it's getting a "Uncaught ReferenceError: $ is not defined". With my reading I think it's the order of when I am trying to do $(document).ready before the javascript is loaded up but I am not sure what to do about it. I have tried moving the jquery and the fileuploadmulti above the script but then I get "Uncaught TypeError: $(...).uploadFile is not a function" and then I go down the road of chicken and egg and don't know what is correct. Any help or point in the right direction would be helpful. Thank you.
<script>
//This is where my error shows up
$(document).ready(function(){
var settings = {
url: "/index.php/upload",
method: "POST",
allowedTypes:"jpg,png,gif,doc,pdf,zip",
fileName: "myfile",
multiple: true,
onSuccess:function(files,data,xhr)
{
$("#status").html("<font color='green'>Upload is success</font>");
},
afterUploadAll:function()
{
alert('All Files uploaded');
},
onError: function(files,status,errMsg)
{
$("#status").html("<font color='red'>Upload is Failed</font>");
}
};
$("#mulitplefileuploader").uploadFile(settings);
});
</script>
<script src="/js/jquery.js"></script>
<script src="/js/fileuploadmulti.min.js"></script>
<div class="boxed link">
<div id="mulitplefileuploader">Upload</div>
<div id="status"></div>
</div>
<div class="col-lg-12">
<h1>Adding pages to <?php echo $model->name; ?></h1>
</div>

First check whether JQuery is loaded or not.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
And wrap the all JQuery code inside $(document).ready(function(){ \\code here }); function.
$(...).uploadFile is not a function error because you are not loading the fileupload plugin properly.
Check all script tag URL'S are right or not.

You are using the $ before including jQuery. Try to include it before.

Try to include
<script src="/js/jquery.js"></script>
<script src="/js/fileuploadmulti.min.js"></script>
before $(document).ready(function(){ });

Related

Geo Api in TPL file

I am using this code to display a div only for clients from United Kingdom and it works through built-in page builder - prestashop.
Unfortunately I cannot make it work in tpl file for address form.
Basically I need a text below the address form.
<div class="hide GB">text</div>
<script type="text/javascript">
{literal}
$.get("https://freegeoip.app/json/", function (response) {
document.getElementsByClassName(response.country_code)[0].style.display = "block";
}, "jsonp");
{/literal}
</script>
I also tried this one:
{literal}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$.ajax("https://freegeoip.app/json/")
.done(function (e) {
$('.hide').eq(e.country_code === 'GB' ? 0 : 1).show();
});</script>
<div class="hide">text</div>
<div id="country_code"></div>
{/literal}
They both work in the fiddle. They both work in the page builder when added as raw html (without literal tags ofc)
However I cannot make them to work in adrress-form.tpl file for some reason. The text just wont show. However the country code is being displayed where I want it. It is just the text that wont.
Any ideas?
Regards
{literal}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="GB">text</div>
<script>$.get("https://freegeoip.app/json/", function (response) {
$("#country_code").html(response.country_code);
if(response.country_code=='GB'){
document.getElementById(response.country_code).style.display = "block";
}
}, "jsonp");</script>
{/literal}
I actually solved this with this code.
CSS wise:
#GB{display:none;}

A strange .append error

This is a simple sort fiddle, with a hard to debug error: it doesn't .append, on the other hand alert(data) is working, so this is not a ajax issue. Here is the code:
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>Enter a sequence with spaces:</div>
<form method="post">
<input type="text" id="n" name="numbers">
<button>Sort</button>
</form>
<div>The sorted sequence is: <span id="s"></span></div>
<script>
$(document).ready(function(){$("form").submit(function({$.post("/tests/sort.php",$(this).serialize(),function(data){JSON.parse(data);$("#s").append(data);});})});
</script>
</html>
with the php
<?php
$s=$_POST["numbers"];
$a=explode(" ",$s);
sort($a);
echo json_encode($a);
?>
Can anybody please spot the error?
As I mentioned in comment for your question you have an error in JS code. To avoid errors like this you have to edit code for better reading. Here is an example:
$(document).ready(function () {
$("form").submit(function () {
$.post("/tests/sort.php", $(this).serialize(), function (data) {
JSON.parse(data);
$("#s").append(data);
});
})
});
You are missing a right parenthesis ) and a semicolon ;. You can use jshint.com to check your syntax, and should indent your code so it is easily readable:
$(document).ready(function(){
$("form").submit(function(){
$.post("/tests/sort.php",$(this).serialize(),function(data){
JSON.parse(data);$("#s").append(data);
});
});
});

"Uncaught ReferenceError: wistiaEmbed is not defined"

I get this error on this page:
http://pages.purevisionmethod.com/myopia-class-replay/
I try to get this code execute:
<div style="width:1240px;max-width:100%;text-align:center;margin:5rem auto 0 auto;">
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_4uf1zbu4se videoFoam=true" style="height:100%;width:100%"> </div></div></div></div>
<script>
window._wq = window._wq || [];
wistiaEmbed.bind("secondchange", function (s) {
if(s === 20) {
$('.hiding').fadeIn(500);
}
});
</script>
I get the error: “Uncaught ReferenceError: wistiaEmbed is not defined”
I cannot work out what's going on. The reference should be defined by
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
But no matter where I move the file, if in the header, footer, anywhere, I still get the same error.
Can you see why?
Thanks!!
Sorry, I used the wrong type of code to integrate this.
So, for anyone using Wistia who bumps into the same problem:
You need to use the API code to get this to work:
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div id="wistia_INSERT_YOUR_VIDEO_ID_HERE" class="wistia_embed" style="height:100%;width:100%"> </div></div></div>
<script src="//fast.wistia.com/assets/external/E-v1.js" charset="ISO-8859-1"></script>
<script>
wistiaEmbed = Wistia.embed("INSERT_YOUR_VIDEO_ID_HERE");
</script>
<script>
(function($){
wistiaEmbed.bind("secondchange", function (s) {
if(s === 20) {
$('.hiding').show();
}
});
})(jQuery);
</script>
So, you have to paste in you video ID where I placed: INSERT_YOUR_VIDEO_ID_HERE.
You can find that in the normal Wistia javascript embed code. It's the only weird number code in it.
For <div id="wistia_INSERT_YOUR_VIDEO_ID_HERE" you must have the wistia_ in front of the video ID, so it works.
Hope that helps anyone!

can't find previously imported js module

I'm facing an error where a jQuery code can't find a previously imported module.
I'm using jQuery and tag-it (https://github.com/aehlke/tag-it/blob/master/README.markdown)
I import the scripts in this order:
<script src="js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="js/vendor/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/vendor/jquery-ui-touch-punch.min.js" type="text/javascript"></script>
<script src="js/vendor/tag-it.min.js" type="text/javascript"></script>
<script src="js/tags.js" type="text/javascript"></script>
tag-it.min.js is the Tag-It provided js module and tags.js is my custom module.
tags.js is as follows:
$(document).ready(function(){
var $available_tags = $('#user_tags').val().split(",").slice(0, -1);
$('#tags').tagit({
fieldName: "tags",
availableTags: $available_tags,
placeholderText: "Enter Tags",
beforeTagAdded: function(event, ui){
var tag = ui.tag.text().slice(0, -1);
if($.inArray( tag, $('#user_tags').val().split(",") ) == -1){
$.get("/tags/add?tag=" + tag, function(data){
if(!data.error){
$("#user_tags").val( $("#user_tags").val() + tag + ",");
} else {
console.log("Eror", data);
return false;
}
});
}
},
showAutocompleteOnFocus: true
});
});
The error is in tags.js at line 6:
$('#tags').tagit({
Undefined error: tagit does not exist.
http://puu.sh/gCVUh/2d792035f6.png
How is this possible? The js loading order is fine and yet it seems not to recognice it.
Thanks in advance, if more information is needed ask for it and I'll update the thread.
Ok I found out why it wasn't working.
I just noticed that I duplicated jQuery script import some lines after these imports.
This was resseting jQuery enviroment and therefore, tag-it was removed from it.
Hope this helps someone in a future and thanks for the help!

How to load different html files in QUnit?

I'm using QUnit for unit testing js and jquery.
My HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>
<script src="../lib/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
<!--This is where I may have to add startPage.html--->
<script src="../login.js"></script>
<script src="../test/myTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Currently, I'm adding login.js as shown and I'm getting references correctly to objects defined in login.js.
However, functions in login.js contains references to some dom elements defined in startPage.html which is located elsewhere.
So, if I say $('#login-btn'), it is throwing an error. Is there any way to fix this?
Can I
(a) refer to startPage.html to my qunit page given above?
(b) refer to or load startPage.html in the file where I'm running tests (myTests.js):
QUnit.test( "a test", function( assert ) {
assert.equal( 1, "1", "String '1' and number 1 have the same value" );//works
assert.equal( login.abc, "abc", "Abc" );//works with attributes
assert.equal(($("#userid").val()),'', 'Userid field is present');//fails
assert.equal( login.ValidUserId(), true, "ValidUserId" );//fails with functions
});
Does QUnit provide any method to load Html/php files so they'll be defined prior to testing. Like 'fixtures' in jasmine?
EDIT: Please also tell what to do in case I have startPage.php
There are a couple of ways you can do this. The simplest is just to use the built-in QUnit "fixtures" element. In your QUnit HTML file, simply add any HTML you want in the div with the id of qunit-fixture. Any HTML you put in there will be reset to what it was on load before each test (automatically).
<html>
...
<body>
<div id='qunit'></div>
<div id='qunit-fixture'>
<!-- everything in here is reset before each test -->
<form>
<input id='userid' type='text'>
<input id='login-btn' type='submit'>
</form>
</div>
</body>
</html>
Note that the HTML in the fixture doesn't really have to match what you have in production, but obviously you can do that. Really, you should just be adding the minimal necessary HTML so that you can minimize any side effects on your tests.
The second option is to actually pull in the HTML from that login page and delay the start of the QUnit tests until the HTML loading is complete:
<html>
<head>
...
<script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
<script>
// tell QUnit you're not ready to start right away...
QUnit.config.autostart = false;
$.ajax({
url: '/path/to/startPage.html',
dataType: 'html',
success: function(html) {
// find specific elements you want...
var elem = $(html).find(...);
$('#qunit-fixture').append(elem);
QUnit.start(); // ...tell QUnit you're ready to go
}
});
</script>
...
</head>
...
</html>
Another way to do this without using jquery is as follows
QUnit.config.autostart = false;
window.onload = function() {
var xhr = new XMLHttpRequest();
if (xhr) {
xhr.onloadend = function () {
if(xhr.status == 200) {
var txt = xhr.responseText;
var start = txt.indexOf('<body>')+6;
var end = txt.indexOf('</body>');;
var body_text = txt.substring(start, end);
var qunit_fixture_body = document.getElementById('qunit-fixture');
qunit_fixture_body.innerHTML = body_text;
}
QUnit.start();
}
xhr.open("GET", "index.html");
xhr.send();
} else {
QUnit.start(); //If getting the html file from server fails run tests and fail anyway
}
}

Categories