Develop Reference

Jquery load whole page instead of only modal

I'm trying to make a "Create project" modal. At first i created it inside a partial view but i found it difficult to populate it with data from other models, so instead i decided to move the partial view content inside my actual razor page.
All works as it should but when I press the button to launch the modal, the current page is loaded in the background as well.
Here is the html for the modal code:
<div class="modal fade" id="add-project" tabindex="-1" role="dialog" aria-labelledby="addProjectLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addContactLabel">Create Project</h5>
</div>
<div class="modal-body">
<form asp-page-handler="ProjectModalPartial">
#*numele metodei*#
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()" />
<div class="form-group">
<label asp-for="ProjectsModel.ProjectName">Title</label>
<input asp-for="ProjectsModel.ProjectName" class="form-control" placeholder="MyProject1" />
<span asp-validation-for="ProjectsModel.ProjectName" class="text-danger"></span>
</div>
<br />
<div class="form-group">
<label asp-for="ProjectsModel.ProjectDescription">Description</label>
<textarea asp-for="ProjectsModel.ProjectDescription" class="form-control" rows="3" placeholder="This is my first project"></textarea>
<span asp-validation-for="ProjectsModel.ProjectDescription" class="text-danger"></span>
</div>
<br />
<div class="center" style="padding-bottom:0px;">
<p style=" margin: 2px">Project Participants</p>
<select multiple id="TicketType" class="form-control dropdown-toggle" asp-for="ProjectsModel.ProjectParticipants" asp-items="new SelectList(Model.UserList)" style="width: 470px;"></select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save</button>
</div>
</div>
</div>
And here is the jquery code,without the logic for saving:
$(function () {
var placeholderElement = $('#modal-placeholder');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
//$(document.body).html(data).find('.modal').modal('show');
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});});
Is there another way of loading the modal, without the additional content?
Here is a photo so you better see what's happening

I managed to solve the problem.
Since I no longer have a partial view I don't need the placeholderElement anymore, so I can get rid of .find(modal) all together.
The code now looks like this:
$(function() {
var placeholderElement = $('#modal-placeholder');
$('button[data-toggle="ajax-modal"]').click(function(event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
$('#add-project').modal('show');
});
});
});

input hidden value doesn't send to controller

I'm trying post to my database,everything what i want i can get from my formcollection and my table but input hidden value.My main view is using #model List
Here is my code this my modal popup
#using (Html.BeginForm("update3", "UpdateInfo", FormMethod.Post))
{
<div class="modal fade" role="dialog" id="mymodal">
<form id="stok_formu">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modal2">
<div class="row">
<label for="names" id="name" name="name"></label>
<input type="hidden" id="names" name="names" />
</div><br />
<div class="row">
<div class="col-md-3">
#Html.Label(" Clothes codes: ")
</div>
<div class="col-md-3">
<input type="number" class="input-sm" id="codes" name="codes" />
</div>
</div><br />
<div class="row">
<div class="col-md-3">
#Html.Label("New Price : ")
</div>
<div class="col-md-3">
<input type="number" class="input-sm" id="newprice" name="newprice" />
</div>
</div>
<input class="btn btn-success" id="change" type = "submit" name="change"/>
</div>
</div>
</div>
</form>
</div>
}
With this javascript code ,i can get my "name" from my table and put on my modal and my problem is begin is here,when i click button submit modal popup doesn't send hidden value to controller but ican get my value of "newprice"
function metot(x) {
namee = document.getElementById("tablo2").rows[0].cells.item(0).innerHTML;
document.getElementById("name").innerHTML = namee;
}
and table from my main view
<tbody id="tablo2">
#foreach(var oge in Model)
{
<tr onclick="metot(this)">
<td>#Html.Encode(oge.name)</td>
<td id="codes">#Html.Encode(oge.codes)</td>
<td id="price">#Html.Encode(oge.price)</td>
<td>
<button id="change" onclick="metot(this)" type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-warning tab-content"><span>Change</span></button>
</td>
</tr>
}
</tbody>

