Call function attribute from outside function in jQuery - javascript

I am trying to call input attribute value from child function.
Code is Here:
$("input.ups").fileinput({
uploadUrl: "/imalatci/products/uploadimages",
allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
maxImageWidth: 500,
maxImageHeight: 400,
maxFileCount: 5,
resizeImage: true,
language:"tr",
uploadExtraData: function() {
return {
product_id: $(this).attr('product_id')
};
}
}).on('filepreupload', function() {
$('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
$('#kv-success-box').append(data.response.link);
$('#kv-success-modal').modal('show');
});
I want to get $("input.ups") product_id attribute in this function:
uploadExtraData: function() {
return {
product_id: $(this).attr('product_id')
};
}
But it is getting undefined error?
How can we fix this ?

The scope of this within the uploadExtraData function is not the input.ups element which the plugin is being instantiated on. To achieve what you require you would need to loop over them individually so you can get a reference to the element. Try this:
$("input.ups").each(function() {
var $input = $(this);
$input.fileinput({
uploadUrl: "/imalatci/products/uploadimages",
allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
maxImageWidth: 500,
maxImageHeight: 400,
maxFileCount: 5,
resizeImage: true,
language:"tr",
uploadExtraData: function() {
return { product_id: $input.attr('product_id') };
}
}).on('filepreupload', function() {
$('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
$('#kv-success-box').append(data.response.link);
$('#kv-success-modal').modal('show');
});
});
I would also suggest using a data-* attribute instead of a non-standard attribute like product_id.

Related

cube portfolio with bootstrap template plugin not working

I am using cubeportfolio.js as part of a bootstrap template. It seems to be working but the custom .js part of the template is causing an error in the console.
The template I am using can be seen here, which is working without errors.
The error is 'Uncaught Error: cubeportfolio is already initialized. Destroy it before initialize again!'
For confidentiality reasons I can't post all the code but I have called the jquery.cubeportfolio.min.js at the bottom of the with the custom .js underneath.
Here is the custom .js
(function($, window, document, undefined) {
'use strict';
var gridContainer = $('#grid-container'),
filtersContainer = $('#filters-container'),
wrap, filtersCallback;
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
/*********************************
add listener for filters
*********************************/
if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');
wrap.on({
'mouseover.cbp': function() {
wrap.addClass('cbp-l-filters-dropdownWrap-open');
},
'mouseleave.cbp': function() {
wrap.removeClass('cbp-l-filters-dropdownWrap-open');
}
});
filtersCallback = function(me) {
wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
me.addClass('cbp-filter-item-active');
wrap.trigger('mouseleave.cbp');
};
} else {
filtersCallback = function(me) {
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
};
}
filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
var me = $(this);
if (me.hasClass('cbp-filter-item-active')) {
return;
}
// get cubeportfolio data and check if is still animating (reposition) the items.
if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
filtersCallback.call(null, me);
}
// filter the items
gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
});
/*********************************
activate counter for filters
*********************************/
gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
// read from url and change filter active
var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
item;
if (match !== null) {
item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
if (item.length) {
filtersCallback.call(null, item);
}
}
});
})(jQuery, window, document);
You have to destroy it before init:
gridContainer.cubeportfolio('destroy');
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
It is initialized somewhere else and therefore it throws an error because it doesn't know with which cubeportfolio() instance has to deal.
From the error output I’m pretty sure that you instantiate Cube Portfolio twice for the same element.
If you want to instantiate again the plugin call on that element the method destroy
jQuery('#my-grid').cubeportfolio('destroy');
and then the init method to instantiate again
jQuery('#my-grid').cubeportfolio(options);
If you need further help please send me a link to your website to check your code.

Function not firing correctly

