We Keep Coding

How to wireup an AngularStrap modal show event

I have the modal displaying just fine. I'm trying to figure out how to run a function when the modal is shown.
var = loginModal = $modal({ placement: 'left', title: '', content: webauth, show: false });
$scope.$on('modal.show', function () {
console.log("SHOWN");
debugger;
});
$scope.showModal = function () {
loginModal.$promise
.then(loginModal.show);
};
I was expecting the $scope.$on('modal.show') to fire when the modal is shown, but no luck so far.

Try this:
$scope.showModal = function() {
myModal.$promise.then(myModal.show).then(function(){
console.info('shown');
});
};

How do I combine my backbonejs view with jquery

Backbonejs.org says
"— while very deliberately avoiding painting you into a corner by making any decisions that you're better equipped to make yourself."
So I have a BackBone view like this:
var LotsaToys= Backbone.View.extend({
el: '#CaveToy',
events: {
'click .slide': 'slideAnimal'
},
initialize: function (obj) {
this.collection = new Yoyo(obj);
this.render();
},
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
},
renderBook: function (item) {
var ToyView = new oneToy({
model: item
});
this.$el.append(ToyView .render().el);
}
});
And simple Jquery code like this:
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
Do I combine these to by simply adding the JQuery code in the slide function?
(Simple Jquery image slider)
slideAnimal: function (event) {
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
});
Im a noob, so please give me a explanation ,not sure what way is 'good practice' or what way would be better to implement..

You need place it after render
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
this.slideAnimal();
},
slideAnimal: function() {
this.$("#slider").sudoSlider({
vertical: true,
continuous: false
});
}

Problems with binding popover to dynamic content

Currently my websites consists of multiple pages, which are loaded dynamically. On certain pages there are some buttons which I would like to have popovers. I read some documentation and stackoverflow answers on popovers and dynamic content. However, I can't seem to get it working. Below you'll find my code:
Javascript
$(document).ready(function(){
var popOverSettings = {
trigger: "click",
placement: 'bottom',
container: 'body',
html: true,
//content:" <div style='color:red'>This is your div content</div>"
content: function () {
return $('#popover-content').html();
}
};
$('div').on('DOMNodeInserted', function () {
$(".pop-function").popover(popOverSettings).click(function(e) {
e.preventDefault();
});
//$(event.target).find('button[rel=popover]').popover(popOverSettings);
});
try {
$("button[rel=popover]").popover(popOverSettings).click(function(e) {
e.preventDefault();
});
} catch (err) {}
});
The HTML button
<button class="pop-function" rel="popover">Button</button>

By default how to set "zoom in" to image instead of "fit to screen" in iviewer?

DEMO
I have following code in iviewer. here i want to show the image to be filled in whole grey box.
HTML:
<div id="viewer" class="viewer"></div>
JS:
var $ = jQuery;
$(document).ready(function () {
var iv1 = $("#viewer").iviewer({
src: "http://test.dpetroff.ru/jquery.iviewer/test/test_image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function (ev, coords) {},
onStartDrag: function (ev, coords) {
return false;
}, //this image will not be dragged
onDrag: function (ev, coords) {}
});
$("#in").click(function () {
iv1.iviewer('zoom_by', 1);
});
$("#out").click(function () {
iv1.iviewer('zoom_by', -1);
});
$("#fit").click(function () {
iv1.iviewer('fit');
});
$("#orig").click(function () {
iv1.iviewer('set_zoom', 100);
});
$("#update").click(function () {
iv1.iviewer('update_container_info');
});
});
Does anyone have idea for how to do that?

Add this callback to your iviewer initialization:
onFinishLoad: function () {
iv1.iviewer('zoom_by', 1);
}
Fiddle updated here.

jQueryUI Dialog with Ajax Form Won't Close with $(this).dialog("close");

I have a jQueryUI Dialog loading up a form from an external url, the form renders fine and posts ok but neither the save or cancel buttons seem to close the form yet the dialog close icon does it's job just fine.
Here is my script that spawns the dialog and should handle the buttons:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
$("#modalAdd").html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
$(this).dialog("close");
});
},
Cancel: function() {
$(this).dialog("close");
}
}
})
.load(href, function() {
$(this).dialog("open");
});
return false;
});
});
The final solution was to declare the variable outside of the scope of the dialog declaration as follows:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
var modal = $("#modalAdd");
modal.html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
modal.dialog("close");
});
},
Cancel: function() {
modal.dialog("close");
}
}
})
.load(href, function() {
**modal**.dialog("open");
});
return false;
});
});

It's because of variable scope, as soon as you start the call back function for the $.post call, this is no longer the dialog box. Try calling $("#modalAdd").dialog('close'); instead.
If you don't mind expanding your $.post() and $.load() calls, you can set the context of this to a certain element using the full $.ajax() method. See the "context" option in the docs.

this is changed in the ajax callback function, you need to cache to a local variable.
"Save": function () {
var $this = $(this);
$.post(href, $("form").serialize(), function () {
$this.dialog("close");
});
},