You are setting the text of the label with id name, but you aren't setting the value of the hidden field with id names, hence it is not sent when you submit the form. <label> elements do not send data back to the server.
This should work (I assume the variable namee should actually be called urun_adi):
function metot(x) {
urun_adi = document.getElementById("tablo2").rows[0].cells.item(0).innerHTML;
document.getElementById("name").innerHTML = urun_adi;
document.getElementById("names").value = urun_adi;
}

how to save value dynamically receiving from html form and send to server

I'm trying to create form that send data to servlet.
Here im adding some input box dynamically on Click of button. But whenever i enter data and click new "add data" , previous data get lost and it does not appear in input box.
Screen shot of form after clicking Add Data
I'll have to create it dynamically.
But when I click on add data of add content the data fields values the i have already filled diappears as shown in the screenshot. How to save the data there?
And then how to send the whole form data to the servlet on click of submit button?
code of html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function add_fields() {
console.log(document.getElementById('wrapper').innerHTML);
document.getElementById('wrapper').innerHTML += "<br /><span>Step Number: <input name='step' type='number'style='width:75px;'value='' /></span> <span> Add Content: <input type='button' onClick='addContent()' value='Add Content' /></span>";
console.log(document.getElementById('wrapper').innerHTML);
}
function addContent(){
console.log(document.getElementById('wrapper').innerHTML);
document.getElementById('wrapper').innerHTML +="<br /><span><input name='contentimage' type='text' placeholder='enter image url' /></span><span><input name='contentmessage' type='text' placeholder='enter message' /></span><span><input name='alert' type='text' placeholder='enter alert' /></span>";
console.log(document.getElementById('wrapper').innerHTML);
}
</script>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Share Solutions</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Add Solutions</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="cost">Cost</label>
<input type="text" class="form-control" name="cost" id="cost" placeholder="Enter cost">
</div>
<div class="form-group">
<label for="difficulty">Difficulty</label>
<input type="text" class="form-control" name="difficulty" id="difficulty" placeholder="Enter Difficulty">
</div>
<div class="form-group">
<label for="image">Image</label>
<input type="text" class="form-control" name="image" id="image" placeholder="Enter Image Url">
</div>
<div class="form-group">
<label for="message">Message</label>
<input type="text" class="form-control" name="message" id="message" placeholder="Enter Message">
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" id="title" placeholder="Enter Title">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" name="description" id="description" placeholder="Enter Description">
</div>
<div class="form-group" id="wrapper">
<label for="description">Data</label> <button class="btn btn-success btn-block" type="submit" onClick="add_fields()"> Add Data</button>
</div>
<div>
</div>
<button type="submit" class="btn btn-success btn-block">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal" onClick="window.location.reload()"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>

Because you're creating elements dynamically, you'll have to use "delegation" to access those elements. Here is a fiddle I created awhile back that demonstrates delegation. If you can't solve your problem from there, leave a comment and I'll help you through it.
<p>This is to demonstrate how to use delegation to make dynamically created buttons (or any dynamically created element) respond to an event handler.</p>
<p>Note that in order to do this, there must be some element that loads with the DOM so that the listener can find the child element inside of it.</p>
<p>In this case, we're using the div with the id of "inside_div" as our pre-loaded element and then adding the button dynamically to that div when button 1 is clicked.</p>
<div id='test_div'>
<button id='button1' value='button1'>Button 1</button>
<div id='inside_div'></div>
</div>
$('#button1').click(function () {
var btn_txt = "<br><button id='button2'>Button 2</button>";
$('#inside_div').append(btn_txt);
});
//Note that a standard event listener will not work on Button 2 because
//it was created dynamically and so the event listener cannot find it.
//$('#button2').click(function(){
// alert('button2 event');
//});
//Delegated event listener
//Note that we're referencing the element that loaded with the DOM ('#inside_div')
//Also note that insted of using a click event, we use .on() and then specificy 'click' inside of it.
//Because #inside_div already exists, we can then locate the
//dynamically created child element inside of it.
$('#inside_div').on('click', '#button2', function () {
var i = 3;
while (i <= 5) {
var btn_txt = "<br><br><button class='test_class' id='button" + i + "' >Button " + i + "</button>";
$('#inside_div').append(btn_txt);
i++;
}
});
//This is to demonstrate a listener that works on multiple elements with the same class.
$('#inside_div').on('click', '.test_class', function () {
alert('Class Alert');
});

