I'm trying to make a link to create new object when no results were found. I'm using Rails 4. I've included gem gem "select2-rails", added //= require select2 in application.js and
*= require select2
*= require select2-bootstrap
in application.js. Here's my coffeescript which should work fine (ajax working well) but function formatNoMatches seems to do nothing.
$('#invoice_client_id').select2
theme: 'bootstrap'
formatNoMatches: (term) ->
return "<a href='#' onclick='alert('" + term + "');'" + "id='newClient'>Add New Client</a>";
ajax:
url: '/clients.json'
dataType: 'json'
processResults: (data) ->
return {
results: $.map(data, (client, i) ->
{
id: client.id
text: client.name
}
)}
I have found in documentation no mentions of formatNoMatches but in a lot of user examples it's used to do same thing like here.
EDIT
Link or custom text doesn't appear at all.
I looked around a bit and found this way of doing it in the 4.0+ versions.
$('select').select2
language:
noResults: ->
return "<a href='http://google.com'>Add</a>";
escapeMarkup: (markup) ->
return markup;
Let me know if this works for you!
Related
How can I upload images in Trix editor with Rails 5.2 configured with ActiveStorage?
I saw some videos using others uploaders, but could not adapt the idea to ActiveStorage.
Other (maybe) solution is: use ActionText with Rails 5.2. Is it safe to use already?
Active Storage has direct upload js, you need just add:
//= require activestorage
to your application.js, and then create trix-attachment-add event listener:
document.addEventListener('trix-attachment-add', function (event) {
var file = event.attachment.file;
if (file) {
var upload = new window.ActiveStorage.DirectUpload(file,'/rails/active_storage/direct_uploads', window);
upload.create((error, attributes) => {
if (error) {
return false;
} else {
return event.attachment.setAttributes({
url: `/rails/active_storage/blobs/${attributes.signed_id}/${attributes.filename}`,
href: `/rails/active_storage/blobs/${attributes.signed_id}/${attributes.filename}`,
});
}
});
}
});
Hope this helps you!
Ok, so still new to Angular, using 1.3.1, and here's my problem:
console.log('CompanyID: ' + $scope.companyID);
$http.get('/api/List/GetGangTemplates', { params: { id:$scope.companyID }})
.success(function (data, status, headers, config) {
console.log('CompanyID SUCCESS: ' + $scope.companyID);
$scope.templates.data = data;
})
first console.log -> 'CompanyID: undefined'
second console.log (in success) -> 'CompanyID SUCCESS: 1' // this is what it should be!
Looking at my Scope via batarang shows companyID: 1.
I should note that this is a MVC / Angular hybrid. My Razor page has the following:
#Html.HiddenFor(Function(model) model.CompanyID, New With {.ng_init = "companyID=" & Model.CompanyID})
What am I missing? I want to use a hidden field on my Razor page to pass an ID to Angular to do my AJAX call....
I'm trying to get some TDD happening with Ember and Konacha - I get this error when I try to use visit
ReferenceError: visit is not defined
at Context.<anonymous> (http://localhost:3500/assets/api_spec.js?body=1:24:5)
at Test.Runnable.run (http://localhost:3500/assets/mocha.js:4336:32)
at Runner.runTest (http://localhost:3500/assets/mocha.js:4724:10)
at http://localhost:3500/assets/mocha.js:4802:12
at next (http://localhost:3500/assets/mocha.js:4649:14)
at http://localhost:3500/assets/mocha.js:4659:7
at next (http://localhost:3500/assets/mocha.js:4597:23)
at http://localhost:3500/assets/mocha.js:4621:7
at Hook.Runnable.run (http://localhost:3500/assets/mocha.js:4338:5)
at next (http://localhost:3500/assets/mocha.js:4609:10)
api_spec.rb
//= require spec_helper
describe("fake server", function() {
beforeEach(function() {
this.server = sinon.fakeServer.create();
});
afterEach(function() {
this.server.restore();
});
it("#transition off Landing", function() {
visit("/").then(function() {
var mock = sinon.mock(testHelper.lookup('route', 'index'));
mock.expects('transitionTo').once();
mock.verify();
mock.restore();
});
});
}
here's my spec_helper.rb
//= require sinon
//= require ember-mocha-adapter
//= require application
mocha.ui('bdd');
mocha.globals(['Ember', 'App', 'DS', 'MD5']);
mocha.timeout(500);
chai.Assertion.includeStack = true;
ENV =
{
TESTING:true
};
window.server = sinon.fakeServer.create();
window.testHelper = {
lookup: function(object, object_name) {
name = object_name || "main";
return App.__container__.lookup(object + ":" + name);
}
}
App.Router.reopen({
location: 'none'
});
Konacha.reset = Ember.K;
How do I make ember play nice with visit?
Cheers!
visit is only injected when you call
App.injectTestHelpers();
Additionally you must be running a debug build of Ember.
But it only works with qunit, you'll need to write your own visit if you're using a different testing framework.
I created a simple Rails 4 cms. There is an article list with disqus comment count on the homepage and also on the category and archive pages.
The disqus code responsible for displaying comment count is just before the closing body tag.
When I enable Turbolinks the comment count shows up only on initial page load. If I visit an article then go back to the article list, there is no comment count. If I reload the page the comment count is there though.
I tried to add jquery.turbolinks gem.
I tried to edit the disqus code so it executes on page:change or page:load.
I tried to put it inside the head.
I tried to add disqus identifiers to the code.
UPDATE:
Here is what I am trying right now (edited my shortname):
var disqus_shortname = 'my_shortname'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
($(document).on('page:change',function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
})());
This way the comment count shows up on initial page load and also when I visit the post list pages the first time. But when I visit them the second time the comment count doesn't show up. Tried this with page:load and page:update also without results.
Anyone encountered this problem?
I couldn't make this work with the default disqus comment count code, so I used the disqus api instead which works like a charm:
$(document).on('page:change', function () {
var disqusPublicKey = "MY_PUBLIC_KEY"; // Replace with your own public key
var disqusShortname = "my_shortname"; // Replace with your own shortname
var urlArray = [];
$('.comment-link-marker').each(function () {
var url = $(this).attr('data-disqus-url');
urlArray.push('link:' + url);
});
$.ajax({
type: 'GET',
url: "https://disqus.com/api/3.0/threads/set.jsonp",
data: { api_key: disqusPublicKey, forum : disqusShortname, thread : urlArray },
cache: false,
dataType: 'jsonp',
success: function (result) {
for (var i in result.response) {
var countText = " comments";
var count = result.response[i].posts;
if (count == 1)
countText = " comments";
$('a[data-disqus-url="' + result.response[i].link + '"]').html(count + countText);
}
}
});
});
This is a Turbolinks issue. With Turbolinks pages will change without a full reload, so you can't rely on DOMContentLoaded or jQuery.ready() to trigger your code.
Try this: add jquery.turbolinks gem, update application.js and restart the server.
I am trying to make some useful directives with jQueryUI widgets for my AngularJS base application.
One of them works on "select" element and am ok with directives but only thing do not understand is this one:
When select list is populated from ajax request, how to tell to apply jqueryui widget when data is populated? Suppose it is with $watch but not sure how.
Edit:
In example I am trying to implement directive for the multiselect plugin.
Please note that I am simulating server reponse but putting everything in timeout.
Here is a code on plunker
You need to be $watching changes to the items list, then calling refresh on the multiselect plugin... Here is a plunk that shows the solution
angular.module('myui', [])
.directive('qnMultiselect', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr) {
//set up the plugin.
elem.multiselect({ allowClear: false });
//get the source of the ngOptions
var parts = attr.ngOptions.split(' ');
var source = parts[parts.length - 1];
//watch the options source and refresh the plugin.
scope.$watch(source, function(value) {
elem.multiselect('refresh');
});
}
};
});