Jquery steps plugins conflict with CKeditor RTE plugins - jquery-steps

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

Related

Sharepoint 2013 won't work with Angularjs

I tried to run this very simple input test on my SharePoint 2013 site. It worked well at first but after some other experimenting within same page in different content editors (I did not touch the input test) it broke and now shows only the search with double brackets. I have tried implementing this in Content editor and script editor but nothing seems to work. It only shows text and {{search}}
<script src=".../SiteAssets/javascript/angular.min.js"></script>
<script src=".../SiteAssets/javascript/jquery-2.1.4.min.js"></script>
<div>
<input type="text" ng-model="search">
<p>you're searching for: {{search}}</p>
</div>
Also I can't figgure out why the simples Hello World won't show as it should. It also shows the double brackets.
var app = new angular.module("mainApp", []);
app.controller("HelloController", function ($scope) {
$scope.greeting = 'hello';
});
angular.bootstrap(document, ['mainApp']);
Above is controller and below is the .html.
<script type="text/javascript" src=".../SiteAssets/javascript/angular.min.js"></script>
<script type="text/javascript" src=".../SiteAssets/javascript/HelloController.js"></script>
<div ng-app='mainApp' ng-controller='HelloController'>
<p>{{greeting}}, World</p>
</div>
I have tested the Minimal download strategy features effect on these problems but it does not make any difference.
I hope someone can help!
BR,
Noora
You need to bootstrap you angular app on angular.element ready after DOM is loaded properly.
Code
angular.element(document).ready(function() {
angular.bootstrap(document, ['mainApp']);
});
You should call angular.bootstrap() after you've loaded or defined
your modules. You cannot add controllers, services, directives, etc
after an application bootstraps.
Doc Link

Angular binding for dynamically added html div

Sorry, this seems a duplicated questions, but I tried all answered questions close to my question, with no success.
I am trying to introduce angular.js into a legacy system.
the system is using the .load jquery function to dynamically load div content with a page from an ASP.NET MVC page.
my brief html will look like this
<body ng-app="myApp">
<div ng-controller="myCtrl">
any content...
<div id="dyncontent"> </div>
</div>
and my javascript legacy code looks like
$('#dyncontent').load('/showviewcontent');
I added in the dynamic content, some angular directive and binding instruction
my angular code is like this
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
.....
});
How to make the binding / angular directive works on the newly added content?
You need to manually start the angular module using angular.bootstrap
$('#dyncontent').load('/showviewcontent', function() {
angular.bootstrap(document.getElementById('dyncontent'), ['myApp']);
});

using jquery ui in custom dnn module

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);

Calling Javascript within ng-if

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.

AngularJS not getting activated when loading HTML from script

I have this scenario, I am loading part of HTML (which has AngularJS directives) dynamically via script and I see AngularJS is not getting activated.
here is the example I am looking at. Is there anyway I can tell AngularJS to start bind on document ready? Loading an aspx page containing this widget1 content via a iframe seems to work but I am trying to avoid iframe and use client side script.
Appreciate any help.
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div id="widget1">
<!-- load below div via jquery/or any method from a remote html file-->
<script type="text/javascript">
$("div#widget1").load("/widgetsfolder/widget1.htm");
</script>
</div>
widget.htm file has below content.
<div ng-controller="TodoCtrl">
Total todo items: {{getTotalItems()}}
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span class="done-{{todo.done}}">{{todo.text}} </span></li>
</ul>
</div>
my controller code below.
`function TodoCtrl($scope) {
$scope.totalItems = 4;
debugger;
$scope.todos = [{
text: 'learn angularjs',
done: false
}, {
text: 'implement angularjs',
done: false
}, {
text: 'something else',
done: false
}, ];
$scope.getTotalItems = function () {
return $scope.todos.length;
}
}`
sample code here
http://jsfiddle.net/devs/RGfp4/
Apero's answer describes what is going on. I believe you are going to want to use ng-include. Your html would look something like this:
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div ng-include="'/widgetsfolder/widget1.htm'">
</div>
</body>
AngularJS evaluates the scope and renders the page after it is loaded.
Here, your js script loads the widget html but after Angular already compiled the scope etc.
I believe this will not work this way.
You can use angulars ngINclude to fetch outside documents, but I don't suggest it, it can be buggy. You can get the partials using either $http or $resource, this will fetch the data and compile the angular directives inside.
If you want to load the script using some other method, you can store the data as a string inside the controller and use a $compile directive in order to execute the angular code inside it.

Resources