See here: assignment to innerHTML causes the destruction of all child elements.
You should use appendChild instead innerHTML:
function add_fields() {
var newElement = document.createElement('span'),
newBr = document.createElement('br');
newElement.innerHTML = "Step Number: <input name='step' type='number'style='width:75px;'value='' /></span> <span> Add Content: <input type='button' onClick='addContent()' value='Add Content' />";
document.getElementById("wrapper").appendChild(newBr);
document.getElementById("wrapper").appendChild(newElement);
}
And don't forget change the Add Data button's type to: type='buttom'.

Get values from bootstrap modal, process then insert value to database

I am using table where values are printed from database. Then I make selections. After that I want to process those values together with values from bootstrap modal which are required to fill. Once I get all values, I need to store them into database.
Table store values from database:
<table id="table" class="table table-bordered table-striped">
<thead>
<tr class="bg-red">
<th>Id</th>
<th>Material</th>
<th>Quality</th>
<th>Dimensions</th>
<th>Colors</th>
<th>Weight</th>
<th><center><i class="fa fa-shopping-cart"><center></th>
</tr>
</thead>
<tbody>
<?php while($r=$q->fetch()){ ?>
<tr>
<td class='data-id'><?='B-'. $r['Id']?> </td>
<td> <?=$r['Material']?> </td>
<td><?=$r['Quality']?></td>
<td><?=$r['Dimensions']?></td>
<td><?=$r['Colors']?></td>
<td><?=$r['Weight']?></td>
<td> <button class="addValues" name="code[]" value="<?='B-'. $r['Id']?>"><i class="fa fa-shopping-cart"></button></td>
</tr>
<?php } ?>
</tbody>
</table>
Then I am using script make row selection and print values to another div (This section works)
<script>
$(".addValues").click(function () {
$('#selection').show();
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
var qte_input = (' <input type="text" name="quantity[]" placeholder="kg / m" size="10"/>');
targetArea.prepend($("td.data-id", myRow).text() + qte_input +"<hr />");
});
</script>
Output in div after row is selected (Multiple selections could be chosen)
B-15897 3000kg // B-15897 presents code 3000kg presents quantity.
B-4589 500m
Below those values I have submit button, which opens bootstrap modal.
<div class="col-xs-2">
<div class="box box-danger">
<h4>Selected: </h4><br/>
<div id="selection">
<!-- SELECTED VALUES -->
B-15897 3000kg
B-4589 500m
</div>
<button class="btn btn-block bg-red btn-sm" data-toggle="modal" data-target="#myModal">Send request</button>
</div>
</div>
Once I hit Send request it opens bootstrap modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" href="repromaterijali-script.php">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Offer request</h4>
</div>
<div class="modal-body">
* Company name
<input type"text" class="form-control" name="company" required><br/>
* Contact info
<input type"text" class="form-control" name="contact" required><br/>
* Adress
<input type"text" class="form-control" name="address" required><br/>
* Phone
<input type"text" class="form-control" name="tel"required><br/>
E-mail
<input type"text" class="form-control" name="email" ><br/>
Other
<textarea type"text" class="form-control" name="other" ></textarea><br/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" name="submit">Send</button>
</div>
</div>
</div>
</div>
I want to pick all values from bootstrap modal and from div where selected values are, process them and insert in database via php. code and quantity will be an array because multiple values could be selected.
Bootstrap modal and div where selected values are inside <form>. I am trying to get values by using script bellow but nothing happens:
<script type="text/javascript">
function get_values() {
var x = document.getElementById("quantity").value;
var y = document.getElementById("code").value;
var arr = {barcode:x};
$.ajax({ url: 'insert.php',
data: arr,
type: 'post',
success: function(output) {
document.getElementById("code").value = output;
}
});
}
</script>
I am looking for advice? Any kind of help is very appreciated.

