We Keep Coding

Modal does not close after clicking button

im trying to build a modal, with a try-catch block, so if everyting is valid and entered correctly in the form, the modal should be closed
This is the function login, i wonder why $('#dialog').modal('hide'); does not work
<script>
function login() {
var kontakt = new Kontakt();
kontakt.name = document.getElementById('name').value;
kontakt.email = document.getElementById('email').value;
kontakt.plz = document.getElementById('plz').value;
kontakt.ort = document.getElementById('ort').value;
kontakt.strasse = document.getElementById('strasse').value;
try {
kontakt.pruefe();
}
catch(err) {
return window.alert(err.message);
}
kontakteSpeicher.neuerKontakt(kontakt);}
$('#dialog').modal('hide');
</script>
</head>
This is the modal
<div class="container">
<h2></h2>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dialog">
Login-Dialog öffnen
</button>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login (im header)</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container">
<p>im body:</p>
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
</div>
</div>
</div>
</div>
</div>

The only problem you have is that the $("#dialog").modal('hide') statement isn't inside your login function body.
This should work.
function login() {
var kontakt = new Kontakt();
kontakt.name = document.getElementById('name').value;
kontakt.email = document.getElementById('email').value;
kontakt.plz = document.getElementById('plz').value;
kontakt.ort = document.getElementById('ort').value;
kontakt.strasse = document.getElementById('strasse').value;
try {
kontakt.pruefe();
}
catch(err) {
return window.alert(err.message);
}
kontakteSpeicher.neuerKontakt(kontakt);
$('#dialog').modal('hide');
}

It seems like you are closing your login function on the line before the call to close the modal.
Try to change this:
kontakteSpeicher.neuerKontakt(kontakt);}
$('#dialog').modal('hide');
to this:
kontakteSpeicher.neuerKontakt(kontakt);
$('#dialog').modal('hide'); }

Displaying Javascript response object in MODAL

