We Keep Coding

Polymer accessing function of dynamically created component

I have a my-createCrewModal component that is supposed to be created once a function from a my-createcrew component is called. The modal is supposed to appear to show a particular text then disapear after 4 seconds.
my-createcrew.html
// function to create a crew
_createCrew: function() {
crewName = this.$.crewname.value;
// handled with the main app file;
this.fire('add-new-crew', {
name: crewName
});
}
my-createCrewModal.html open and close functions..
Polymer({
is: 'my-createCrewModal',
open: function() {
Polymer.dom.flush();
this.offsetHeight && this.classList.add('opened');
this.debounce('_close', this.close, 4000);
},
close: function() {
this.classList.remove('opened');
}
});
and the
my-app.html
// on add new crew
_onAddNewCrew: function(event) {
if (!this._createCrew) {
this._createCrew = document.createElement('my-createCrewModal');
Polymer.dom(this.root).appendChild(this._createCrew);
}
Polymer.dom(this._createCrew).innerHTML = 'New Item Added';
this._createCrew.open();
},
the listener object
looks like this
listeners: {
'add-new-crew': '_onAddNewCrew'
},
When I call the function I get
Uncaught TypeError: this._createCrew.open is not a function
Why does it not see the open function in the my-createCrewModal component.
What could I be doing wrong ?

Jquery Dailog not returning the user given value for Confirmation PopUp.

Hi I'm using JQUERY Dialog for a confirmation popup. I have a common javascript file, in which i had a function which used to call window.ShowModalDialog. Now from the same function i am calling the jquery dialog, but as it is an asynchronous call, the calling function returns the value(yes/no) without even accepting Values from dialog. How can i return the proper value(yes/no)

If I have correctly understood the problem ...
and if something is wrong, add the example of your code
Try using this pattern:
(function ($, undefined) {
$.fn.dialog = function (options) {
options = $.extend({}, $.fn.dialog.options, options);
return this.each(function () {
var dialog = $(this);
dialog.children(".ok").click(function (e) {
options.ok.call(this, e);
dialog.close();
});
dialog.children(".close").click(function (e) {
options.close.call(this, e);
dialog.close();
});
});
};
$.fn.open = function () {
this.get(0).showModal();
};
$.fn.close = function () {
this.get(0).close();
};
$.fn.dialog.options = {
ok : function () {},
close : function () {}
};
})(jQuery);
and using callback
var dialog = $(".myDialog").dialog({
ok : function () {
alert("ok!!");
}
});
Do everything you need in callback, but avoid callbackhell.
see example

Trigger dropzone cancel event by clicking modal outside

I work on a project which uses dropzonejs upload file component. But, I faced that issue while trying to make it more customize.
If you click somewhere outside of the modal window (bootstrap modal), should trigger dropzonejs cancel button event (alert/confirm box, see the attached picture). But it does not happen like this and have never seen anything related within the documents.
Any solution?

I have comeover by this very manual and dirty way described below:
I used window.onbeforeunload to make what i thought real and a flag. The point is that, after the upload process successfully ended, then unbind the onbeforeunlad to prevent always asking "Are you sure you want to cancel this upload?" even if it is completed.
var cancelConfirmation = "Are you sure you want to cancel this upload?";
var isFileInProgress = false;
var uploadZone = $("form[class=dropzone]").dropzone({
method: "post",
uploadMultiple: false,
parallelUploads: 1,
dictCancelUploadConfirmation: cancelConfirmation,
success: function (file, response) {
isFileInProgress = false;
window.onbeforeunload = function () { };
},
init: function () {
this.on("error", function (file, response) {
isFileInProgress = false;
window.onbeforeunload = function () { /* unbind */ };
});
this.on("addedfile", function () {
isFileInProgress = true;
window.onbeforeunload = function () {
return cancelConfirmation;
};
});
this.on("complete", function () {
isFileInProgress = false;
window.onbeforeunload = function () { /* unbind */ };
});
this.on("canceled", function () {
isFileInProgress = false;
window.onbeforeunload = function () { /* unbind */ };
});
}
});
$(".modal").on('hide.bs.modal', function (event) {
if (isFileInProgress && !confirm(cancelConfirmation)) {
event.preventDefault();
}
});

Prevent multiple ajax requests onclick

