I have the following piece of code
<div class="cv-uploader" id="customid">Upload CV</div>
$('.cv-uploader').fineUploader({
debug: true,
request: {
endpoint: '/process',
params:{ elementId:$(this).attr('id') }
},
//some other code
});
I need to send in the request parameters the ID of the element that triggered fineuploader. I tried $(this).attr('id') but it wont work.
Please help
Thanks
Sergiu
This is more of a general JavaScript question then a Fine Uploader question. The problem is that you are misunderstanding how context works in JavaScript. In your code, this will always refer to the window object. Obviously, this is not what you want.
You can either do this:
$('.cv-uploader').fineUploader({
debug: true,
request: {
endpoint: '/process',
params:{ elementId:$('.cv-uploader').attr('id') }
},
//some other code
});
...or this:
$('.cv-uploader').fineUploader({
debug: true,
request: {
endpoint: '/process'
},
//some other code
})
.on("submitted", function(event, id) {
$(this).fineUploader('setParams', {elementId: $(this).attr('id')}, id);
});
The latter example is possible as Fine Uploader's jQuery plug-in wrapper sets the context of any jQuery event handlers you bind to a Fine Uploader instance as the jQuery object that represents that element.
However, I would recommend the first approach as it is more efficient.
Related
I've got a problem with v2 of ziggeo.
Following is my case:
I'm using ziggeo from that url:
//assets-cdn.ziggeo.com/v2-stable/ziggeo.js
I initialise it with the following code:
new ZiggeoApi.V2.Application({
token: {TOKEN},
language: {LANGUAGE},
webrtc_streaming: true
});
And if I output 'ZiggeoApi' the following appears:
So the main problem is now that 'Events' doesnt exist in the object. And if I use the following code which I got from your site (Here: https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods#javascript-version=v2) with that at the beginning:
ZiggeoApi.Events.on("system_ready", function() {
... it doesn't work and produces an error. Because of the missing 'Events' Attribute I'm also not able to use any other functionality which is connected with events.
When I change the version to v1-stable in the url it's working.
Is this a bug or what am I doing wrong?
I've found a solution. You have to do it this way:
Initialise the app:
let app = new ZiggeoApi.V2.Application({
token: {TOKEN},
language: {LANGUAGE},
webrtc_streaming: true
});
Then call the 'on ready' function directly on the initialised object:
app.on('ready', function() {
// do what you want!
});
That's the way how you have to do it with Ziggeo V2.
I need to execute a content script from a background script with sending a couple of parameters from the background script to the content one. I explored a couple of help pages like this one ...
https://developer.chrome.com/extensions/content_scripts#pi
... but still have no idea how to organize it. In a Firefox extension, I did the following:
background script excerpt:
browser.tabs.executeScript({
file: "content/login.js"
}).then(messageContent).catch(onError)
}
function messageContent() {
var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
gettingActiveTab.then((tabs) => {
browser.tabs.sendMessage(tabs[0].id, {loginUserName: loginUserName, loginPassword: loginPassword});
});
}
content script excerpt:
function justDoTheJob(request, sender, sendResponse) {
var doc = window.content.document;
doc.getElementById("loginUserName").value = request.loginUserName;
doc.getElementById("loginPassword").value = request.loginPassword;
}
browser.runtime.onMessage.addListener(justDoTheJob);
But when I do something like that in Chrome, I get the following:
Error in response to tabs.query: TypeError: Cannot read property 'then' of undefined at Object.callback
So it looks like I am using a wrong syntax or even wrong structure at all. Could you please give me some clue on how to do it properly?
Thanks,
Racoon
As #qwOxxOm points out in comments, you need to use callbacks in Chrome, for example, instead of appending with then(), move the function inside then to the argument chain of the call itself. Otherwise it's used pretty much the same way:
chrome.tabs.executeScript({file: "content/login.js"}, myCallback);
function callback(result) {
// handle result here
}
or like:
function messageContent() {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
// sendMessage here
})
}
etc.
Error handling is a bit different as you would check lastError instead of using a callback for it.
You can also use the chrome namespace for Firefox (there are some differences between the two browsers/namespaces in some areas you need to take into consideration).
There is a similar question out there (an older one in Python) but this one has to do with JS. Testing using Selenium in a NodeJS, Mocha environment. What I'd like to do is click on a Bootstrap dropdown and check the HTML to look for changes. I've tried the following:
test.it('should click on all header links',
function() {
var elem = driver.findElement(By.id('Profile'));
console.log(elem.getAttribute('innerHTML'));
console.log(elem.getInnerHtml());
});
Both calls return the same thing.
{ then: [Function: then],
cancel: [Function: cancel],
isPending: [Function: isPending] }
I plan to feed the HTML into cheerio so i can check for structure changes. Appreciate any help on this.
I was able to retrieve the HTML as a string by doing the following.
driver.findElement(By.id('Profile')).getAttribute("innerHTML").then(function(profile) {
console.log(profile);
});
I got the inner HTML with:
element.getAttribute('innerHTML').then(function (html) {
console.log(html)
})
Using FineUploader ( http://docs.fineuploader.com/branch/master/api/callbacks.html ) -- all my code works perfectly, with the exception of the onComplete callback. Simply doesn't fire - can't see what I might be doing wrong, have even used a copy/paste version from the demo. I have also tried a "jquery" style of setting this up, again with no console.log() output on complete.
function createUploader() {
var uploader = new qq.FileUploader({
element: document.getElementById('fine-uploader'),
// Use the relevant server script url here
action: '/admin/upload',
debug: true,
callbacks: {
onComplete: function(id, fileName, responseJSON) {
console.log('response');
if (responseJSON.success) {
console.log('success');
//$('#thumbnail-fine-uploader').append('<img src="img/success.jpg" alt="' + fileName + '">');
}
}
}
});
}
window.onload = createUploader;
EDIT: Firebug does not throw any errors for this; syntax is correct
Echoing #meltner, you are following documentation for a current version of Fine Uploader and applying this to a very old version of the library. The API changed in several breaking ways starting with version 3.0. One change included a move of all callbacks to a callbacks option. Another included a change from FileUploader to FineUploader. The version you are using is definitely pre-3.0. Consider upgrading at http://fineuploader.com.
I am starting to play with require js / modular development for the first time and am liking what I see.
What I am trying to achieve is basically only load certain custom jQ modules when needed. My main goal is page performance. At present I am only loading require.js (which in turns loads jQ async) then other jQ code/plugins only fire on user interaction.
Would the following code be considered good/bad practice? Is there anything anyone would change? (super basic example below)
MAIN.JS
require.config({
paths: {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min"
}
});
require(["jquery"], function($) {
// overlay plugin
$("a").on("click", function(e){
var self = this;
require(["overlay"], function (overlay) {
overlay.init(self);
});
e.preventDefault();
});
});
OVERLAY.JS
define(function () {
return {
init: function(self) {
$.ajax({
url: self.href,
success: function (data) {
$("#results").html($(data).filter('#details').html());
},
dataType: 'html'
});
$('#results').fadeIn();
}
}
});
Cheers,
Adi.
Your method of loading overlay is a correct use of require, however a couple of things:
Overlay.js should list jQuery as a dependency. Ensure your modules have all the code they need to run. In this case it's fine (as you're grabbing jQuery in the require) but say you used document.addEventListener to attach your click then you're no longer sure jQuery will be available for use by the $.ajax. It's nice to know your modules ask for everything they need rather than getting it by luck.
One rule I try to follow is to keep all my DOM related stuff in main. So for example:
Overlay
// Example code, and not complete
define(function(require) {
var $ = require('jquery');
return {
init: function(elements) {
this.trigger = $(elements.trigger);
this.target = $(elements.target);
this.trigger.on('click', this.someEvent.bind(this));
},
someEvent: function() {
this.getAjax();
}
}
});
And then in main.js just pass in the DOM elements
require(['overlay'], function(overlay) {
overlay.init({
trigger: 'a',
target: '#results'
})
});
Keeping the DOM elements separate and in one place makes updating them breeze. You could also pass in an options object for other things (such as class names) much like a jQuery plugin does.
Finally, in your example code your $('#results').fadeIn(); is outside the success callback and would run immediately.