Using Meteor I implemented a pretty basic rubaxa:sortable instance. Not using multiple sortable lists or anything fancy. Pre-loaded "order" data in my Mongo Collection with unique numbers 1, 2, 3, etc.
Everything displays fine, and lets you sort once then the package dies when it tries to save the new order to the DB.
Error in the browser console is:
TypeError: templateInstance.collection.findOne is not a function. (In 'templateInstance.collection.findOne(itemId)', 'templateInstance.collection.findOne' is undefined)
adjustOrdersrubaxa_sortable.js:1404
sortableUpdaterubaxa_sortable.js:1446
_dispatchEventrubaxa_sortable.js:1102
_onDroprubaxa_sortable.js:799
(anonymous function)
handleEventrubaxa_sortable.js:853
Relevant code snippets below...
Server:
Products = new Mongo.Collection('products');
Sortable.collections = ['products'];`
Client JS:
Meteor.startup(function() {
Mongo.Products = new Mongo.Collection('products');
});
Client HTML:
<div class="sortable target" id="object">
{{#sortable items=products animation="100" handle=".sortable-handle" ghostClass="sortable-ghost" sortField="order"}}
{{> productSettingsRow}}
{{/sortable}}
</div>`
<template name="productSettingsRow">
<div data-id="{{order}}" class="sortable-item well well-sm">
<div class="row">
...
<div class="col s5">
<div class="input-field">
<input id="{{sku}}-displayName" type="text" value="{{displayName}}">
</div>
</div>
...
<div class="col s1">
<i class="sortable-handle mdi-action-view-headline pull-right"></i>
</div>
</div>
</div>
Tried searching on the error; don't see anything quite like this though #578 here seems similar(?):
https://github.com/RubaXa/Sortable/issues/578
Any suggestions, or any other info I can provide to help debug? (Also posted this to the GitHub repo as suggested.)
You need to define collections both on the client and the server. So all you might be missing is to put:
Products = new Mongo.Collection('products');
Sortable.collections = ['products'];
in a shared place, such as /lib/common.js.
Partial Solution Found...
The helper that was passing in the "products" collection was set up like this:
Template.productSettings.helpers({
products : function() {
return Mongo.Products.find().fetch();
}
});
It should have been:
Template.productSettings.helpers({
products : function() {
return Mongo.Products.find();
}
});
This way it's a pointer rather than an array. rubaxa:sortable doesn't yet handle arrays.
(Still working through a DB storage problem; this plugin doesn't seem to work out of the box with Meteor -- gives "Access Denied" when you try to update. Will try to sort that out tomorrow.)
Related
I am trying to automate some scenarios using protractor where we need to verify whether the data is updating in dynamic table.
Please find below
HTML Code:
enter image description here
Table in page:
enter image description here
It can be done by verifying that element is present in the DOM with the added Group ID or Group Name.
For Group ID:
element(by.xpath("*//table//tbody//tr//td[1]//p[text()='Amanda Test
Group']")).isDisplayed()
For Group name:
element(by.xpath("*//table//tbody//tr//td[2]//p[text()='Amanda
Group']")).isDisplayed()
I'm assuming you're using Angular2+, yes?
In your HTML Template, you are probably using an *ngFor directive to populate the table dynamically. Add an index to the *ngFor (it's best practices for updating the DOM) in order to add a dynamic id to each element:
<tr *ngFor="let user of user; index as u" id="user-{{u + 1}}">
<td id="userName-{{u + 1}}">
{{user.firstName}} {{user.userName}}<br />
{{user.userName}}
</td>
<td id="userRoles-{{ u + 1 }}">
<span id="role-{{u + 1}}-{{ r + 1 }}" *ngFor="let role of user.roles; index as r">
{{ role.toUpperCase() + ', '}}
</span>
</td>
<!- Omitted code -->
</tr>
In your Page Object:
// Get first user on the table
get firstUser() {
return element(by.id('user-1');
}
// Get a specific user by id
public getUser(index: number) {
return element(by.id(`user-${index}`);
}
// Get all of the attributes for a single user by id
get userAttributes(index: number) {
return element.all(by.id(`user-${index}`);
}
I am not a fan of xpath selectors. Yes, they are faster. But in code that is dynamic or changes frequently, they are the most fragile of selectors. There is no reason your dynamic data cannot have a dynamic ID that clearly identifies each portion of the code you need.
Good luck!
I'm trying to retrieve my select option from 3 databases located in a connection that's not my defaut connection.
but I'm getting an error : Undefined variable: marqs (View: C:\wamp64\www\projetSovac\resources\views\home.blade.php)
Here's my controller code
public function index()
{
$marques= DB::connection('sqlsrv2')->table('marque')->get();
$modeles = DB::connection('sqlsrv2')->table('Modele')->select( DB::raw('CodeModele'))->get();
$finitions = DB::connection('sqlsrv2')->table('finition')->select( DB::raw('CodeFinition'))->get();
$marqs = $marques->all(['marque']);
$models = $modeles->all(['CodeModele']);
$Finitions = $finitions->all(['CodeModele']);
return View::make('home')
->with(compact($marqs))
->with(compact($models))
->with(compact($Finitions));
return View('home');
}
and my home.blade.php code
<tr class="filters">
<th><input type="text" class="form-control daterangepicker-field" placeholder="Période d'analyse" disabled ></th>
<th><select class="form-control " disabled>
{!! Form::Label('marque', 'marque:') !!}
#foreach($marqs as $marque)
<option value="{{$marque->codeMarque}}">{{$marque->codeMarque}}</option>
#endforeach
</select>
</th>
Can you help identify the problem?
Thanks
compact($marqs) wants to have a string divining the variable you want to pass to the view. Use: compact('marqs') you can also combine your variables like compact('marqs', 'models', ....etc )
Also you are returning something 2 times now in the function this is not possible.
I would rewrite your function to be like this:
$marques= DB::connection('sqlsrv2')->table('marque')->get();
$modeles = DB::connection('sqlsrv2')->table('Modele')->select( DB::raw('CodeModele'))->get();
$finitions = DB::connection('sqlsrv2')->table('finition')->select( DB::raw('CodeFinition'))->get();
$marqs = $marques->all(['marque']);
$models = $modeles->all(['CodeModele']);
$Finitions = $finitions->all(['CodeModele']);
return View::make('home')->with(compact('marqs', 'models', 'Finitions'));
Assuming the first 6 lines get you the actual data all i changed was the return.
You might want to read up on how to use laravel models
https://laravel.com/docs/5.7/eloquent
I am not sure if u have defined any but it could make your code allot simpler.
So here is my quick code.
var thisisformykeyorid =$scope.id;
var ref = firebase.database().ref('/myusers/').child("users");
$scope.users= $firebaseArray(ref);
var query = ref.orderByChild("timestamp").limitToLast(100);
$scope.filteruser= $firebaseArray(query);
In my HTML is
<div ng-repeat="samplein filteruser>
<h2>{{ sample.firstname}}</h2>
<p>{{ sample.age}}</p>
</div>
So in firebase there are unique id or keys for each set of data.
How do i add a filter or query to select a set of data from firebase using my variable ? (assuming $scope.id is a unique key) Please be guided that i dont want to use ng-repeat anymore because i only want to view only 1 set of data. Need help
If you know what object you want to display, you can use $firebaseObject instead of $firebaseArray:
var ref = firebase.database().ref('/myusers/').child("users");
$scope.user = $firebaseObject(ref.child($scope.id));
And then display it in your HTML with:
<div >
<h2>{{user.firstname}}</h2>
<p>{{user.age}}</p>
</div>
I have a meteor helper that uses a reactive variable in a find to get a unique document using an id. My item button template looks like this:
<template name = "itemButton" >
<div class = "itemButton" name = {{_id}}>
{{{title}}}
</div>
</template>
using a reactive variable:
Template.landing.onCreated(function _OnCreated() {
this.f = new ReactiveVar();
this.f.set(false);
const handle = Meteor.subscribe("Feed");
});
now I have a method in a template several itemButton.
Template.landing.events({
'click .itemButton' : function(event, template){
alert(event.target.name);
template.f.set(event.target.name);
}
});
and I would like to use that name in a helper that would use this value as the _id.
Template.landing.helpers({
"GetFocus": function(){
alert(Template.instance().f.get()); // alerts undefined...
return(items.find({'_id':Template.instance().f.get()}));
}
});
So where I expect GetFocus to give me the document that generated the button I don't seem to be so lucky. Let me know if I can provide any additional clarification, and as always your input is appreciated.
Where I have template.f.set(event.target.name); I needed template.f.set(event.currentTarget.getAttribute('data-id')); where the html uses data-id instead of name.
I'm tring to implement the classic functionality of this select:elements depends on this other select:selection using Lift, E.g. select the country and get the possible states for the selected country.
The problem that I'm facing is that the "this.myForm.submit()" that I have inside the onchange of the select element is not firing the ajax request. If I use an input type"submit" it works perfectly.
Is this behaivior related with Lift framework? Is there a better way of implementing this kind of functionality using Lift libraries?
The relevant snipped code:
"name=distributionPoints" #> SHtml.select(distributionPoints, Empty, selectedDistributionPoint = _, "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(devices, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
The view html:
<form class="lift:form.ajax">
<select name="distributionPoints" id="the_distributionPoints" onchange="submit()">
<option></option>
</select>
<br/>
Device:
<select name="devices" id="the_devices">
<option></option>
</select>
</form>
The rendered HTML:
<form id="F391649920812YBACEZ" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+"F391649920812YBACEZ").serialize(), null, null, "javascript");return false;">
<div>
Punto de distribución:
<select onchange="submit()" id="the_distributionPoints" name="F630704816482OLP514"></select>
<br />
Equipo:
<select name="F391649920817BLRJW5" id="the_devices"></select><input type="hidden" name="F391649920818HPS35E" value="true" />
<br />
</div>
</form>
[edit]
I finally got the solution. Like Chris mentioned I used ajaxSelect instead of just selects and instead of using setHtml there's a method called JsCmds.ReplaceOptions that does exactly what I was looking for.
You should understand that when using Ajax submit the page is not reloaded. So I would suggest you to use JsCmds.setHtml on server side to "reset" the second select element.
So, in fact the first select is an ajaxSelect which is meant to modify the second one (so it is not concerned by the hidden submit in my opinion). The second select is updated when the first one is changed, using 'selectPoint(s)'
Piece of Scala code
def selectPoint(s):JsCmd = {
selectedDistributionPoint = s;
newDevices:List[String] = findCorrespondingDevices(s);
JsCmds.setHtml("name=devices", SHtml.select(newDevices, Empty, selectedDevice = _, "id" -> "the_devices")) ++ SHtml.hidden(process))
}
"name=distributionPoints" #> SHtml.AjaxSelect(distributionPoints, Empty, s=> selectPoint(s), "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(Nil, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
Piece of template code
<input name="distributionPoints" id="the_distributionPoints" onchange="submit()"/>
<input name="devices" id="the_devices"/>