currently I have the JS below. I'm trying to run the slideout.close(); event with smoothstate onStart. My code is below and i'm currently getting an error in the console. Could someone please help me out.
Thanks.
$(document).ready(function() {
slideout();
});
function slideout() {
var slideout = new Slideout({
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
}
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
slideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});
You've created a global function called slideout, within which you have a local variable called slideout that is the one that refers to a Slideout object - you can't access that local variable from other functions. When you try to use slideout.close() that is looking for a .close() method on the function.
One fix would be to change the name of the variable or function and make the variable global too, so that you can access it anywhere. But adding more globals is messy.
I think it should be fine to combine all of your code into a single document ready handler, so that everything is in the same scope without needing any globals (you would still need to use a different name for the variable).
I can't test the following because I don't have whatever Slideout is, but:
$(document).ready(function() {
'use strict';
var slideout; // variable that is local to the doc ready handler function
// and accessible to all code within that handler
function initSlideout() { // function renamed
slideout = new Slideout({ // assign to variable declared above
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
}
initSlideout();
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
initSlideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

skrollr.min.js is not initializing

var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: true,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
When i try to init skrollr it just gives me this error:
TypeError: Argument 1 of Window.getComputedStyle is not an object.
What could it be?
I was having this same issue and putting the init inside $(document).ready resolved it for me.
$(document).ready(function () {
var s = skrollr.init();
});

Explain a piece of Jquery code

i have this code
function deleteNode(options) {
$.ajaxService({
url: 'http://localhost:1209/Pages/services.aspx/Page_load',
data: { servicename: 'deletenode', nodename:""},
LoaderConteiner: "#message",
onStartService: function () { $(".failed-message,.success-message").hide(); },
onEndService: function () {},
onResponse: function (response) {
switch (response.result) {
case "1":
$.pushMessage({ message: 'ok', messageClass: 'success-message', delay: 6000, container: '#changemessage' });
break;
default:
$.pushMessage({ message: 'error', messageClass: 'failed-message', delay: 8000, container: '#changemessage' });
}
}
});
}
and call this function
deleteNode({ target: this });
I have explain about this code
whats the Role of "options" and "target: this" ?
Options is the parameter of deleteNode.
By passing a construct like this { target: this } you are passing an object literal as parameter, where
'this' is the object context from where you called the deleteNode function.
Inside deleteNode you can call options.target... in you example.
Regards

Integrating Dropzone.js with angular

I am working from some code that integrated DropboxJS as an angular directive. I cannot get it to work. I've taken his fiddle and updated it with current CDN links. Any idea why the directive code never fires? For ex if I drop an image it will go to /upload instead of /desiredupload and the event doesn't fire.
Fiddle: http://jsfiddle.net/cyberwombat/3tDqZ//1/
angular.module('dropZone', [])
.directive('dropZone', function() {
return function(scope, element, attrs) {
element.dropzone({
url: "/desiredupload",
maxFilesize: 100,
paramName: "uploadfile",
maxThumbnailFilesize: 5,
init: function() {
this.on("addedfile", function(file) {
alert("Added file."); });
}
});
}
});
angular.module('dropZone', [])
.controller('dropZoneCtrl', function() {});
Additionally and unfortunately I cannot replicate in my fiddle - on my local code I get this error: Object [object Object] has no method 'dropzone'
I am loading dropzone, then angular (tried the the other way) then my app, directives, etc.. so I don't think order is an issue. Dropzone successfully detects the form and makes it DnD but my directive element doesn't seem to have dropz
This is how I do it:
.directive('dropZone', function () {
return {
scope: {
action: "#",
autoProcess: "=?",
callBack: "&?",
dataMax: "=?",
mimetypes: "=?",
message: "#?",
},
link: function (scope, element, attrs) {
console.log("Creating dropzone");
// Autoprocess the form
if (scope.autoProcess != null && scope.autoProcess == "false") {
scope.autoProcess = false;
} else {
scope.autoProcess = true;
}
// Max file size
if (scope.dataMax == null) {
scope.dataMax = Dropzone.prototype.defaultOptions.maxFilesize;
} else {
scope.dataMax = parseInt(scope.dataMax);
}
// Message for the uploading
if (scope.message == null) {
scope.message = Dropzone.prototype.defaultOptions.dictDefaultMessage;
}
element.dropzone({
url: scope.action,
maxFilesize: scope.dataMax,
paramName: "file",
acceptedFiles: scope.mimetypes,
maxThumbnailFilesize: scope.dataMax,
dictDefaultMessage: scope.message,
autoProcessQueue: scope.autoProcess,
success: function (file, response) {
if (scope.callBack != null) {
scope.callBack({response: response});
}
}
});
}
}
})
An example usage of this would be:
<div action="/file/upload/" class="dropzone" drop-zone
call-back="myCallBackMethod(response)"
data-max="5"
auto-process="false"
message="Drop file here or click to select"
mimetypes=".doc,.docx,.pages,.pdf,.odt"
id="file-dropzone">
</div>
Any scope variable that has a ? next to it is optional. The only required field is action, which would be the URL to send post to.
$(element).dropzone({
url: "/desiredupload",
maxFilesize: 100,
paramName: "uploadfile",
maxThumbnailFilesize: 5,
init: function() {
this.on("addedfile", function(file) {
alert("Added file."); });
}
});
Wrap element with $(...). In AngularJS it says all DOM elements are JQuery object but I think you might be using a older version of AngularJS.

Categories