I am trying to use sortable() on divs and it's working fine, but I couldn't store the sorted divs and retrieve them for the user in the database.
here is my code:
<div class="row">
<div class="col-sm-3 col-xs-6 widget-container-col">
<div class="widget-box widget-color-blue" id="1">
<div class="widget-header">
<h4 class="widget-title">Japanese Yen</h4>
</div>
<div class="widget-body">
<div class="center bold bigger-300"><i class="fa fa-lg fa-jpy smaller-90 up-5"></i> {{ round($currencyWidget['price'], 2) }}</div>
<div class="center">as of {{ $currencyWidget['date'] }}</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
<div class="widget-box widget-color-blue" id="2">
<div class="widget-header">
<h4 class="widget-title">Another Widget</h4>
</div>
<div class="widget-body">
<div class="center bold bigger-300">Test Widget</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>
and Here is my jquery code:
$('.widget-container-col').sortable({
connectWith: '.widget-container-col',
items: '> .widget-box',
opacity: 0.8,
revert: true,
forceHelperSize: true,
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
start: function(event, ui){
ui.item.parent().css({'min-height': ui.item.height()})
},
update: function(event, ui) {
var data = $(this).sortable('serialize');
ui.item.parent({'min-height':''})
}
});
Any suggestions?
Thank you,
You can fetch the 'id' , 'index' map of sortable by iterating through all the items in sortable ,
$.map($(".widget-container-col > .widget-box "), function(element) {
return element.id + ' = ' + $(element).index();
});
Which will return you data in following form ,
["2 = 0", "1 = 1"]
See an example here
As for this ,
Also, once I save the data to the database, how would I load the page
after retrieving the data from the DB sorted the same way the user
stored it.
You should maintain the data in sorted order while fetching from database.
Related
I am trying to make a mod on an existing app. All I want to do is create an href that contains a url, but using the handlebars lookup function. When I try it just returns a blank value.
Here is my function:
var cardLink = function generateCardLink() {
var url = `"url/container-scan-reports/${vendor}/${product}/${image}"`
return url;
}
//...
res.render('vendor', {
title: 'Vendor Images',
images: images,
tags: tags,
cardLink: cardLink
});
I am then trying to pass in href this way on the top div of template.
<div class="row row-cards-pf ">
{{#each images}}
<div href={{lookup ../cardLink #index }} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
<div class="card-pf-body">
<div class="card-pf-top-element">
<span class="pficon-image card-pf-icon-circle"></span>
</div>
<h2 class="card-pf-title text-center">
{{ this }}
</h2>
<div class="card-pf-items text-center">
<div class="card-pf-item">
{{{ lookup ../tags #index}}}
</div>
</div>
<!-- <p class="card-pf-info text-center"><strong>Most recent image</strong> {{ lookup ../mostRecentImages #index}}</p> -->
</div>
<div class="card-pf-view-checkbox">
<input type="checkbox">
</div>
</div>
</div><!-- /col -->
{{/each}}
Can anyone help me?
You don't need lookup in this case. I think you want to display the url, so #index is not the right reference. Try it this way:
<div href={{../cardLink}} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
Hi there I have this calendar can someone help me how can I display data of proper agent id this foreach is showing the same for each calendar is it possible to make a query or something
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var agent_id = $(e.target).attr("agent_idja") // activated tab
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
$('#calendar' + agent_id).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
events: [
#foreach($appointments_agents as $appointmenti)
{
title : '{{ $appointmenti->agent_id }}',
start : '{{ $appointmenti->start_at }}',
},
#endforeach
],
drop: function(event) {
var apo_id = $(this).attr('apo_id');
console.log(agent_id);
$.ajax({
method: "POST",
url: "{{ url('/change-agent') }}",
data: {
_token: "{{ csrf_token() }}",
agent_id: agent_id,
appointment_id:apo_id
},
success: function () {
console.log("ok");
},
error: function () {
console.log("error");
}
});
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
});
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Agents</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs customtab" role="tablist">
#foreach($agents as $key=> $agent)
<li class="nav-item"> <a class="nav-link " data-toggle="tab" agent_idja="{{$agent->id}}" href="#agent{{$agent->id}}" id="tab{{$key}}" role="tab"> <div class="user-profile dropdown m-t-20">
<div class="user-pic">
<img src="{{ asset('app/assets/images/users/1.jpg') }}" alt="users" class="rounded-circle img-fluid" />
</div></div> <span class="hidden-xs-down">{{$agent->name}}</span></a> </li>
#endforeach
</ul>
<div class="p-20">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Appointments </h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id='external-events'>
#foreach($appointments as $appointment)
<div class='fc-event' apo_id="{{$appointment->id}}" > {{$appointment->firstname}} <br>{{$appointment->start_at}}</div><br>
#endforeach
<p>
<input type='checkbox' id='drop-remove' checked/>
<label for='drop-remove'>remove after drop</label>
</p>
</div>
</div>
</div>
</div>
</div><div class="col-lg-9">
<div class="tab-content tabcontent-border">
<?php $i=1; ?>
#foreach($agents as $key=> $agent)
<div class="tab-pane agent tabs{{$key}}" id="agent{{$agent->id}}" agent_id="{{$agent->id}}" role="tabpanel">{{$agent->id}}
<div class="card-body b-l calender-sidebar">
<div id='calendar-container'>
<div id='calendar{{$agent->id}}' class="calendar" agent-id="{{{$agent->id}}}"></div>
</div>
</div>
</div>
<?php $i++; ?>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So this is how it is shown
As you can see here on the attached screenshot I managed to change the calendars with tabs and when I switch it shows the calendar for that agent id, but for the events it does not work I dont know why does someone have an idea what should I do..? I tried inside the foreach of appointment to use a condition like if $appointment->agent_id == agent_id but does not work
I'm looking to bridge multiple indices leveraging autocomplete.js. I found this tutorial very helpful. My issue is what happens when I have a lot more that two indices to search?
Currently in our project we'll have over 30 different indices that will need to be searched. Obviously, simply copy 'n paste code over-and-over again is horrible thing to do, but I can't figure out any other way to make this work then just doing that.
Is there another way of doing things that would normalize my code?
Here is an example of it. Just imagine that there are another 28 indices in this example. You can see that it's out of control quickly.
A working JSFiddle can be found here
var client = algoliasearch('9G2RUKPPGE', '8860a74c330efaf0119818fcdd800126');
var SPR = client.initIndex('dev-SPR');
var SWG_SPR = client.initIndex('dev-SWG_SPR');
//initialize autocomplete on search input (ID selector must match)
$('#aa-search-input').autocomplete({ hint: false }, [
{
source: $.fn.autocomplete.sources.hits(SPR, {
hitsPerPage: 15
}),
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
const markup = `
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 nopadding">
<img src="${suggestion.image}" alt="" class="algolia-thumb">
</div>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-8">
<span>${suggestion._highlightResult.code.value}</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
</div>
</div>
<div class="row hidden-xs">
<div class="col">
<span>${suggestion.description}</span>
</div>
</div>
</div>
</div>`;
return '<div class="algolia-result">' + markup + '</div>';
},
empty: function(options) {
return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
},
}
},
{
source: $.fn.autocomplete.sources.hits(SWG_SPR, {
hitsPerPage: 15
}),
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
const markup = `
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 nopadding">
<img src="${suggestion.image}" alt="" class="algolia-thumb">
</div>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-8">
<span>${suggestion._highlightResult.code.value}</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
</div>
</div>
<div class="row hidden-xs">
<div class="col">
<span>${suggestion.description}</span>
</div>
</div>
</div>
</div>`;
return '<div class="algolia-result">' + markup + '</div>';
},
empty: function(options) {
return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
},
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
window.location.href = window.location.origin + '/' + suggestion.url
});
This line:
$('#aa-search-input').autocomplete({ hint: false }, [] ...
last parameter is an array. Why can't you have a function which given array of the client indexes would do all these client.initIndex('dev-SPR') and then generate an array with all of the objects you have to deal with now?
Call that function with ['dev-SPR','dev-SWG_SPR' ...]
So you end up with:
`$('#aa-search-input').autocomplete({ hint: false }, myNewFn(['dev-SPR','dev-SWG_SPR']))`
Unless something else is different in those objects other than the client indexes ...
i have that div. It's ok!
<div class="product"><div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in showProduct">
<div class="numeric-prod col-xs-12 col-sm-2">
{{$index+1}}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.name }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.article }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.description }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.cost }}
</div>
<div class="col-xs-12 col-sm-2"">
<button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
</div>
</div></div>
i'm try add that div after ng-repeat function. He work. (that code)
$scope.productClick = function (event) {
if ($scope.testId != event)
{
$scope.testId = event;
if ($scope.testId != undefined)
{
$scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
$scope.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);
$('.product').appendTo('#'+event);
$('.tr-table .product').css({'display' : 'block'});
if ($scope.showProduct[0]== undefined)
{
$scope.ProductsShopName = 'No Products';
}
else
{
$scope.ProductsShopName = $scope.productTableName[0].name+' product list';
}
}
} else {
$scope.testId = 0 ;
$('.tr-table .product').css({'display' : 'none'});
$('.product').appendTo('.container');
}
}
Why do I ask - after moving to a new page (dir pagination angularjs), the div added to me in the .tr-table Automatically deleted.
You can see how it happens here http://point.salesdep.by/
Click the button "product" (once), then go to the next page of the table. And click button "product" again. ("not work") because div '.product' removed from the first page. Help please guys!
It would be easier to do it the angular way. Update you parent div (the ng-repeat shops) and add your div with a boolean to display it or not:
<div class="row dragger">....</div>
<div class="product" data-ng-show="shop.showList">
<div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in shop.showProduct">
<div class="numeric-prod col-xs-12 col-sm-2">
{{$index+1}}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.name }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.article }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.description }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.cost }}
</div>
<div class="col-xs-12 col-sm-2"">
<button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
</div>
</div>
</div>
And update your controller accordingly (my response probably doesn't work, it's just to give you the main idea):
$scope.productClick = function (shop) {
//if you want to hide all other div, you can loop here over shops to
//set all showList at false
shop.showList = !shop.showList;
if(true === shop.showList){
//this part is probably false
//you need to fetch the data here so you can display it
$scope.testId = shop.id;
$scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
shop.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);
if (shop.showProduct[0]== undefined)
{
$scope.ProductsShopName = 'No Products';
}
else
{
$scope.ProductsShopName = $scope.productTableName[0].name+' product list';
}
}
}
}
Hi I am working on requirement where my filter object is keep getting changed and because of that i have to change ng-repeat on div.
html code :
<div class="col-md-6" ng-repeat="model in models | filter:{ModelText : '!All models', ModelId: '!FilteredModelIds'}:true">
<div class="well">
<div class="media">
<div class="media-object small"><i class="pp-car"></i></div>
<div class="media-body">
<div class="text-box">
<h3>{{model.ModelText}}</h3><span class="hr-small"></span>
</div>
<div class="dashboard-control clearfix">
<div class="simple-metric text-left sub-metric">
<div class="metric-title">Satisfaction score</div>
<div class="metric-number text-red">{{model.SatisfactionAvg}}</div>
</div>
<div class="simple-metric text-left sub-metric">
<div class="metric-title">Total interviews</div>
<div class="metric-number">{{model.TotalInterviews}}</div>
</div>
</div>
<ul class="list-standard">
<li> View interviews</li>
</ul>
</div>
</div>
</div>
</div>
here is the angular js code:
function getModelId() {
dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
$scope.FilteredModelIds = result.data;
});
}
Model json :
[{"ModelId":0,"ModelText":"All models","Sequence":0,"TotalInterviews":0,"SatisfactionAvg":0.000000},{"ModelId":1,"ModelText":"A3","Sequence":20,"TotalInterviews":2062,"SatisfactionAvg":9.637245},{"ModelId":2,"ModelText":"A4","Sequence":30,"TotalInterviews":3106,"SatisfactionAvg":9.743721},{"ModelId":3,"ModelText":"A5","Sequence":40,"TotalInterviews":1863,"SatisfactionAvg":9.694041},{"ModelId":4,"ModelText":"A6","Sequence":50,"TotalInterviews":280,"SatisfactionAvg":9.642857},{"ModelId":5,"ModelText":"A8","Sequence":70,"TotalInterviews":46,"SatisfactionAvg":11.217391},{"ModelId":9,"ModelText":"Q5","Sequence":110,"TotalInterviews":3176,"SatisfactionAvg":9.503778},{"ModelId":10,"ModelText":"Q7","Sequence":120,"TotalInterviews":1355,"SatisfactionAvg":9.685608},{"ModelId":11,"ModelText":"R8","Sequence":130,"TotalInterviews":31,"SatisfactionAvg":10.064516},{"ModelId":12,"ModelText":"TT","Sequence":140,"TotalInterviews":408,"SatisfactionAvg":9.764705},{"ModelId":13,"ModelText":"A1","Sequence":10,"TotalInterviews":1087,"SatisfactionAvg":10.097516},{"ModelId":14,"ModelText":"A7","Sequence":60,"TotalInterviews":263,"SatisfactionAvg":10.190114},{"ModelId":15,"ModelText":"Q3","Sequence":105,"TotalInterviews":1045,"SatisfactionAvg":9.542583}]
on page load its showing proper data with filter. but on change of filtered object in my case FilteredModelIds, its not getting updated. any help is appreciated.
please let me know if i am worng here.
Thanks.