I need to create table with inline create of row.
i.e. if you click on the button a row is created.
It will add new empty row (with two fields like in the code below) ,how should I do that?
I've tried with the following code without success,any idea how to do it?
Javascript:
$(document).ready(function ()
{
$(".createrow").hide();
});
$("#add").click(function ()
{
$(".createrow").toggle();
});
HTML:
<div class="content">
<div class="form-inline">
<h4>Role</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<button type='button' id='.createrow' class="btn ui-state-default medium" style="width: 200px;">
Create
</button>
#Html.LabelFor(model => model.name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#*#Html.EditorFor(model => model.name, new { htmlAttributes = new { #class = "form-control" } })*#
#Html.ValidationMessageFor(model => model.name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.checkBox1, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#*#Html.EditorFor(model => model.checkBox1)*#
#Html.ValidationMessageFor(model => model.checkBox1, "", new { #class = "text-danger" })
</div>
</div>
</div>
I am not entirely sure of what you're asking for but from what i can see perhaps something like the following will help?
Creating a new row in table based on button press.
working example:JSfiddle
Jquery
$('#addrow').click( function() {
$('#table').append('<tr><td>New Row</td></tr>');
});
Example HTML
<button id='addrow'>Add row</button>
<table id='table'>
<tbody>
<tr>
<td>row</td>
</tr>
</tbody>
</table>
Updated
For row to appear at top of rows instead of before replace append with prepend
working example:JSfiddle
Have you tried this? It adds a row for data input for a chart, maybe the script can be adapted for your table?
http://www.amcharts.com/tutorials/live-editing-chart-data/
Related
I am trying to passed the value from the MVC form to JavaScript. I am using bootstrap to hide and show field. when I remove the bootstrap hide and show functionality on the form I will get the value in the message box but when the Hide/Show is enable I cannot get the value as shown by the image below. can anyowne tell me where I am going wrong
HTML
#using (Html.BeginForm("SearchPatient","HOME", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.Label("Search Criteria", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.SearchCriteria,
new List<SelectListItem> {
new SelectListItem { Value = "" , Text = "Select Search Criteria" },
new SelectListItem { Value = "1" , Text = "Patient Id" },
}, new { #class = "form-control selectchosen" })
</div>
</div>
<div class="form-group" id="PatientId" style="display:none">
<div class="form-group">
#Html.LabelFor(model => model.PatientId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PatientId, new { htmlAttributes = new { #class = "form-control " } })
</div>
</div>
</div>
<div class="form-group" id="AllShow" style="display:none">
<div class="form-group">
<div class="col-lg-offset-2">
<input type="button" value="Search" class="btn btn-success" id="btnSubmit" onclick="Enablecontrols();" />
</div>
</div>
</div>
</div>
}
JavaScript
<script type="text/javascript">
$('#SearchCriteria').change(function () {
if ($("#SearchCriteria").val() == 1) {
$("#AllShow").show();
$("#PatientId").show();
ValidateField("PatientId", true);
}
function Enablecontrols() {
$(document).ready(function () {
var patientid = $("#PatientId").val();
if ($("#SearchCriteria").val() == 1) {
alert("I am an alert box! the patient number is" + patientid);
}
}
}
</script>
rather than use the show/hide methods of bootstrap, use toggle. It's more reliable.
If that doesn't work you can also use $('#PatientId').css('display','block');
Issue fixed by changing the ID of the Div to dPatientId
Stupid mistake
Im new on using Summernote Textarea , and Im having difficulties on passing the value on a summernote textarea. Tried using the conventional .html(), .text() and .val() to pass the value of my dropdown and append it inside the textarea. Here is my set of codes
$("#btnAddVariable").click(function (e) {
var eVariable = $("#EmailVariable option:selected").val();
$("#EmailMessage").val(eVariable);
$("#EmailMessage").text(eVariable);
alert(eVariable);
})
My Dropdown
<div class="form-group">
#Html.LabelFor(model => model.EmailVariable, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-6">
#Html.DropDownListFor(model => model.EmailVariable, new SelectList(ViewBag.emailVariables, "Value", "Text"), "Please Select", htmlAttributes: new { #class = "form-control" })
#* #Html.DropDownList(model => model.EmailVariable, new SelectList(ViewBag.emailSender, "Value", "Text"), "Please Select", htmlAttributes: new { #class = "form-control" })*#
</div>
<div class="col-md-2">
<input type="button" id="btnAddVariable" value="Add Variable" class="btn btn-primary chosen" />
</div>
</div>
and my Summernote Textarea
<div class="form-group">
#Html.LabelFor(model => model.EmailMessage, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
<div class="ibox-content no-padding">
#Html.TextAreaFor(model => model.EmailMessage, new { #class = "summernote", rows = "5", cols = "90" })
</div>
</div>
</div>
Hoping someone can help me with this. Thanks in Advance
Here is the solution:
$("#btnAddVariable").click(function (e) {
var eVariable = $("#EmailVariable option:selected").val();
$("#EmailMessage").val(eVariable);
$(".summernote").summernote('code',eVariable); //add text to summernote
alert(eVariable);
});
Try with
$("textarea.note-codable").val(eVariable);
Well, im trying to do something with javascript and the button is not firing the event, first i tryed to knew how to prevent to posting back, then i used something like this:
<div class="form-group">
#Html.LabelFor(model => model.Requerimentos, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
#Html.TextBoxFor(model => model.Requerimentos,new { id = "Requerimento", #class = "form-control" })
<input type="button" onclick="acrescenteLista();return false;" value="Adicionar" id="Adicionar" />
#Html.ValidationMessageFor(model => model.Requerimentos, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<ul id="Requerimentos">
</ul>
</div>
</div>
the button should call the acrescentaLista() function that is in my script that is called correctly.
Here is my script
function acrescenteLista() {
var texto1 = document.getElementById("Requerimento").value;
var texto = document.getElementById("Requerimentos");
console.log(texto);
console.log(texto2);
}
how can i solve this??
You script works properly here is the fiddle https://jsfiddle.net/ogtnfk75/4/
function acrescenteLista() {
var texto1 = document.getElementById("Requerimento").value;
var texto = document.getElementById("Requerimentos");
console.log(texto1);
console.log(texto);
}
Console.log(texto2) ? you dont have that variable in your script
I have problem with my MVC app which is shown in the pictures.
So when i click on the one of the checkboxes, script will be set the visible of the div to visible. But this is not good idea because the second div have a empty space above.
Checkboxes with script insdie:
<label><input type="checkbox" onclick="biurowyScript();" id="biurowyCheck" /> Pracownik biurowy</label>
<label><input type="checkbox" onclick="przewodnikScript();" id="przewodnikCheck" style="margin-left: 30px" /> Przewodnik</label>
biurowy div
<div id="biurowy" style="visibility: hidden">
<div class="form-group">
#Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { #class = "text-danger" })
</div>
</div>
</div>
przewodnik div:
<div id="przewodnik" style="visibility: hidden">
<div class="form-group">
#Html.LabelFor(model => model.Przewodnik.Uprawnienia, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Przewodnik.Uprawnienia, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Przewodnik.Uprawnienia, "", new { #class = "text-danger" })
</div>
</div>
</div>
In scripts i only set visible of the divs to visible. But like i said this is not the good idea for this app. So what i can use to fix this ?
Use display="none" instead of visibility="hidden"
<div id="biurowy" style="display: none">
<div class="form-group">
#Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { #class = "text-danger" })
</div>
</div>
</div>
EDIT:
When you use visibilt=hidden it keeps the space, while using display=none you it does not keep the space. You can show it with jquery the same way, i mean $(item).show()
Good morning!
I have a checkbox in my Razor and it shows a div with a datepicker when the check box is checked.
My error is when I double click the checkbox shows the div with the datepicker when is not checked (Do the opposite of what I need).
Here is my code:
<div class="form-group">
#Html.LabelFor(model => model.SupHUBZoneCertified, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
<div class="checkbox" id="cb1">
<label>
#Html.EditorFor(model => model.SupHUBZoneCertified)
#Html.ValidationMessageFor(model => model.SupHUBZoneCertified, "HUB Zone Certified:")
</label>
</div>
</div>
</div>
<div class="form-group" id="dateCb1" style="display:none">
#Html.LabelFor(model => model.SupCategoryHUBZoneDate, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.SupCategoryHUBZoneDate, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.SupCategoryHUBZoneDate, "", new { #class = "text-danger" })
</div>
</div>
and my javascript:
$("#cb1").click(function () {
$("#dateCb1").toggle(this.checked);
});
Assuming that you're using a jQuery UI datepicker, I can't see the toggle method in the api docs
There are only show and hide methods.
So you should modify your code:
$("#cb1").click(function () {
var action = this.checked ? "show" : "hide";
$("#dateCb1").datepicker(action);
$("#dateCb1").toggle(this.checked);
});
Thank you all I found the error, so basically I can't use the #cb1 as the checkbox ID because I need to use the ID of the input.
The ID for the input is self generated in ASP MVC and use the name declared in the MVC model.
So the code would be
$("#SupHUBZoneCertified").click(function () {
$("#dateCb1").toggle(this.checked);
});
I found the input class name using "Inspect Element in Internet Explorer"