Your modal isn't coded correctly on a couple of levels.
First, the input elements do not have an id assigned. Normally one would get the value via the id. In a similar way you did here:
var x = document.getElementById("quantity").value;
Also, while it has nothing to do with reading the values from the modal, from a Bootstrap perspective, your input form is not coded the way the Bootstrap CSS expects it to be coded.
Here an example from the Bootstrap site:
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
Notice each input is wrapped in a form-group. If you use this layout, you'll not need to use the <br> tag.

Displaying a slick grid row editor in bootstrap popover

I have an an edit and a delete link in a column in the slick grid. When i click on the edit button i want to a bootstrap popover with the row details in it.
I was successful to the extent that i am able to render the popover but looks like it hides behind the table. I tried setting the z-index but to no avail. Code below:
var popoverReference = $(".growthGridActions_edit").popover({
'title': 'Edit Record',
'html' : true,
'placement' : 'left',
'template': popOverTemplate
});
popoverReference.click(function(e) {
var me = $(this), rowid = me.attr('rowId');
var editGrowthRecordView = new WTG.view.GrowthEditView({
template:$("#GROWTH-RECORD-EDIT").html(),
model: new WTG.Model(growthGridRef.getDataItem(rowid))
});
editGrowthRecordView.render();
$("#"+me.attr('id')).attr('data-content', editGrowthRecordView.$el.html());
var popover = $("#"+me.attr('id')).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
})
Please help

I am doing something similar. I have a bootstrap modal appearing when I double-click a row in my slick grid. The modal displays the details of the row (plus some more info) which I fetch using AJAX. This works just fine, no problems with z-index.
Maybe our approaches are a bit too different but I hope the code below helps.
The Bootstrap Modal
<div id="user-details-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 650px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">User View</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/user/update" method="POST">
<input type="hidden" id="userId" name="userId"/>
<div class="control-group">
<label class="control-label" for="firstName">First Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input class="input-xlarge" type="text" required id="firstName" name="firstName" placeholder="First Name">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastName">Last Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input class="input-xlarge" type="text" required id="lastName" name="lastName" placeholder="Last Name">
</div>
</div>
</div>
... more fields
<div class="modal-footer">
<button type="submit" class="btn btn-info">Save Changes</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Slick Grid Setup
setupGrid:(onDblClick)->
grid = new Slick.Grid(#gridId, dataView, #columns, options)
grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }))
grid.onDblClick.subscribe((e, args)->
onDblClick(dataView.getItem(args.row).id);
)
$(window).resize(->
grid.resizeCanvas()
)
Displaying the Modal
onDblClick = (id) =>
$userDetails = $('#user-details-modal')
$.get('/user/' + id + '/details')
.success((results)->
$userDetails.find('#userId').val(results.id)
$userDetails.find('#firstName').val(results.FirstName)
$userDetails.find('#lastName').val(results.LastName)
$userDetails.find('#userName').val(results.UserName)
$userDetails.find('#email').val(results.Email)
$userDetails.find('#password').val(results.Password)
$userDetails.modal()
)

I had the same problem as the op. Not sure why this was marked the answer since the original question was about bootstrap pop over and the answer is about a modal. I am guessing the op changed to a modal.
Anyways just posting this if anyone else has the same issue when trying to use bootstrap popover in slickgrid To resolve that just set the container to body... data-container='body'