We Keep Coding

pass javascript variable to modal popup form

On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.
$(document).on("click",".Change_Nodes",function(){
cmd_name = $(this).attr("id");
if(confirm("Sure to Update \""+cmd_name+"\" Command Executable Nodes?"))
{
$('#custom_script_modal').modal('show');
}
else
{ return false; }
}
); //update: removed extra curly brace
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>
</div>
<div class="modal-body">
<form method="POST" id="custom_script_modal">
<label class="control-label col-sm-4" for="cmd">List of Nodes</label>
<div class="col-sm-8 tab-pan fade in active">
<select size="3" name="popup_hostlist[]" id="popup_hostlist" class="dis_tab" multiple>
<?php
//-----------Database echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";
?>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info form-control">Update</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.
Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.
Check out the following JSFiddle and let me know if helps with your case:
(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

How to ask for user input and return results in the same pop up box?

Flow is as below:
1. User clicks on a button and a pop up box will be displayed
2. User will be required to enter a pincode in the pop up box
3. Server will search the database and return the results
4. Display the results in the same pop up box as step 1.
I am currently facing difficulty in step 4 which is displaying the results in the same pop up box.
html code for pop up box:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter Pincode</h4>
</div>
<div class="modal-body">
<p>Please request for the pincode from the customer.</p>
<form class="form-horizontal" method="POST" action="/users/home/dashboard" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Pincode:</label>
<div class="col-sm-10">
<input type="number" class="form-control"
name="pinCode" placeholder="Pincode from customer"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Confirm</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When user clicks on submit, I will run the node.js code below:
var sql = "SELECT * FROM customers WHERE pincode = ?";
db(function(err,conn){
conn.query(sql,[pinCode],function(err,results){
if(err){
console.log("Error at dashboard:" + err);
//res.render('dashboard',{data:results});
}else{
console.log(results);
}
});
});
The question is how can I return the results from server which contains customer details in the same pop up box ?

Instead POSTing using form do it using AJAX. On .success get PIN and change modal text using data returned.
Example (add some ID to your form, for example "form-horizontal1", and call POST on button click:
$.post( "/users/home/dashboard", $("#form-horizontal1").serialize(), function( data))
.done(function(data) {
$(".modal-body").html(data);
});

I am trying to make seperate edit and delete on my CRM model but could not figure out how to bind those buttons with my field

I am trying to make separate edit and delete on my CRM model but could not figure out how to bind those buttons with my field although I have created the API for this in angular I need a bit help.
Thanks in advance
below is a bootstrap code of the edit and delete buttons
<div id="delete_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Delete Department</h4>
</div>
<div class="modal-body card-box">
<p>Are you sure want to delete this?</p>
<div class="m-t-20 text-left">
Close
<button type="submit" class="btn btn-danger" >Delete</button>
</div>
</div>
</div>
</div>
</div>
<div id="edit_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" (click)="edit(list)">×</button>
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Edit Department</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Department Name <span class="text-danger">*</span></label>
<input class="form-control" value="IT Management" type="text">
</div>
<div class="m-t-20 text-center">
<button class="btn btn-primary btn-lg" (click)="edit(list)">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>

1: declare a property in your component eg: department,which store the current operate department object on edit button clicked
2: bind the property of department to edit dialog template
3: remove role="dialog" from your dialog template(beacuse you need to do something before dialog open,you must open dialog by yourself)
4: in your edit dialog button click function, you set property 'department' value to store current operate department,and append this code $('#edit_department').modal('show')

How to restore data on edit form implemented by Bootstrap3 modal [duplicate]

This question already has answers here:
How to reset form body in bootstrap modal box?
(9 answers)
Closed 7 years ago.
I am working on a project which uses bootstrap3 to implement a modal containing edit form. I can display the modal and load original data into each input field by setting the value attribute. The problem is when I make some change and click Close button to cancel it. Then load this edit form again and see the content is what edited last time not the original one. I do not know how to restore it on clicking the Close button. Besides, where is the user input stored in modal?
Below is my code
<div class="span4">
<div class="panel panel-primary">
<div class="panel-heading">qawsedrftgDI</div>
<div class="panel-body">jhyuh</div>
</div>
<p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editItem2">Edit</button>
<input type="button" class="btn btn-default" value="Delete" onclick="javascript:deleteCategoryNoneItem(2);" />
</p>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="editItem2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Make Your Change</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="existingItem2">
<div class="form-group">
<label class="control-label col-md-2">Title</label>
<div class="col-md-8">
<input type="text" class="form-control" value="qawsedrftgDI" id="title2" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Content</label>
<div class="col-md-8">
<textarea rows="10" class="form-control" id="content2">jhyuh</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="changeExistingItem" onclick="javascript:modifyCategoryNoneItem(2);">Save changes</button>
</div>
</div>
</div>
</div>
</div>

See the documentation for Bootstrap modals. In the event section you can use "hidden.bs.modal" event to do some stuff after the modal is closed. So it can look like:
$('#myModal').on('hidden.bs.modal', function (e) {
$(this).find('input').val('');
});
From here you can specify "placeholder" attributes on input fields, or do some javascript in the event handler.

bootstrap modal crashing when setting value

In my website I'm trying to use bootstrap modal to ask for two values and get the middle of it. I have a button that when clicked, calculates the middle of the two values and sets a value I have declared in the modal-body code. It sets the value and then the modal disappears and the webpage reloads. Can you tell me what I'm doing wrong?
In the HTML, modal-body:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Get Middle.</h3>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="input-prepend">
<span class="add-on">$</span>
<input class="span2" id="lowSide" type="text">
</div>
to
<div class="input-prepend">
<span class="add-on">$</span>
<input class="span2" id="highSide" type="text">
</div>
<button type="submit" class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
</form>
<form class="form-inline"> <label>middle:</label> <input id="middle" type="text" /> </form>
</div>
</div>
The javascript function to set it:
function enteredRange(x,y)
{
var low=parseFloat(x);
var high=parseFloat(y);
var middle1=parseInt((low+high)/2);
middle.value=middle1;
}
I've also done
document.getElementById('middle').value=middle1;
in place of the middle.value=middle1 and gotten the same result.
Any idea on how I could set this up correctly?

You should get rid of the <form></form> elements, since you don't need them and they cause the page to redirect via form-post. I also removed some unnecessary closing divs. I don't know if rest of your code requires them. And finally cleaned your markup a bit.
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Get Middle.</h3>
</div>
<div class="modal-body">
<div class="form-inline">
<div class="input-prepend"> <span class="add-on">$</span>
<input class="span2" id="lowSide" type="text" />
</div>
to
<div class="input-prepend"> <span class="add-on">$</span>
<input class="span2" id="highSide" type="text" />
</div>
<button class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
</div>
<br />
<div class="form-inline">
<label>middle:</label>
<input id="middle" type="text" />
</div>
</div>
</div>
<br />
<button id="btn">OPEN MODAL</button>
Here is the working code on jsFiddle.

Two things are happening here.
When clicking the submit button, the form is actually being submitted.
If no method is specified for a form it defaults to GET.
That's why you see the error.
You need to prevent the form submit. You could simply use onsubmit to do this:
<form class="form-inline" onsubmit="return false;">
I'm not advocating in-line JavaScript so here's a slighter nicer way; add an ID to the form and attach a click handler which prevents submit:
HTML:
<form class="form-inline" id="middle-calculator">
JS:
document.getElementById('middle-calculator').addEventListener('submit',function (e) {
e.preventDefault();
},false);
e here is for "event".
The working example (JSFiddle)
One other small thing... be careful when copying from the Bootstrap documentation. Always use HTML entities for special characters; the close modal icon should be × (or ×).