af3 removed data-load, I notice it added panelload, but it won't trigger in my app, here is my code, any one can help?
<div data-left-drawer="left" class="panel" id="plugins" data-title="plugins" panelload="plugins_load" panelbeforeload="plugins_beforeload">
loading...
</div>
and function defined:
var plugins_beforeload = function(obj) {
alert('plugins_beforeload');
}
I think you cannot reach your goal in that way with af3. The "new way" is implementing it in your javascript code. I wrote something like..
$(document).on("panelload",".panel#your_panel_id",function(){
alert("Ciao!!");
});
$("#pagenamehere").on("loadpanel",function(){
alert("Hello World!");
});
I found the documentation is not always as clear as I would like it to be.
Hope this helps!
Related
I try to make the items of a list draggable, but it doesn't work. jQuery doesn't seem to add the ui-draggable class, or maybe Angular removes it.
Javascript
$('.results_video').draggable({
});
HTML
<div class="results_video" ng-repeat="video in results.list">
{{video.title}}
</div>
Note that if I just write the following html, it works
<div class="results_video"></div>
Any suggestions?
I have found the solution. I need to make these divs draggable after they have been loaded. In my case:
var VideoCtrl = function ($scope){
$scope.$watch('search', function(){
//Some code that updates the divs
$('.results_video').draggable();
});
};
Heres the html:
<div ng-controller="MyCtrl">
<a ng-click="open()">Open Dialog</a>
<div id="modal-to-open" title="My Title" ui-jq="dialog" ui-options="{width: 350, autoOpen: false, modal: true}">
Dialog Text
</div>
</div>
And here's the js:
function MyCtrl($scope)
{
$scope.open = function () {
$('#modal-to-open').dialog('open');
}
}
Is this the best way to go about doing this? It seems like there could be a better way of opening it without accessing the DOM but I am not sure how I would go about that. The above code works, I am just wondering if this is the way I should go about doing this. Any input is welcome.
"Best practice" is fuzzy ground here. If it's readable and it works, then you're 90% there, IMO, and it's probably fine.
That said, the "angular way" is to keep DOM manipulation out of the controller, and to use dependency injection to make sure everything is testable. Obviously the way you illustrated above would be hard to test, and puts some DOM manipulation in the controller.
I guess what I would do to get the DOM manipulation out of the controller is use a directive:
A simple directive to tie your dialog open call to a click on an element:
app.directive('openDialog', function(){
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
var dialogId = '#' + attr.openDialog;
elem.bind('click', function(e) {
$(dialogId).dialog('open');
});
}
};
});
And in mark up it would be used like so:
<button open-dialog="modal-to-open">Open Dialog</button>
Now, this is obviously very basic. You could get pretty advanced with this if you wanted to, adding additional attributes for different options in the dialog.
You could go even further and add a Service that opened the dialog for you, so you could inject it into your controller or even your directive, and get the call out of there that way. For example:
app.factory('dialogService', [function() {
return {
open: function(elementId) {
$(elementId).dialog('open');
}
};
}]);
And here it is in use. It seems silly because it's essentially the same thing. But that's mostly because it's a very simplistic example. But it at least leverages DI and is testable.
app.controller('MyCtrl', function($scope, dialogService) {
$scope.open = function () {
dialogService.open('#modal-to-open');
};
});
Anyhow. I hope all of that helps you decide what path you want to take. There are a thousand ways to do this. The "right" way is whatever works, allows you to do whatever you need to do (testing or anything else), and is easy to maintain.
Turning a caption into a link doesn't work in Lightbox 2.51 downloaded from here
Here is the code:
<a href="images/examples/image-1.jpg" rel="lightbox"
title="<a target='_self' href='http://www.google.com'>Google</a>">
<img src="images/examples/thumb-1.jpg" alt="" />
</a>
What should I do?
Thanks :)
I found a solution for this problem in the lightbox.js.
You must edit the if case, adding the else condition that avoid always return false when you click in the div "lightbox" .
$lightbox.hide().on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') {
_this.end();
return false;
}
else { // HERE
return true;
}
});
I found what I think is a better solution than those listed above using Lightbox 2 version 2.6. On line 252 of lightbox.js (unminified), you'll see this line which adds the caption:
this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
Once the caption is added, you can register the click event and force the browser to follow any link in the caption by adding onto the chain like this:
this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast').find('a').on('click', function() { location.href = $(this).attr('href') });
I've initiated a pull request with this change so you can follow the status and any further discussions there.
Try using javascript in tag
onClick="window.location.href='http://www.google.com'"
Sample
<a href="images/examples/image-1.jpg" rel="lightbox"
title="<a target='_self' onClick="window.location.href='http://www.google.com'" href='http://www.google.com'>Google</a>">
<img src="images/examples/thumb-1.jpg" alt="" />
</a>
I have been unable to get any of the answers here to work for me. However, I have found that Slimbox2 does work and is very straightforward to swap as it uses the same syntax.
Is there another way to write this:
//javascript and jquery area
'<% if (Model.Fruit == MyEnum.Apple) { %>'
$("#PaymentType option").each(function(){
//blah
});
'<% } %>'
i'm not sure i like the quotes around the whole if statement
In your view:
var isApple = <% Model.Fruit == MyEnum.Apple %>;
In an included javascript file:
if(isApple) {
$("#PaymentType option").each(function(){
//blah
});
}
If the goal is to have VS continue to correctly check/auto-reformat javascript then you must use your trick or one similar to avoid the issue.
In one of the answers to the following related question there is text from Microsoft indicating that this is a known issue for which they do not yet have a good solution.
Visual Studio confused by server code inside javascript
I am using Jquery Ui panels.([http://code.google.com/p/ist-ui-panel/][1])
While loading the application, everything is fine like collasible, draggable etc.
But i want to make the panel collapsible while clicking on some links.fo ex:
This code will run when the form is loading....
$('#myNews').panel({
'collapsible' :true,
'stackable':false,
});
The html
<div class="panel" id="myNews" >
<h3>Poll</h3>
<div>Some content</div>
</div>
I want to make 'collapsible' :false when clicking some link.... like this
$('#click1').click(function() {
$('#myNews').panel({
'collapseType':'slide-right',
'collapsible':false,
});
});
the code is running without any error, but the '#myNews' not getting affected when clicking the '#click1' link.
Need some help pls.
Thanks in advance
I'm the one behind ist-ui-panel, and Jesse was right — by now the only way for you is to use 'destroy' method somewhat like:
$(document).ready(function(){
$('#click1').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({
'collapsible' :true,
'collapseType':'slide-right',
'stackable':true
});
}
});
$('#click2').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({'collapsible': false});
}
});
});
Notice, you should explicitly destroy previous panel before making a new one.
If you read the uncompressed source code for that widget, it appears that what you are doing is only meant to be used to create panels, not to modify them afterward.
The underlying software is either buggy or I don't understand it. So you'll have to hunt down some bugs, but you can use the 'destroy' method on that widget to reset the div completely, and then make it a panel again, like so:
$('#myNews').panel("destroy");
$('#myNews').panel(...
As I said, it's buggy or I don't quite get it - there's an error raised by the destroy call which you have to catch, and subsequent calls to make new panels do make panels, but they aren't completely correct.