I have a ASP.NET Core application which renders tables on the serverside, some are quite complex.
I used to use sorttable: Make all your tables sortable for make the tables sortable; now as I have included vue.js (2.0, without npm / webpack), the jquery plugin obviously does no longer work properly.
Now, before i transition fully over to 100% clientside table rendering - which I want to avoid for now, if its possible, cause its complex - is there something similar to add sorting to a rendered html with vue or is that concept that old and no longer viable in vue.js and other modern frameworks?
So, questions are:
How to make sorttable work in vue.js are (without npm / webpack)
Or how to add something like that to a already server rendered html with vue?
Looking forward and regards, Peter
Okay, got it. That was a journey :-)
Sorttable script: https://www.kryogenix.org/code/browser/sorttable/
The script:
Vue.component('date-table', {
template: '<div><slot></slot></div>',
props: ['innerHtml'],
mounted: function () {
var self = this;
sorttable.makeSortable(this.$el.firstChild);
},
beforeDestroy: function () {
}
});
The markup:
<date-table v-once>
HERE IS MY ORDINARY HTML WHICH SHOULD BE SORTED BY
"sortable.makeSortable(...."
</data-table>
Related
I created a to do list app using html, css and javascript. I'm trying to create the same app using javascript. The problem I'm facing is that I'm getting this error when I include angular in my application.
Angular: disabling automatic bootstrap. <script> protocol indicates an extension, document.location.href does not match.
this could be an IE bug, try bootstrapping your app manually instead of relying on the standard approach with the ng-app directive.
angular.element(document).ready(function () {
angular.bootstrap(document, ['nameOfYourApp']);
});
https://github.com/angular/angular.js/issues/15567
https://github.com/angular/angular.js/issues/15772
https://www.roelvanlisdonk.nl/2017/02/01/fix-in-ie-angular-1-6-1-disabling-automatic-bootstrap-script-protocol-indicates-an-extension-document-location-href-does-not-match/
I'm using the angular-fullstack yeoman generator in my project.
It contains Jquery by default.
<script src="bower_components/jquery/dist/jquery.js"></script> is correctly inside the index.html
Curiously, in my js file, Jquery works perfectly inside this:
window.onload=function() {
//my jquery code working here
}
But, it doesn't work at all if I put in this instead :
$(document).ready(function() {
// my code is not working here :(
});
And from there, I'm getting some trouble. When I switch from a page to an another one, Jquery stopped. I need to refresh the page to keep Jquery working.
I might not have this problem if my Jquery code was inside $(document).ready(function()
As I'm using angular-fullstack generator which already makes almost every thing in my project, I don't know where I need to make some change to make it works ..
Any suggestion ? Thanks a lot. :)
As far as I know using jQuery with AngularJS is not a good practice. Generally if in your angular project you need to use jQuery it means you have to create a custom directive to have some logic there or less ideal alternative is to use angular.element which comes with jQuery lite features.
Regarding your problem please test if this will work:
jQuery(document).ready(function($) {
// example $('.btn').hide();
});
I'm working with restangular ngroute and playframework and I'm trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info
the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : #main("MyApp") So all my controllers and models are defined in this main page.
So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
UPDATE:
this is the link in customer.scala.html
<li>Customers</li>
in the file Application.scala I have this:
def custDetail = Action {
Ok(views.html.custDetail("Your new application is ready."))
}
in routes I have this:
GET / controllers.Application.index
GET /custdetail controllers.Application.custDetail
so how can I link this : /custd (in the angular controller) with my html page
So I think you're jumping in at the deep end a bit here. If you don't understand how to make a simple play web app, and you don't understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).
Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you're not), then just using play templating should be sufficient for your needs (ands there's lots of docs available!).
If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you've provided:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you're not sure on how Angular controllers work, Angular has great documentation:
https://docs.angularjs.org
You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be
I'm using React for my components, and in order to package up the styles with my components, I'm requiring them in as per the documented webpack method:
require('./style.css');
But when I try to render on the server, node-jsx throws an error when it attempts to transform the css. Is there another way of transforming the jsx which won't break on css? I'd rather not break the styles out into their own pipeline as that would defeat the advantage of webpack packaging components up nicely.
This can be solved setting webpack's "target" configuration to "node".
This simple example app should explain it clearly.
https://github.com/webpack/react-webpack-server-side-example/blob/master/webpack.config.js
You could use require.extensions like this:
require.extensions['.css'] = function() {return null}
In an attempt to create polymer elements that use requirejs modules I ran into a blocking issue. I understand that polymer is not designed to work with requirejs, but for the time being It is my only option.
Searching for answers I found two solutions:
Don't use requirejs and make your modules compatible with HTML imports.
Put Polymer() call inside the requirejs callback as described here
Since I have to use require, at least for the time being, I went with the solution no.2. However, it turns out the solution causes asynchronous delays of element registration and incorrect data binding prior to Polymer upgrading the element.
Digging deeper into this issue, I started hacking undocumented Polymer internals with an intention to stop Polymer entirely until requirejs does its thing. Here is what I came up with:
Polymer.require = function(tag, deps, func) {
var stopper = {}
Polymer.queue.wait(stopper);
require(deps, function() {
delete stopper.__queue;
Polymer.queue.check();
Polymer(tag, func.apply(this, arguments));
});
};
I know this is terribly wrong. Is there a better solution?
I found that if I embed the call to require within the Polymer script I avoid this issue.
<link rel="import" href="../polymer/polymer.html"/>
<script src="../requirejs/require.js"></script>
<script src="../something/something.js"></script>
<polymer-element name="some-component">
<template>...</template>
<script>
(function() {
Polymer('some-component', {
someMethod: function () {
require(['something'], function (Something) {
var something = new Something();
...
}
}
)();
</script>
</polymer-element>
So there's this solution from Scott Miles but I find it a bit simplistic and inflexible as it relies on:
<script> tags to be executed in order, therefore ruling out:
async script tags
xhr based script loading
polymer getting loaded from a <script> tag, therefore:
layout.html and associated css won't be loaded
any future call to polymer.html won't be deduped
If you want more control over your bootstrapping logic you will need to enforce some amount of synchronisation between your components (which is what both requirejs and polymer are competing to do) before those are fully loaded.
The previous example is a more declarative (read polymer) way of doing things but falls short of fine grained tuning. I've started working on a repository to show how you can fully customise your load ordering, by using a more imperative approach where requirejs is given priority to orchestrate the rest of the bootstrapping.
At the time of writing, this extra control comes at the price of worse performance as the various scripts can't be loaded in parallel but I'm still working on optimising this.