I have created a view as:
<div class="container" style="padding-top:20px">
<div class="row">
#foreach (var item in Model)
{
<div class="col-lg-4" style="padding-top:20px;">
<div class="card" style="width:18rem">
<img src="#Url.Content(item.ImagePath)" class="card-img-top" />
<div class="card-body">
<div class="row">
<h5 class="card-title">#item.ProductName</h5>
<p style="color:crimson">  ( Rs #item.ProductPrice )</p>
</div>
#*Details*#
<button class="btn btn-primary btndetails" data-product-id="#item.Id" #*data-target="#loginModal" data-toggle="modal"*#>Details</button>
</div>
</div>
</div>
}
</div>
when I click the Details button the JavaScript function is invoked in which I am making an ajax call to Admin controller and GetProduct actionMethod which takes an Id, Gets the data with that id and returns a JSON object:
<script>
$(document).ready(function () {
$(".btndetails").on("click", function () {
$.ajax({
method: "POST",
url: "/Admin/GetProduct/" + $(this).attr("data-product-id"),
success: function (response) {
}
});
});
});
</script>
Its all working correct until here, I get the object in success function response object but now I want to display that object in a MODAL that I have created as:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="modal fade" data-backdrop="static" id="loginModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> Details</h4>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
#using (Html.BeginForm())
{
}
</div>
<div class="modal-footer">
<button class="btn btn-success">Save</button>
<button class="btn btn-primary" data-dismiss="modal">Close</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
</div>
So in short I want to display the object I received in JavaScript Response object in MODAL I created.

Wait it looks like you are trying to use ASP.Net rendering engine (which is generated during request on SERVER side) to render a result of an AJAX request which is performed by the client.
Sorry friend but that's just not going to work.
I mean if you really have to use ASP.Net to render that form, I'd suggest creating a separate view which just returns the form (Html.BeginForm()) section, then use jquery to paste that into the modal-body class as a raw html.
$('.modal-body').html(response);
It'd be a really bad solution from a MVC point of view and I'd advise against that, but it'd get the job done.

I am succesful in woring out the solution as :
I used getElementById and value functions to get the MODAL input field and then used value function to set the values in response object to MODAL input fields.
My AJAX Call is :
$(".btndetails").on("click", function () {
$.ajax({
method: "POST",
url: "/Admin/GetProduct/" + $(this).attr("data-product-id"),
success: function (response) {
var pName = document.getElementById("pName");
pName.value = response.ProductName;
var pPrice = document.getElementById("pPrice");
pPrice.value = response.ProductPrice;
var pDPrice = document.getElementById("pDPrice");
pDPrice.value = response.DiscountPrice;
var imgTitle = document.getElementById("imgTitle");
imgTitle.value = response.ImageTitle;
var stock = document.getElementById("stock");
stock.value = response.Stock;
var description = document.getElementById("description");
description.value = response.Description;
var img = document.getElementById("img");
img.value = response.ImagePath;
$("#img").attr("src", img);
}
});
});
And the modal i created below it is :
<div class="modal-body">
<form>
<div class="row">
<div class="form-group">
<label for="exampleInputEmail1">Product Name</label>
<input id="pName" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div>
<img src="" id="img" width="150px" height="150px" style="float:right" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Product Price</label>
<input id="pPrice" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Discount Price</label>
<input id="pDPrice" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Image Title</label>
<input id="imgTitle" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Quantity in stock</label>
<input id="stock" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="exampleInputEmail1">Description</label>
<input id="description" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group col-lg-6">
<div class="col-lg-6">
<label for="exampleInputEmail1">Category</label>
#Html.DropDownList("Category", new SelectList((System.Collections.IEnumerable)ViewData["Category"], "Id", "CategoryName"), new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
</div>
</form>
</div>
Anfinal outpur is like :

How to make a second submit button?

I have a classic form that submits data to a controller. Nothing special until here.
The thing is I want a second button, let's say "Save and Exit" that I want to also submit and redirect to home page.
How could I do that? I guess this includes a little javascript for checking?
I just can't wrap my head around it. Thank you!
<form method="POST" action="link/here" id="main_form" class="form-horizontal">
<input name="_token" value="JDtRMqc4aRFlK4QFzDPRTxKvNxIj5EnoLOceOUBT" type="hidden">
<div class="box-body">
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Figura</label>
<div class="col-sm-9">
<input class="form-control" id="Figura" name="figura" placeholder="Figura" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Parcela</label>
<div class="col-sm-9">
<input class="form-control" id="Parcela" name="parcela" placeholder="Parcela" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Rand</label>
<div class="col-sm-9">
<input class="form-control" id="Rand" name="rand" placeholder="Rand" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Nr. Locuri</label>
<div class="col-sm-9">
<input class="form-control" id="Locuri" name="locuri" placeholder="Locuri" value="" type="text">
</div>
</div>
<div id="locuri_div" class="col-sm-offset-1"></div>
<div class="pull-right">
<button type="submit" class="btn btn-success">Salveaza</button>
</div>
<div class="pull-left">
Inapoi
</div>
</div>
<!-- /.box-body -->
</form>

your current button :
<button type="submit" name="check" value="0" class="btn btn-success">Save</button>
add a new one:
<button type="submit" name="check" value="1" class="btn btn-success">Save and Exit</button>
then in your save.php do:
if($_POST['check'] == 0){
//redirect to page
}
else{
//redirect to home
}

Give each button a name and a value. In your controller (client-side JS is the wrong tool for this), test the name and then redirect based on that.
For example:
<button name="action" value="save">Save</button>
<button name="action" value="save_and_go_home">Save & Go Home</button>
And then (to use expressjs as an example):
app.post('/here', function (req, res) {
// Do everything else you want to do with the data
// Then
var action = req.body.action;
if (action === "save_and_go_home") {
res.redirect("/");
} else {
res.send('Whatever you were sending before')
}
});

Based on selected option on one page hide input on another page in mvc

Hi i have this view Index :
<h1>Přidání nové reklamy do systému</h1>
<div class="row">
<div class="col-md-12">
<div class="row">
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #area = "Home", #role = "form" }))
{
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="typ_reklamy">Typ reklamy</label>
<div class="col-md-8">
<select id="fnivel" name="typ_reklamy" class="form-control">
<option value="1">Reklama na určitou částku</option>
<option value="2">Reklama na určitou dobu</option>
<option style="display:none;" value="3">Reklama na určitý počet kliknutí</option>
</select>
</div>
</div>
}
</div>
</div>
</div>
And when i select this option in selecet:
<option value="1">Reklama na určitou částku</option>
I need on this page :
<h1>Přidání nové reklamy do systému</h1>
<div class="row">
<div class="col-md-12">
<div class="row">
#using (Html.BeginForm("Detail", "Home", FormMethod.Post, new { #area = "Home", #role = "form" }))
{
<fieldset>
<div class="form-group" id="fnivel2" style="margin-bottom:10px;">
<label class="col-md-3 control-label" for="datumz">Datum začátku</label>
<div class="col-md-7">
<div class="editor-field">
<input id="textinput" readonly name="datumz" type="text" value="#Model.allAdvert.datumz" class="form-control input-md" />
</div>
</div>
</div>
<div class="form-group" id="fnivel3" style="margin-bottom:10px;">
<label class="col-md-3 control-label" for="datumk">Datum konce</label>
<div class="col-md-7">
<div class="editor-field">
<input id="textinput" readonly name="datumk" type="text" value="#Model.allAdvert.datumk" class="form-control input-md" />
</div>
</div>
</div>
</fieldset>
}
</div>
</div>
</div>
Hide this two inputs:
<div class="form-group" id="fnivel2" style="margin-bottom:10px;">
<label class="col-md-3 control-label" for="datumz">Datum začátku</label>
<div class="col-md-7">
<div class="editor-field">
<input id="textinput" readonly name="datumz" type="text" value="#Model.allAdvert.datumz" class="form-control input-md" />
</div>
</div>
</div>
<div class="form-group" id="fnivel3" style="margin-bottom:10px;">
<label class="col-md-3 control-label" for="datumk">Datum konce</label>
<div class="col-md-7">
<div class="editor-field">
<input id="textinput" readonly name="datumk" type="text" value="#Model.allAdvert.datumk" class="form-control input-md" />
</div>
</div>
But i don´t know how to accomplish this in mvc.
Problem is how to pass value of option from view index to view detail.
Please can you help me ?

Use onchange="postvalues()" event and post values and catch in action
JavaScript function
function postvalues()
{
$.ajax({ url: '/home/Detail',
type: 'POST',
data: { optionvalue: $("#fnivel").val() },
dataType: 'json',
success: success
});
}
In controller
[HttpPost]
public ActionResult Detail(string optionvalue)
{
ViewBag.Optionvalue=optionvalue
return View();
}

AngularJS form is not binding to $http request

<form novalidate class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="text-capitalize">
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputUsluga3" class="col-sm-2 control-label">Usluga</label>
<div class="col-sm-6">
<select id="inputUsluga3" class="form-control">
<option>Kombi</option>
<option>Hotel</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputOdDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Od datuma</label>
<div class="col-sm-6">
<input id="inputOdDatum3" type="text" class="form-control" ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="Početak perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputDoDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Do datuma</label>
<div class="col-sm-6">
<input id="inputDoDatum3" type="text" class="form-control" ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Kraj perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputStanica" class="col-sm-2 control-label">Stanica</label>
<div class="col-sm-6">
<select id="inputStanica" ng-model="airport" class="form-control">
<option>PUY</option>
<option>ZAG</option>
<option>SPL</option>
<option>DUB</option>
</select>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" ng-click="getData()">Dohvati podatke</button>
</div>
</div>
</div>
</form>
MY Http request looks like this
$scope.getData = function() {
$http.get("/Services/JoppdService.svc/getKombiImport/" + $scope.fromDate + "/" + $scope.untilDate + "/" + $scope.airport)
.success(function (response) {
$scope.education = response;
});
}
After submiting i have request in console that looks like this
http://localhost:8080/Services/JoppdService.svc/getKombiImport/undefined/undefined/undefined
dateFrom, dateUntil and airport is not binded. Where is problem ?

Use ng-submit, bind the required parameters into an object obj, like obj.fromDate, obj.untilDate, and obj.airport in the form. Use button type as submit
Your html would transform into,
<form novalidate class="form-horizontal" ng-submit="getData(obj)">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="text-capitalize">
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputUsluga3" class="col-sm-2 control-label">Usluga</label>
<div class="col-sm-6">
<select id="inputUsluga3" class="form-control">
<option>Kombi</option>
<option>Hotel</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputOdDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Od datuma</label>
<div class="col-sm-6">
<input id="inputOdDatum3" type="text" class="form-control" ng-model="obj.fromDate" data-max-date="{{obj.formDate}}" placeholder="Početak perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputDoDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Do datuma</label>
<div class="col-sm-6">
<input id="inputDoDatum3" type="text" class="form-control" ng-model="obj.untilDate" data-min-date="{{obj.untilDate}}" placeholder="Kraj perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputStanica" class="col-sm-2 control-label">Stanica</label>
<div class="col-sm-6">
<select id="inputStanica" ng-model="obj.airport" class="form-control">
<option>PUY</option>
<option>ZAG</option>
<option>SPL</option>
<option>DUB</option>
</select>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Dohvati podatke</button>
</div>
</div>
</div>
</form>
Pass obj in ng-submit method getData() which now looks like, getData(obj)
You got to convert the fromDate and untilDate into String. Have a look at this. Replace convertToString() below with the solution mentioned in that link.
Then in your controller getData() would look like,
$scope.getData = function(obj) {
var fromDate = convertToString(obj.fromDate);
var untilDate = convertToString(obj.untilDate);
var airport = obj.airport;
$http.get("/Services/JoppdService.svc/getKombiImport/"+fromDate+"/"+untilDate+"/"+.airport)
.success(function (response) {
$scope.education = response;
});
}
Also, do not have empty spaces (" ") while forming URLs.
If you want to initialize anything, use ng-init like this

You would need to wrap your content inside if you have not already
Also you should use for date inputs

You must use ng-init to initialize these values like ng-init="fromDate = 0".
You could also just declare these variables at the begining of your controller such as $scope.fromDate = 0;