I am trying to show a jQuery modal popup in my custom dnn module and for it I used below code which works fine.
<div id="dialog-form" title="Notices">
<div>
My Notice 1
</div>
</div>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function () {
$("#dialog-form").dialog({
modal: true,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
});
</script>
My concern is that in above code I have referred to jQuery UI file directly using link tag and I know that DNN ships with jquery UI files itself. So there must be some way to avoid referencing UI css file directly and using what dnn already comes with.
I have tried using below lines in my modules code behind but none of them worked for me
DotNetNuke.Framework.jQuery.RequestUIRegistration();
JavaScript.RequestRegistration(CommonJs.jQueryUI); //obsolete in DNN7.2
I also tried method mentioned at below link
http://www.ifinity.com.au/Blog/EntryId/121/Using-jQuery-UI-with-DotNetNuke-5-and-6-in-the-same-module
In order to register jquery and jquery UI you should call:
using DotNetNuke.Framework.JavaScriptLibraries;
//...
JavaScript.RequestRegistration(CommonJs.jQuery);
JavaScript.RequestRegistration(CommonJs.jQueryUI);
Related
I'm trying to run Hybrid Angular application using ngUpgrade from documentation. The problem is that no matter what I'll do AngularJS is just not raising.
When I put Angular and AngularJS together then both application runs.
<body>
<app-root><app-root>
<div ng-app="app"></div>
</body>
but of course this is wrong, Angular should bootstrap AngularJS, so I changed it to:
<body>
<app-root>
<div id="ng-app"></div>
<app-root>
</body>
And in Angular Module I added:
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.getElementById('ng-app'), ['app']);
}
}
But still nothing, I have no idea even how I can investiage it and where the problem may be.
Ok I found issue, I had declared bootstrap inside #NgModule({...})
Hi guys I am using this http://www.jquery-steps.com/Examples as my wizard form plugins.
I notice that it has a conflict with Ckeditor plugin with an error of Uncaught TypeError: Cannot read property 'unselectable' of null.
I just tried the solution on this post Ckeditor with jQuery form wizard but it doesn't fix the issue.
What is the best solution for this?
I guess you put the CKeditor right into the wizard HTML code. In that case what´s really important to understand is that jQuery Steps manipulates DOM objects. That´s really bad for javascript code in general.
To run javascript controls within jQuery Steps you have to ensure that:
no javascript code goes inside your wizard HTML
first jQuery Steps code executes and then the javascript code that belongs to the HTML inside the wizard HTML
Good example:
<script>
$(function ()
{
// first jQuery Steps
$("#wizard").steps();
// then components inside jQuery Steps
$("#editor").ckeditor();
});
</script>
<div id="wizard">
<h1>Title</h1>
<div>
<div id="editor"></div>
</div>
</div>
Bad example:
<script>
$(function ()
{
$("#wizard").steps();
});
</script>
<div id="wizard">
<h1>Title</h1>
<div>
<script>
$(function ()
{
$("#editor").ckeditor();
});
</script>
<div id="editor"></div>
</div>
</div>
Cheers,
Rafael
I have some legacy jQuery code. It's a big chunk of code, so I would prefer to port it a little while later. To use it, I call $('#legacyId').legacyFunction().
Here's the deal, though.
I have an ng-if. And within that ng-if, I have the JavaScript where I call my legacy function.
<div ng-if="status=='yes'">
<div id="legacyId">
I am a legacy div!
</div>
<script type="text/javascript">
$('#legacyId').legacyFunction()
</script>
</div>
It looks like this JavaScript is being called when the page loads. Though I load angular after jQuery, it seems that angular removes the section under control of the ng-if, and therefore the jQuery function on #legacyId fails.
Any ideas? Thanks!
Edit-note: I import jQuery and the legacy code that extends jQuery at the top of my HTML document. Angular is loaded at the bottom of the document.
Edit-note 2: I have also tried <div ng-init="$('#legacyId').legacyFunction()"></div>, but I get an error, Error: [$rootScope:inprog] $apply already in progress.
Okay, managed to work this out.
In the HTML:
<div ng-if="status=='yes'">
<div legacy-directive>
I am a legacy div!
</div>
</div>
In my app code:
app.directive('legacyDirective' , function() {
return {
link: function(scope, element, attrs) {
$(element).legacyFunction(scope.$eval(attrs.legacyDirective));
}
}
});
Because of the $(element).legacyFunction(scope.$eval(attrs.legacyDirective));, it looks like I can also pass parameters to the legacyFunction; e.g. <div legacy-directive='{myParameter: true}>
Thank you for all who answered! You set me on the right track.
I have some markup and loaded controllers.
Then I load some modal window contents by ajax, which is using one of controllers I have defined before. But looks like this controller isn't being used, because he is not required until modal loaded.
Question: How to make controller work when modal loaded? I tryied $scope.$digest(), got error "digest in progress".
index.html
<html data-ng-app="foo">
<head>
<script src="/js/app.js"></script>
</head>
<body>
<div id="modal"></div>
</body>
</html>
js/app.js
!(function(){
function FormCtrl($scope) {
console.log($scope); // never fired
$scope.Submit = function() {
console.log('submit'); // never fired too :C
}
}
angular.module('foo', []).controller('FormCtrl', FormCtrl);
})();
html content loaded by ajax and inserted to #modal
<div data-ng-controller="FormCtrl">
<form name="signup" data-ng-submit="Submit()">
<!-- form data -->
</form>
</div>
SOLUTION:
$.modal().open({
onOpen: function($e) {
$http.get('/views/' + url).success(function(data) {
$compile(data)($scope, function(clonedElem) {
$e.html(clonedElem);
});
// $e.html(data); was used instead of statement above
});
}
});
If you want to inject new DOM elements into existing Anuglar app. You options are to use
ng-include: This has a src property that takes the url from which partial content has to be loaded. AngularJS would internally compile it. One important thing here is that angular will download the template as soon it encounter ng-include in html.
Download and compile DOM manually using the $compile service which is a more involved process.
If your AJAX content contains a controller defined in ng-controller, AngularJS would create it for you.
But in any case, keep in mind the controller script should have been already wired at the initialization\setup phase.
I have 3 questions
can i use angular js with kendoUi wrappers? if yes how?
if i am using angular js and kendo-all.min.js on the same html tag let say that we are converting an input tag to auto-complete and at the same time we are binding it with ng-model then what possible affect they can produce in each other?
what actually angular-kendo is?
code for Point No-2
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/Kendo/kendo.all.min.js"></script>
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/app.js"></script>*#
<script type="text/javascript">
$(document).ready(function () {
var data = ["akshay", "tiwari", "ranjit", "swain"];
$("#name").kendoAutoComplete({ dataSource: data });
})
</script>
<h2>KendoAngular</h2>
<div ng-app>
<input id="name" type ="text" ng-model="yourName"/>
<h2>{{yourName}}</h2>
</div>
There is a kendo project that you'll need to include: https://github.com/kendo-labs/angular-kendo
What will happen is that as the user types in say an autocomplete, the selection will be bound to an angular scope item. The "wrapper" is what makes all the bindings and allow angular to be updated.
From the github: angular-kendo is a directive for AngularJS that runs an element through Kendo UI declarative initialization, allowing you to take full advantage of Kendo UI within the context of an AngularJS Application.
You plunker is not including the angular adapter located at the link above.
Here are the instructions for its use: http://kendo-labs.github.io/angular-kendo/#/simple
var app = angular.module('your-angular-app', ["kendo.directives"]); // include directives
Add data-kendo and appropriate data- attributes.