I've an issue with multiple ajax requests. For example I've a form with a button, and onclick it runs a service which essentially load list of items in a table; for now it should load a single item into a table when I hit the button.
However, when I hit the button multiple times, the same item is duplicated when its loaded.
How can I prevent while there is still no callback from the first one?
current ng service
var getItems = function () {
var def = $q.defer();
Items.get().then(function (items) {
def.resolve(items);
}, function (err) {
...
});
};
Not sure if this is a solution, but when I write above code like this:
var def = false;
var getItems = function () {
def = $q.defer();
Items.get().then(function (items) {
def.resolve(items);
}, function (err) {
...
});
};
This stops the duplication when I initialize the def = false, not sure if this is the correct approach by resetting the previous/old request to false?

You can put a lock on the function to prevent the code from running multiple times at once or at all:
// your service
$scope.isRunning = false;
var getItems = function () {
if(!$scope.isRunning){
$scope.isRunning = true;
var def = $q.defer();
Items.get().then(function (items) {
def.resolve(items);
}, function (err) {
...
}).finally(function(){
//$scope.isRunning = false; // once done, reset isRunning to allow to run again. If you want it to run just once then exclude this line
});
}
};
Unsure how you want to handle the button in terms of being clicked multiple times
You can hide it on click:
<button ng-hide="isRunning">Stuff</button>
You can disable it on click:
<button ng-disabled="isRunning">Stuff</button>
if disabling, you should probably give feedback like changing opacity:
<button ng-disabled="isRunning" ng-class='{"opacity-half": isRunning}'>Stuff</button>
.opacity-half { opacity: 0.5 }

the below code should do the trick I am avoiding some angular specific syntax hope that helps;
function yourContoller(/*all injectables*/) {
var requesting = false;
$scope.buttonClick = function() {
if (!requesting) {
requesting = true;
yourService.getItems().then(function(response) {
/*your code to handle response*/
requesting = false;
});
}
};
}
if you want to disable a button in the view you can expose this variable by simply using scope ($scope.requesting = false;) with ng-disabled.

you can create a reusable directive so that on any button which is clickable, it doesnt get pressed twice
app.directive('clickAndDisable', function() {
return {
scope: {
clickAndDisable: '&'
},
link: function(scope, iElement, iAttrs) {
iElement.bind('click', function() {
iElement.prop('disabled',true);
scope.clickAndDisable().finally(function() {
iElement.prop('disabled',false);
})
});
}
};
});
This can be used on a button as follows:
<button click-and-disable="functionThatReturnsPromise()">Click me</button>

jQuery Event Bubbling on wrong object

I'm still a little new to jQuery events.
I'm trying to write jQuery a wrapper/framework of the Asp.NET UpdatePanel that automatically tracks UpdatePanel async updates.
I want to be able to do something like
$("#myUpdatePanel").on("update", myFunc);
and have it run some handler with this as the updated UpdatePanel. I actually have this bit working.
I also want to be able run a function exactly once any time one or many UpdatePanels update.
$.updatePanel.on("update", myRunOnceFunc);
This is where I'm having issues.
I've defined my wrapper:
// wrap updatePanel reload functionality
$.updatePanel = (function () {
var prm;
var UpdatePanel = function () { };
UpdatePanel.prototype = { };
// initialize on $(document).ready()
$(function () {
prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm) {
prm.add_pageLoaded(function (s, e) {
$.each(e.get_panelsUpdated(), function () {
// call panel-specific update event handlers
$(this).trigger($.Event("update"));
});
// triggered once no matter how many panels were updated
$(UpdatePanel).trigger($.Event("update"));
});
}
});
return $(UpdatePanel);
})();
Then in my code that uses $.updatePanel:
$(function() { $.updatePanel.on("update", myRunOnceFunc); });
What I'm finding is that myRunOnceFunc is being run during both $(this).trigger($.Event("update")); and $(UpdatePanel).trigger($.Event("update"));.
Any ideas why and how to fix it?

I figured out what was wrong.
Rather than return $(UpdatePanel);, I needed to call return $(new UpdatePanel());. Then I needed to replace $(UpdatePanel).trigger(...) with $.updatePanel.trigger(...). Code below:
// wrap updatePanel reload functionality
$.updatePanel = (function () {
var prm;
var UpdatePanel = function () { }
UpdatePanel.prototype = { };
$(function () {
prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm) {
prm.add_pageLoaded(function (s, e) {
$.each(e.get_panelsUpdated(), function () {
$(this).trigger($.Event("update"));
});
// triggered once no matter how many panels were updated
$.updatePanel.trigger($.Event("update"));
});
}
});
return $(new UpdatePanel());
})();