Adding Inputs To Form - vue.js

I'm using VueJS to have it dynamically add new inputs once a button is clicked. With my current code it is not adding the inputs. Why is that?
<div class="row" v-for="count in task.pos.length">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_number">Order Number:</label>
<input id="po_number" class="form-control" type="text" placeholder="Purchase Order" v-model="task.pos[count-1].purchase_order">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_amount">Order: Amount:</label>
<input id="po_amount" class="form-control" type="text" placeholder="Purchase Amount" v-model="task.pos[count-1].po_amount">
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-xs mb5 text-white" v-on:click.prevent="addEditNewPOEntry()"><i class="fa fa-plus"></i> Add PO</button>
<button class="btn btn-warning btn-block btn-xs" v-on:click.prevent="saveEdit(task)">Done</button>
</div>
addEditNewPOEntry: function(){
this.newTask.po.push({'purchase_order': this.task.purchase_order, 'purchase_amount': this.task.purchase_amount});
this.$set(this, 'task.pos.length', this.task.pos.length+1);
},

Related

Tiny Editor doesn't show on close of Bootstrap Popup

I'm using the TinyMCE Editor version 5.6.1. Whenever I load my popup for the first time, I get the following:
When I close the Popup and re-display it again, I get the following:
There are no errors in the console and loading the Popup is as plain as you can get it:
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is the code which calls the Modal
#{
ViewData["Title"] = "Product Administration";
}
<br />
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="shadow-lg p-1 mb-1 bg-primary rounded d-flex">
<h5 class="text-white flex-grow-1">Product Administration ...</h5>
<div>
<a onclick="showInPopup('#Url.Action("AddEdit","Product",null,Context.Request.Scheme)','New Product')"
class="btn btn-success text-white">
<i class="fas fa-random"></i>New Product</a>
</div>
</div>
Here is the code for the Modal:
#model ProductEdit
#{
Layout = null;
}
<script>tinymce.init({
selector: 'textarea',
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_css: '//www.tiny.cloud/css/codepen.min.css'
});</script>
<div class="row">
<div class="col-lg-12">
<form asp-action="AddEdit" asp-route-id="#Model.Id" onsubmit="return jQueryAjaxPost(this, RefreshMe, false);" autocomplete="off">
<input type="hidden" asp-for="#Model.Id" />
<div id="errValidation" class="alert alert-dismissible alert-danger" data-content="ok">
<button id="closeValidation" type="button" class="close">×</button>
<div id="errTitle" class="font-weight-bolder">Oh snap!</div>
<div id="errDetails">An Error Occured!</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.CategoryId" class="control-label"></label>
<select asp-for="#Model.CategoryId"
class="form-control"
asp-items="#(new SelectList(Model.ProductCategories,"Id","Display"))">
</select>
<span asp-validation-for="#Model.CategoryId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.SectionId" class="control-label"></label>
<select asp-for="#Model.SectionId"
class="form-control"
asp-items="#(new SelectList(Model.ProposalSections,"Id","Display"))">
</select>
<span asp-validation-for="#Model.SectionId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.ManufacturerId" class="control-label"></label>
<select asp-for="#Model.ManufacturerId"
class="form-control"
asp-items="#(new SelectList(Model.Manufacturers,"Id","Display"))">
</select>
<span asp-validation-for="#Model.ManufacturerId" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.InternalPartNumber" class="control-label"></label>
<input asp-for="#Model.InternalPartNumber" class="form-control"></>
<span asp-validation-for="#Model.InternalPartNumber" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.ManufacturerPartNumber" class="control-label"></label>
<input asp-for="#Model.ManufacturerPartNumber" class="form-control"></>
<span asp-validation-for="#Model.ManufacturerPartNumber" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.Description" class="control-label"></label>
<input asp-for="#Model.Description" class="form-control" rows="2"></>
<span asp-validation-for="#Model.Description" class="text-danger"></span>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.SellPrice" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.SellPrice" class="form-control"></>
</div>
<span asp-validation-for="#Model.SellPrice" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.Cost" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.Cost" class="form-control"></>
</div>
<span asp-validation-for="#Model.Cost" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.ProductWebsite" class="control-label"></label>
<input asp-for="#Model.ProductWebsite" class="form-control"></>
<span asp-validation-for="#Model.ProductWebsite" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Note" class="control-label"></label>
<textarea asp-for="#Model.Note" class="form-control" rows="5"></textarea>
<span asp-validation-for="#Model.Note" class="text-danger"></span>
</div>
<div class="d-flex">
<div class="form-group mr-2">
<input asp-for="#Model.Active" />
<label asp-for="#Model.Active" class="control-label text-success"></label>
</div>
<div><button type="submit" value="Save" class="btn btn-success mr-2">Save Changes</button></div>
<div><input type="reset" class="btn btn-warning"></></div>
</div>
</form>
</div>
</div>
<script>
$('#errValidation').hide();
$(function () {
$("#SectionId").chosen({ no_results_text: "Oops, Section not found!", disable_search_threshold: 4 });
$("#CategoryId").chosen({ no_results_text: "Oops, Category not found!" });
$("#ManufacturerId").chosen({ no_results_text: "Oops, Manufacturer not found!" });
});
$("#closeValidation").click(function () {
$("#errValidation").hide();
});
function RefreshMe() {
$('#products').DataTable().ajax.reload(null, false);
showSuccessToast('Product Saved', 'top-center');
}
</script>
The showInPopup method is the following:
showInPopup = (url, title) => {
$.ajax({
type: "GET",
url: url,
success: function (res) {
$('#form-modal .modal-body').html(res);
$('#form-modal .modal-title').html(title);
$('#form-modal').modal('show');
}
})
}
Any ideas about what might be happening? If I refresh the page it works again only for the first load.
Thanks.
--- Val
From the second pictures, the textare is not rendered by tinymce, because the html which ajax returned can not be rendered by tinymce. TinyMCE works when the page is building. So a better method is to use #Html.Partial to load the partial view (ProductEdit).
In the view Product Administration, change the modal body.
<div class="modal-header">
<h5 class="modal-title">#Context.Request.Scheme</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
#Html.Partial("addedit.cshtml",Model)
</div>
Change this javascript method.
var showInPopup = (url, title) => {
$('#form-modal').modal('show');
}
And move tinymce.init({ //... }) to this view Product Administration.
Then, TinyMCE will work well.

Align multi-line toggling radio buttons group in bootstrap 4

I am trying to divide 4 radio buttons into two lines using bootstrap 4 alpha6, but I can't:
<div id="payment-table" class="row">
<div class="col-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
Here's what I get:
I tried to remove "btn-group" class, and I get:
And I can't align them to fit full width, as I want two radio buttons per line, and each line has full width with 50% for each radio button.
I tried to give each one "col-6", and here's what I get:
Any suggestion?
actually we need to use only col class. by nesting we determine how many columns will be there.
Try this
.btn-primary {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="payment-table" class="row">
<div class="col">
<div class="" data-toggle="buttons">
<div class="row">
<div class="col">
<label class="btn btn-primary active col">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
</div>
Hope this helps!

Bootstrap Form Horizontal Vertical Responsive

I have a simple form and want it to be horizontal on medium an large devices and vertical on small devices with twitter-bootstrap-3.
I got it working responsive, but it's not switching to vertical style on small devices.. Isn't that possible?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-horizontal">
<div class="form-group">
<label for="telefon" class="control-label col-xs-3">Telefon</label>
<div class="col-xs-8">
<input type="text" name="telefon" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-xs-3">Email</label>
<div class="col-xs-8">
<input type="email" name="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
http://jsfiddle.net/quyw5fnL/
EDIT:
I want it to look like this on large screens:
Label1: Inputbox1
Label2: Inputbox2
And on small Screens like this:
Label1:
Inputbox1
Label2:
Inputbox2
Just realized that there was never a correct answer given. Perhaps it's just to easy, but for the sake of completion and all who are stumbling over this, here is the simple answer:
<form method="POST" action="...something..." class="form-horizontal">
<div class="form-group">
<label for="" class="col-xs-12 col-sm-3 control-label">Name</label>
<div class="col-xs-12 col-sm-9">
<p class="form-control-static">John Muller</p>
</div>
</div>
<div class="form-group">
<label for="town" class="col-xs-12 col-sm-3 control-label">Town</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="town" class="form-control " placeholder="" value="New York">
</div>
</div>
<div class="form-group">
<label for="something" class="col-xs-12 col-sm-3 control-label">Something else</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="something" class="form-control " placeholder="" value="Got it">
</div>
</div>
</form>
The important part is to set col-xs-12 and col-sm-3 on the label and col-xs-12 and col-sm-9 on the input.
Fiddle
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-inline">
<div class="form-group">
<label for="telefon" class="">Telefon</label>
<input type="text" name="telefon" class="form-control">
</div>
<div class="form-group">
<label for="email" class="">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>

Nested bootstrap js buttons

I have a set of javascript buttons nested within another set of javascript buttons. Below is my fiddle.
<div data-toggle="buttons" style="padding: 20px;">
<div class="col-xs-6">
<div class="btn btn-info" style="padding: 20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP101" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP102" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP103" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP104" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="btn btn-info" style="padding:20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP201" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP202" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP203" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP204" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/q4xLs9f8/
My issue is that when I click the top level button, it logs out the nested radio button as if it was already selected. I don't have anything marked as selected or checked.
Does nesting buttons like this cause problems?
Nesting is certainly not intended. What happens is that it the javascript is selecting the last radio input in the group and selects that.

layout is not included in all pages in asp.net mvc4 application

I am developing an asp.net mvc4 application with Bootstrap 3 and i've _Layout.cshtml in "Shared" folder , in Views, i've two pages, "Index and "Register" and i've included Layout in both of these Views but It seems that Layout is included in only "Index and not in "Register" View. Following are my Index and Register Views
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2 align="center" class="bg-info">Login</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"><strong>UserName : </strong></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="UserName">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><strong>Password</strong></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
<h2 align="center" class="bg-info">SignIn With Other Services</h2>
</form>
<form class="form-horizontal" role="form" method="post" action="/Home/FacebookLogin">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">SignIn with Facebook</button>
</div>
</div>
</form>
<h2 align="center" class="bg-info">Don't Have an Account?</h2>
<form class="form-horizontal" role="form" method="post" action="/Home/Register">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
![#{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2 align="center" class="bg-info">Register</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"><strong>UserName : </strong></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="uname" name="uname" placeholder="UserName">
<input type="button" class="btn btn-primary" id="check" value="Check Availability" >
<h4 class="bg-warning"></h4>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><strong>Password</strong></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="upass" name="upass" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><strong>Retype Password</strong></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="retype" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>]
Can you please check below answer
Section has been defined but not rendered for the layout page "~/Views/Shared/_Layout.cshtml": "head"
Also check for it