I want to use tab widget of jQueryUI in dotnetnuke 5.6.3
I registered jQueryUI in my module and it works fine but when I use partial Rendering in my page it fails to load.
Here is my code:
$(document).ready(function () {
rastaAdmin();
});
function rastaAdmin() {
var tabdiv = $('#tabul');
var tabvar = tabdiv.tabs();
}
this site have a method to solve my problem but it doesn't work in my script.
After reading the above site I changed my code to:
$(document).ready(function () {
rastaAdmin();
});
function pageLoad(sender, args) {
rastaAdmin();
}
function rastaAdmin() {
var tabdiv = $('#tabul');
var tabvar = tabdiv.tabs();
}
This Doesn't work for me.
What Can I do?
Thank You
I've had issues using the pageLoad function as well (though I don't remember now where it ended up breaking down). However, something like the other method should work fine (see the new jQuery UI setup in the core modules in DNN 6):
$(document).ready(function () {
setupDnnSiteSettings();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
setupDnnSiteSettings();
});
});
The one caveat here is that this registers the setup code to happen after returning from any UpdatePanel-initiated request, not just your specific UpdatePanel. Calling tabs again on the same element shouldn't cause any issue, but you'll want to figure out a way to differentiate if you're doing something that should only be called once.
Thank you bdukes
After your help, I changed my code to:
$(document).ready(function () {
Sys.Application.add_load(function (s, e) { rastaAdmin(); });
rastaAdmin();
});
function rastaAdmin() {
var tabdiv = $('#tabul');
var tabvar = tabdiv.tabs();
}
And It Works Like a charm for me! Thank You mate.
Related
I totally get why Turbolinks 5 is awesome and if you're reading it, you probably do as well, but I am very frustrated with how badly it plays with the other scripts on the block.
To date, there is no simple explanation (human readable) that shows how to wrap existing jQuery scripts in a way that would allow them to function.
Take for example this one: https://github.com/Bttstrp/bootstrap-switch. It's well written, simple to understand. You load the js and css to your assets pipeline and instantiate it on some page.
# view.html.erb
<input type="checkbox" class="switch"> switch button
<script type="text/javascript">
$(".switch").bootstrapSwitch();
</script>
you go to view.html, click another page, click back and you see two buttons.
Next, you spend 5 hours looking for a way to have Turbolinks load the instance of bootstrapSwitch only once if not loaded before. Well, even if you do, the functionality will be gone. Clicking it will not work.
$(document).on("turbolinks:load", function()... will load it on every Turbolink visit, and for now, the only way I could make it work and not create duplicates was to disable cache on view.html with
<%= content_for :head do %>
<meta name="turbolinks-cache-control" content="no-cache">
<% end %>
Which feels kinda stupid.
I think it all has something to do with using idempotent - https://github.com/turbolinks/turbolinks#making-transformations-idempotent but how do you practically do this?
Could someone please take this simple plugin as an example and share a simple, elegant solution for making it work which we can then reproduce with other scripts?
Developing apps with Turbolinks does require a particular approach in order to get things running smoothly. Due to differences the way pages are loaded and cached, some patterns of running scripts won't behave in the same way with Turbolinks vs. without. This may seem unfriendly at first, and the "gotchas" can be frustrating, but I've found that with a little understanding, it encourages more organised, robust code :)
As you have figured out, the problem with duplicate switches is that the plugin is being called more than once on the same element. This is because Turbolinks caches a page just before navigating away from it, and so the cached version includes any dynamically added HTML[1] e.g. stuff added via plugins. When navigating back/forward, the cached version is restored, and the behaviour is duplicated :/
So how to fix this? When working with code which adds HTML or event listeners, it is generally a good idea to teardown behaviours before the page is cached. The Turbolinks event for that is turbolinks:before-cache. So your setup/teardown might be:
// app/assets/javascripts/switches.js
$(document)
.on('turbolinks:load', function () {
$('.switch').bootstrapSwitch()
})
.on('turbolinks:before-cache', function () {
$('.switch').bootstrapSwitch('destroy')
})
This is a bit difficult to test since all the setup and teardown is done in event handlers. What's more, there maybe many more cases like this, so to prevent repitition, you may want to introduce your own "mini-framework" for setting up and tearing down functionality. The following walks through creating a basic framework.
Here's is what we'll aim for: calling window.App.addFunction with a name and a function registers a function to call. That function gets the elements and calls the plugin. It returns an object with a destroy function for teardown:
// app/assets/javascripts/switches.js
window.App.addFunction('switches', function () {
var $switches = $('.switch').bootstrapSwitch()
return {
destroy: function () {
$switches.bootstrapSwitch('destroy')
}
}
})
The following implements addFunction, storing added functions in the functions property:
// app/assets/javascripts/application.js
// …
window.App = {
functions: {},
addFunction: function (name, fn) {
this.functions[name] = fn
}
}
We'll call each function when the app initializes, and store the result of each function call in the results array if it exists:
// app/assets/javascripts/application.js
// …
var results = []
window.App = {
// …
init: function () {
for (var name in this.functions) {
var result = this.functions[name]()
if (result) results.push(result)
}
}
}
Tearing down the app involves destroying calling destroy (if it exists) on any results:
// app/assets/javascripts/application.js
// …
window.App = {
// …
destroy: function () {
for (var i = 0; i < results.length; i++) {
var result = results[i]
if (typeof result.destroy === 'function') result.destroy()
}
results = []
}
}
Finally we initialise and teardown the app:
$(document)
.on('turbolinks:load', function () {
window.App.init.call(window.App)
})
.on('turbolinks:before-cache', window.App.destroy)
So to put this all together:
;(function () {
var results = []
window.App = {
functions: {},
addFunction: function (name, fn) {
this.functions[name] = fn
},
init: function () {
for (var name in this.functions) {
var result = this.functions[name]()
if (result) results.push(result)
}
},
destroy: function () {
for (var i = 0; i < results.length; i++) {
var result = results[i]
if (typeof result.destroy === 'function') result.destroy()
}
results = []
}
}
$(document)
.on('turbolinks:load', function () {
window.App.init.call(window.App)
})
.on('turbolinks:before-cache', window.App.destroy)
})()
Functions are now independent of the event handler that calls them. This decoupling has a couple of benefits. First it's more testable: functions are available in window.App.functions. You can also choose when to call your functions. For example, say you decide not to use Turbolinks, the only part you'd need to change would be when window.App.init is called.
[1] I think this is better than the default browser behaviour (where pressing "Back" returns the user back to the page as it was when it was first loaded). A Turbolinks "Back" returns the user back to the page as they left it, which is probably what a user expects.
The jQuery UI docs give an example of extending an existing UI widget method, like this:
$.widget("ui.dialog", $.ui.dialog,
{
open: function()
{
console.log("open");
return this._super();
}
});
That works for me using UI 1.12.1, I see the expected log entry when a dialog is opened.
However, using the same technique to recreate the removed .url() method of jQuery UI Tabs does not, throws the error "Uncaught TypeError: $(...).url is not a function". This is my code:
$.widget("ui.tabs", $.ui.tabs,
{
url: function (index, url)
{
console.log("url");
$(this.data("uiTabs").anchors[index]).attr("href", url);
return this;
}
});
What's the difference here, besides the fact that the url() method is being created rather than extended? Is it possible to do what I'm attempting?
It is possible however I am unsure of that line after the log, i.e. the .data() method seems invalid here?
Perhaps you meant this:
$.widget("ui.tabs", $.ui.tabs, {
url: function(index, url) {
$(this.anchors[index]).attr("href", url);
}
});
This is my first time using ui-grid and I'm finding the API a bit frustratingly limited.
I'm using edit and cellnav together. I have edit on focus turned on, so a single click switches the cell to edit mode. When I click e.g. outside the grid, the edit closes on blur but the cell remains selected. The problem with this is that in a selected cell, clicking once does not put the cell in edit mode.
So, I'm looking for either:
a) A way to deselect the cell when edit closes, or:
b) A way for single-click in a selected cell to switch it to edit mode.
Searching the API and Tutorial docs has not yielded a way to do either.
Thanks
Edit: Since I could find no other way to do it I wrote this horrible directive, which I urge you not to copy and use in your own projects. I'm hoping someone will reply with a less loathsome and brittle suggestion, but for now this is all I have.
(function () {
angular.module('eventApp').directive('autoEdit', function () {
return function (scope, element, attrs) {
function doubleClick() {
$(this, '.ui-grid-cell-focus').dblclick();
}
$(element).on('blur', '.ui-grid-cell-focus ~ div input', function () {
$(this).closest('div').parent().children('.ui-grid-cell-focus').unbind('click', doubleClick).click(doubleClick);
});
}
});
})();
I think you can try to use this "undocumented" functionality:
gridApi.grid.cellNav.clearFocus();
gridApi.grid.cellNav.lastRowCol = null;
This is my solution using a decorator to expose a working clearFocus method onto the cellNav API.
angular.module(...)
.config(
$provide => {
$provide.decorator('uiGridCellnavDirective', $delegate => {
const {compile} = $delegate[0];
$delegate[0].compile = () => {
const compilation = compile(), {pre} = compilation;
compilation.pre = ($scope, $elm, $attrs, uiGridCtrl) => {
const result = pre($scope, $elm, $attrs, uiGridCtrl);
uiGridCtrl.grid.api.cellNav.clearFocus = () => {
uiGridCtrl.grid.cellNav.lastRowCol = null;
uiGridCtrl.cellNav.clearFocus();
};
return result;
};
return compilation;
}
return $delegate;
});
}
)
Extending #Vlad answer
gridApi.grid.cellNav.clearFocus();
gridApi.grid.cellNav.lastRowCol = null;
gridApi.grid.columns[0].colDef.allowCellFocus = false;
[to fix the issue of clearing selection of first column due to the fix]
I am using angularJS in my MVC application and loading a partial using ajax call in angularJS. I am using $compile to compile the html. Everything is working fine on local but it is not working on production. Unexpected error is showing. Below is the code I am using.
Angular Controller:
app.controller("mproductController", ["$scope", "mproductService", "$compile", function ($scope, mproductService, $compile) {
$scope.ShowProdUnitPop = function (val) {
mproductService.ShowProdUnitPop(val).success(function (result) {
debugger;
var snippet = angular.element(result);
$compile(snippet)($scope);
$("#dvAddProd").html(snippet);
$("#dvPopup").modal('show');
});
}
}
Angular Service:
app.service("mproductService", ["$http", function ($http) {
this.ShowProdUnitPop = function () {
var request = $http({
method: "post",
url: "/Home/GetActiveCat"
});
return request;
}}
MVC Controller:
[HttpPost]
public ActionResult AddProduct(int id)
{
ViewBag.ProductCategory = Utility.GetProd(id);
return PartialView("_AddProduct",new Product());
}
Error is throwing on this line:
var snippet = angular.element(result);
$compile(snippet)($scope);
$("#dvAddProd").html(snippet);
$("#dvPopup").modal('show');
It is working on local but not on production. Please help.
Seems like you are using bundling and minification enabled on production server. That is breaking you controller code while you are utilizing that controller and its necessary to have inline array annotation of DI while minifying JS files.
Most possible answer would be you are using $compile by injecting it to controller and using it, That's fine. It seems like you had not followed inline array dependency injection inside your controller.
Also you need to attach compile element to your dvAddProd element, rather than updating html, appending html to DOM will never make angular angular binding on that element. Looks like this code shouldn't be working on any of the environment if it has angular bindings on it.
Controller
app.controller('someCtrl', ['$scope', '$http', '$compile',
function($scope, $http, $compile) {
//you should have controller in this way that would fix your issue
//note I'm using inline array notation of DI
$scope.ShowProdUnitPop = function(val) {
mproductService.ShowProdUnitPop(val).success(function(result) {
debugger;
var snippet = angular.element(result);
var compiledSnippet = $compile(snippet)($scope);
$("#dvAddProd").append(compiledSnippet); //should attach compile element
});
}
}
]);
Visit this link for more Information
I am building a Single Page Application using ASP.NET and sammy.js, where all views except for the Home/Index view are rendered as partial views so that sammy can swap out the content of the main body with the partial view that is returned.
I am using the example given here, and everything loads fine as expected.
Similar to the above example, in my Home/Index page I have reference to a script called routing.js, which wraps the sammy function call in order to parse the MVC route:
var Routing = function (appRoot, contentSelector, defaultRoute) {
function getUrlFromHash(hash) {
var url = hash.replace('#/', '');
if (url === appRoot)
url = defaultRoute;
return url;
}
return {
init: function () {
Sammy(contentSelector, function () {
this.get(/\#\/(.*)/, function (context) {
var url = getUrlFromHash(context.path);
context.load(url).swap();
});
}).run('#/');
}
};
}
I need to call a callback function after the content swap has fully completed in order to implement further jQuery functionality on the newly rendered content. My dilemma is that no matter what option I try from the sammy.js docs, nothing seems to run the callback after the content has been swapped.
I have tried all of the following (all "valid" ways of passing a callback according to the sammy.js docs):
content.load(url).swap(pageLoadScripts(url));
content.load(url).swap().onComplete(pageLoadScripts(url));
content.load(url).swap().then(pageLoadScripts(url));
content.load(url).swap().next(pageLoadScripts(url));
content.load(url,pageLoadScripts(url)).swap();
and even
content.load(url).swap();
pageLoadScripts(url);
In every case the pageLoadScripts function fires off prior to the content being swapped. Any ideas or suggestions on what to do differently?
This is a bit of a hack, but it works.
Inside the Sammy initialization function, I added the following override to the swap function just before the override to the get function:
this.swap = function (content, callback) {
var context = this;
context.$element().html(content);
pageLoadScripts(hashedUrl);
};
FWIW, I still have not been able to get callback to be anything other than 'undefined', even in this override function.
Managed to get this working:
// override for callback after page load
this.swap = function(content, callback) {
this.$element().html(content);
if (callback) {
callback();
}
};
// users
this.get('/#/users', function(context) {
context.load('/users').swap(function() { replaceBindings(viewModel.users); });
});
I managed to get the callback param to NOT be 'undefined' by wrapping it in another function.