I'm hoping someone can help me as I'm trying to store relatively simple values into a session with jQuery (values from a select field). I've been trying to use this plugin here, but it is throwing an error on the page load. The error is as follows...:
Uncaught TypeError: Object function each(iterator, context) {
try {
this._each(iterator, context);
} catch (e) {
if (e != $break) throw e;
}
return this;
} has no method 'split'
I've read that this could be a conflict with Prototype so I added the following to the top of the jquery.session.js file and changed all instances of '$' to 'jQuery' to no avail.
jQuery.noConflict();
I'm not entirely set on this plugin and would be willing to use a different one if suggested to do so. I'm just hoping it is a quick fix someone is familiar with, or suggestions for another possible solution.
Thanks!
Here's a site that explains the html5 session storage.
http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/
Related
I am trying to load images from a local folder using the src="" from the img tag but I want to load them using the backend. The frontend already has the relative path which is "../assets/imgs/" the backend just has the name and extension ex) "1.png". Thing is that it does work but I'm getting error messages.
This is causing me an issue
<img width=100px height=100px :src="getIconPath(`${user.icon}`)"/>
here is the function that gets called
methods: {
getIconPath(iconName) {
return iconName ? require("../assets/imgs/" + iconName) : ''
}
Here are both the error messages I am getting on the console
[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> <Profile> at src/components/profile.vue
<Navbar> at src/components/navbar.vue
<Main> at src/main.vue
<Root> vue.runtime.esm.js:619
Error: "Cannot find module './undefined'"
webpackContextResolve .*$:13
webpackContext .*$:8
getIconPath profile.vue:74
render profile.vue:12
VueJS 43
<anonymous> main.js:31
js app.js:1415
__webpack_require__ app.js:785
fn app.js:151
1 app.js:1488
__webpack_require__ app.js:785
checkDeferredModules app.js:46
<anonymous> app.js:861
<anonymous>
I found very little resources to help out but many of them have said that required fixes their issues. So far I tried moving it to a different folder, moving the require as a function method, using absolute path, using v-attr, and binding it without require. Still I haven't had any luck getting rid of the error message. Here is another link of someone else having the same issue as me but I still couldn't figure out how they fixed it.
https://forum.vuejs.org/t/how-to-fix-the-console-log-error-when-using-require-method-to-bind-an-img-src/77979
I would very much appreciate the help!! I've been stuck for many hours on this and I can't seem to find a helpful solution. If this isn't a good way to go about loading images from the backend feel free to suggest any other alternative ways to do so. Thank You!
I'm going to take a guess here and say that user is populated with data asynchronously. I bet you have something like this in your initial data or store
{
user: {}
}
The issue here is that user.icon is undefined, at least for some period of time. Where you are needlessly converting that into a string with
getIconPath(`${user.icon}`)
will convert undefined into the string "undefined" (because JavaScript is fun like that), hence your error message. The simple solution is to not use a string template, ie
getIconPath(user.icon)
To avoid these sorts of problems, I would instead use a computed property to resolve image imports. This is more efficient than executing a method in your template which happens on every tick
computed: {
userWithIcon () {
return {
...this.user,
icon: this.user.icon && require(`../assets/imgs/${this.user.icon}`)
}
}
}
and in your template
<img width="100px" height="100px" :src="userWithIcon.icon">
I had a similar issue recently and I was able to solve it by making sure that my data was ready before rendering the view. using #Phil assumption that you have something like user: {} in your data, you can just wrap your whole HTML in <div v-if="user !== null"></div>. This makes sure that the user data is ready before even trying to render any image at all or use any data from the user object.
This should eliminate any error at all.
I have a site that uses a Zendesk support chat widget, but the widget doesn't work on mobile devices. In the console, I can see that in one of our JS files there is the error:
TypeError: element.offset is not a function
This then triggers other errors in the web widget code, causing it to not load.
In our JS file, however, it appears that "element" is defined, so I'm not sure what is causing the issue.
This is where I think element is defined:
$.tools.validator.fn('#some_code', "This is the text", function(input, value) {
var element = $('#' + input.attr('data-match-field'));
return element.size() == 0 || element.val() == value;
});
This is where the error is happening further down in the same file:
function scrollTo(element) {
$("html, body").animate({scrollTop:element.offset().top}, 'ease');
}
I'm hoping you all can help me figure out what I'm missing. Thanks in advance.
After prompting from #arieljuod, I searched for instances of scrollTo and didn't find any in use. I ended up commenting out that function and the errors went away.
I got this message when doing some javascript programming, and after some google searches, I have no idea what it means, or how i cause this error. I'm including the code below, can someone explain it to me or point me to a resource on how to fix it or what is happening at all? The weird thing is that I have other code just like this part in my program, and it never gives me errors about them, so i'm really confused. Also, I only get this error to display with firebug running, else wise it just doesn't work and no error message is displayed. I also tried it in Chrome, and had the same issues, no error message but the code doesn't work.
foundTextFn = function(){
console.log('fire');
if (foundTextArrayPosition != foundTextArray.length){
writeText(foundTextArray[foundTextArrayPosition],"happy");
foundTextArrayPosition += 1;
}
foundTextFnTimer=setTimeout("foundTextFn()",4000);
}
Here is another of my methods, it is basically the same thing, but it works fine. And if it matters, all of these variables are global variables declared at the start of my file as var foundTextArrayPosition = 0; for example.
awayFn = function(){
if (awayArrayPosition != awayArray.length){
if (changeAwayState){
changeAwayState = false;
writeText(awayArray[awayArrayPosition],"normal");
awayArrayPosition ++;
temp = pickRandomSpot();
randomX = temp[0];
randomY = temp[1];
}
else{
changeAwayState = true;
}
awayTimer=setTimeout("awayFn()",10000);
}
else{
abandoned = true;
whyGoneArrayPosition = 0;
whyGoneFn();
}
}
This is a deprecation error in Firefox 9. globalstorage was a way to store data in Firefox, but HTML5 introduced localstorage, which is now the preferred way (using window.localStorage).
https://developer.mozilla.org/en/DOM/Storage has more information.
I got the same error message and found a solution and perhaps the underlying cause of conflict, I was using the jQuery validate function in the jzaefferer.github.com/jquery-validation/jquery.validate.js library along with jQuery 1.7.1
The problem:
I used $(document).ready with two different contexts. One with the noConflict wrapper and one without. By keeping both the same, the error message went away. Hooray!
The wrapper:
jQuery.noConflict();
jQuery(function($) {
$(function() {
$(document).ready(function() { ...}
});
});
See also this post on my blog.
Probably not related to the issue above but I will put it here for the search engines.
I got the same error message while doing some simple jQuery:
Use of globalStorage is deprecated. Please use localStorage instead.
[Break On This Error]
$(document).ready(function() {
It was however due to forgetting to actually include the link href to the jQuery.js file...!
I am creating a yui3 widget and I keep getting this error: this.constructor.NAME is undefined.
I am defining a name in my widget:
YUI().add('paginator', function(Y) {
function Paginate(config) {
Paginate.superclass.constructor.apply(this, arguments);
}
Paginate.NAME = "paginate";
...
So, I am not sure what's going on.
Edit:
I also wanted to add that I have just tried to add the default widget skeleton from here and I am still getting the same error.
I thought I would answer this myself in case anyone else comes across this problem. I forgot the new keyword when creating my widget.
I am using the mask plugin into my project. I have included it like this;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
Even though I am able to use the mask method like this and it works without a problem;
$("#txtTel").mask("+380 999 999 999")
I am not able to use it to change its definitios like this;
$.mask.definitions['9'] = '';
$.mask.definitions['#'] = '[0-9]';
It gives me this error;
Uncaught TypeError: Cannot read property 'definitions' of undefined
What can be causing this problem? Thanks in advance...
You're using one plugin with the documentation from another.
The syntax you're using applies to this plugin:
https://www.npmjs.com/package/jquery.maskedinput
... not to the one you're using.