I have the following code which invokes a method called search once the search button is submitted. But the problem rely on that the submit button does not make call to the actionresult search in all cases:
Index page in where it has the form
<section class="search-sec">
<div class="container-fluid">
<form>
<div class="row">
<div class="col-lg-12">
<div class="row">
#using (Html.BeginForm("Search","Home",FormMethod.Post))
{
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="SearchTitle" class="form-control search-slt" placeholder="Job Title, Skills, Company!">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" class="form-control search-slt" placeholder="Location">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<button type="submit" value="Create" class="btn btn-danger wrn-btn">Search</button>
</div>
}
</div>
</div>
</div>
</form>
</div>
</section>
Home Controller:
public ActionResult Search(string SearchTitle)
{
var result = db.Job.Where(m => m.JobTitle.Contains(SearchTitle)).ToList();
return View(result);
}
add [HttpPost] attribute like this on top of your action
it will fix your issue
[HttpPost]
public ActionResult Search(string SearchTitle)
{
var result = db.Job.Where(m => m.JobTitle.Contains(SearchTitle)).ToList();
return View(result);
}
Moving the Beginform to the top will solve your problem rather than having it inside the row. this will solve the problem.
<section class="search-sec">
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
<div class="container-fluid">
<form>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchTitle" class="form-control search-slt" placeholder="Job Title, Skills, Company!">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" class="form-control search-slt" placeholder="Location">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<button type="submit" value="Create" class="btn btn-danger wrn-btn">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
}
When I add a form to the window is arranged like this:
but I need:
In file: popup.component.html:
<div id="ng2-opd-popup-main"
*ngIf="visible" [ngClass]="mainClass" [ngStyle]="mainStyle">
<div class="row">
<div style="display: inline-block;width:100%">
<div id="ng2-opd-popup-well" [ngStyle]="wellStyle"
class="ng2-opd-popup-well ng2-opd-popup-well-sm">
{{popupService.options.header}}
</div>
</div>
<div style="margin:20px;">
<ng-content></ng-content>
<div *ngIf="popupService.options.showButtons"
style="margin-bottom:20px;margin-top:20px;float: right">
<button id="cancelBtn" [ngClass]="cancelBtnStyle"
type="reset" (click)="confirmNo()">
{{popupService.options.cancleBtnContent}}
</button>
<button id="confirmBtn" [ngClass]="confirmBtnStyle"
(click)="confirmYes()">
{{popupService.options.confirmBtnContent}}
</button>
</div>
</div>
</div>
</div>
When I change line <div style="margin:20px;">on <div style="margin:20px; width:100%"> Nothing happens
The application does not respond to my code changes. What is the problem?
Is there a good method to toggle template's reactivity on client-side by checkbox?
Client Main HTML
<section class="margin-bottom-10" id="trend">
<div class="headline">
<h4><i class="fa fa-th-large"></i> section1</h4>
<div class="checkbox auto-update-check">
<label><input type="checkbox" id="Trend" checked="checked">auto-update</label>
</div>
</div>
</section>
<div class="col-lg-4 col-md-4 col-sm-6">
<!--<div class="col-md-12 col-sm-12">-->
{{> list1}}
<!--</div>-->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
{{> list2}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
{{> list3}}
</div>
Main has 3 sections and checkboxes.
and I want to toggle the reactivity(auto-update) each section on client-side.
pic
I'm creating an app with Meteor using alethes:pages package for the pagination and Bootstrap 3 for the styles.
In the main page I'm displaying multiple items (3 per row) using infinite scroll.
The problem comes when an item is higher than his neighbour items, making the next row to have a free space and floating one item to the right, instead of appearing below the higher one. Here you can see the problem:
I made an HTML template for the item to be used by the pagination package.
So, for the example shown in the image, the generated code will be this one:
<div class="col-md-10 col-lg-10 col-md-offset-2 col-lg-offset-2">
<div class="pagesCont">
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 1
</h4>
<a href="#">
<img src="/cfs/files/images_publications/jvtQWo4KSziMXCryh/300x340.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 1 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 2
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 2 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 3
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 3 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 4
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 4 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 5
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 5 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 6
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 6 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 7
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 7 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 8
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 8 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 9
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 9 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
</div>
</div>
I could make the items to have the same hight but I want to have different image sizes and multiline text without leaving free space inside the item.
I want something like the items list shown in this web: http://es.wallapop.com/
But the problem with that list is that uses absolute positions in order to display an item below each other. I would like to avoid absolute positions since I think it wouldn't be so easy to integrate with the package mentioned before.
I don't know if something like this is possible in Bootstrap 3 without using absolute positions.
This has little to do with meteor or pagination I believe.
What you are looking for is to probably implement masonyjs with bootstrap. Layouts like these can get really interesting and tricky. I would definitely look into that combo.
Following the conversation in the comments:
After a lot of research and testing I finally got Masonry to work perfectly with the alethes:pages package. I know, in my last comment I said that I gave up on this, but after some time with my homemade infinite scroll I realized that it wasn't reacting to the mongodb changes, it was static. I didn't want to spend more time on that...
Before showing you the code that makes the magic you have to have some things in mind:
The best way to use Masonry is by using Isotope, at least for me that was the case. I recommend you to install this meteor package: isotope:isotope
You will also need the ImagesLoadead library: iamkevingreen:imagesloaded
The alethes:pages package uses the document.body.offsetHeight DOM property as the total page height, in order to load new items when scrolling. If you are using Bootstrap that property may not represent the total page height, so every scroll made can add new items no matter what you set in the infiniteTrigger option. The way to fix this is by adding a clearfix before closing the body:
<template name="MasterLayout">
...
{{> yield}}
<div class="clearfix"></div>
</template>
The items container used by Masonry must have padding: 0 (at least left and right) in order to be displayed correctly using Bootstrap.
Now, let's see the code.
This is the server code:
Items = new Meteor.Collection('items');
ItemsPagination = new Meteor.Pagination(Items, {
templateName: "ItemsList",
itemTemplate: "Item",
divWrapper: 'container',
infinite: true,
infiniteTrigger: 0.8,
pageSizeLimit: 1512,
dataMargin: 0,
perPage: 21
});
These are the templates used by the pagination object:
<template name="ItemsList">
{{> pages}}
</template>
<template name="Item">
<div class="ms-item col-md-4 col-lg-4">
<div class="well clearfix">
<h4>{{name}}</h4>
<!-- Using CFS package in a global helper to retrieve the item image -->
{{#with getPhoto photo}}
<a href="#">
<img src="{{url store='images_items'}}" alt="No photo" class="img-responsive img-thumbnail" />
</a>
{{/with}}
<!-- Using a global helper to get the item category -->
{{#with getCategory category}}
<h5 class="col-md-8 col-lg-8"> {{name}} </h5>
{{/with}}
<h4 class="col-md-4 col-lg-4 text-right"> {{price}} €</h4>
<div>
<div class="col-md-12 col-lg-12">
<!-- Using a global helper to get the item owner -->
{{#with getUser owner}}
{{#with profile}}
<a href="#" class="break-word">
{{ [first-name] }} {{ [last-name] }}
</a>
{{/with}}
{{/with}}
</div>
</div>
</div>
</div>
</template>
These is the code used by the ItemList template:
var observer, container;
Template.ItemList.onRendered(function() {
container = $('#container');
//Load Isotope with Masonry
container.imagesLoaded(function() {
container.isotope({
layoutMode: 'masonry',
itemSelector: '.ms-item',
transitionDuration: '0.1s'
});
container.isotope('layout');
});
//Using a MutationObserver to readapt the layout when a new item is added
observer = new MutationObserver(function(mutations) {
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
});
//Adding the MutationObserver to the items container
observer.observe(container.get(0), {
attributes: false,
childList: true,
characterData: false
});
});
And finally, this is the usage of the template:
<template name="myTemplate">
<div class="col-md-12 col-lg-12">
{{> ItemsList}}
</div>
</template>
That's how I made it. Hope this helps someone ;)
EDIT
I have found a better way to do all this (without a MutationObserver I mean). Instead, I'm using the _uihooks object provided by Meteor:
Template.ItemList.onRendered(function() {
var container = $('#container');
//Load Isotope with Masonry
container.imagesLoaded(function() {
container.isotope({
layoutMode: 'masonry',
itemSelector: '.ms-item',
transitionDuration: '0.1s'
}).isotope('layout').isotope();
});
//Using uihooks instead of MutationObserver
container[0]._uihooks = {
insertElement: function(node, next) {
$(node).insertBefore(next);
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
},
removeElement: function(node, next) {
$(node).remove();
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
}
};
});
This is my first project testing out knockout.js with .net mvc. So far, looks cool.
I have this view:
<div class="container">
<div data-bind="foreach: viewModel.items">
<div class="well well-small">
<div class="row">
<div class="span9">
<h3><span data-bind="text: Name"></span><small> Registered by <span data-bind="text: RegisteredBy"></span>at <span data-bind="text: Registered"></span></small></h3>
<p><span data-bind="text: Description"></span></p>
</div>
</div>
<div class="row">
<div class="span6">
<div class="progress">
<div class="bar" data-bind="style: {width: progress }"></div>
</div>
</div>
<div class="span3">
<span data-bind="text: progress"></span>% done <a class="btn btn-mini" href="#"><i class="icon-plus"></i>add 10%</a>
</div>
</div>
</div>
</div>
Then I do this:
<script>
$(document).ready(function () {
var initialData = #(Html.Raw(Json.Encode(Model)))
viewModel = { items: ko.observable(initialData) };
ko.applyBindings(viewModel);
});
All this works, except where I try to bind like this data-bind="style: {width: progress }"
Im positive that the progress field are working since I get the value there in the span below.
Any idea?
You would need to specify a unit. Something like {width: progress() + 'px'} or create a computed observable that returns it with the units.