Develop Reference

Data on Bootstrap Modal not show up because of a space in data for a textarea using onClick

I am using laravel and I have an update bootstrap modal. When I clicked the update button, update modal showed up but all the fields are empty like in this picture below
It happened because there is an Enter space in address data from the database. This below is the code of the update button which I copied from inspect element.
<a type="button" class="btn btn-warning btn-circle" data-toggle="modal" data-target="#delivery_update_modal" onclick="delivery_update_modal(
'A9C55478-0BDE-428D-96CA-784A2349F0C7'
, 'packlaring'
, 'pe-ps-18-017'
, 'Document'
, 'Kota Balikpapan'
, 'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'
, '2019-05-31 15:00:00.000'
)"><i class="fa fa-edit"></i>
</a>
If I remove the space into one line, it working well.
I tried to remove the space when the user input the data, but it become one row, make the address is difficult to read.
Do you know how to resolve this?

okay. the problem is on this data
'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'.
if this is an address. what you need to do is output it using {!! $record->address !!}

you can try this piece of code: apply it to your case and it will work.
//modal form to show all the required inputs and make one field hidden
<div id="updateFormID" class="modal fade" >
<div class="modal-dialog box box-default" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Bank</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" action="{{ url('/update') }}" method="post" role="form">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group" style="margin: 0 10px;">
<input type="hidden" class="form-control" id="recordid" name="recordid" value="">
<label> Name </label><input type="text" class="form-control" id="name" name="fname" value="">
<label>UserName: </label><select required class="form-control" id="username" name="userName">
<label>Email: </label><select required class="form-control" id="email" name="email">
<label>Address: </label><input type="text" class="form-control" id="address" name="address" value="">
<label>Phone: </label><input type="text" class="form-control" id="phone" name="phone" value="">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-xs">Update</button>
<button type="button" class="btn btn-secondary btn-xs" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
//link on your view to trigger popup the modal. this link displays record fetch from db. the $record is a array of variable from your controller assign to your view(blade)
<a onclick="updateForm('{{$record->userid}}','{{$record->name}}','{{$record->username}}','{{$record->email}}','{{$record->address}}','{{$record->phone}}')" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
//javascript function to load modal and assign the record to inputes
function updateForm(r,x,y,z,w,s)
{
document.getElementById('recordid').value = r;
document.getElementById('name').value = x;
document.getElementById('username').value = y;
document.getElementById('email').value = z;
document.getElementById('address').value = w;
document.getElementById('phone').value = s;
$("#updateFormID").modal('show')
}

Might be my opinion but i really do not like your code. It's messy.
But, you can pass your data as json and laravel will escape it.
<a onclick="updateForm(#json($record))" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
In your javascript
updateForm(object){
//you can use it as object.name or object.whatever
}
Take a look at the laarvel docs on how to pass json data and display it.
https://laravel.com/docs/5.8/blade#displaying-data
You can even use prerry print :-)
-----UPDATE------
If you use jquery, please use jquery!
function updateForm(record)
{
$('#recordid').val(record.userid);
$('#name').val(record.name);
$('#username').val(record.username);
//and so on.
$("#updateFormID").modal('show')
}

Trying to use cascading dropdown lists, and want to display a different modal form for each unique value in dropdown list

I'm trying to make a webpage form where you see a select drop-down list, and if you select one of the values from the drop-down list, a modal form that is unique to the value you selected will open up and you can fill it out. From my understanding, this is considered Cascading Dropdown lists.
The problem I'm facing is trying to find a way to create different modal forms for each unique value from the drop-down list. Let's say if my select list is a bunch of fruits, I want a modal form for "apples" to open if I select "apples" from the drop-down list, as well as a modal form for "oranges" to open if I select "oranges" from the drop-down list.
The function I'm using to get the modal to appear after there is an onChange()
Here's my head element:
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Here is my body element with the select drop-down, and two modal forms for "Apples" and "Oranges":
<div>
<select id="fruitlist">
<option value="main">Select Fruit:</option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pineapples">Pineapples</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="modal fade" id="appleModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-apple"></span> Fruit - Apples</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="appleName"><span class="glyphicon glyphicon-user"></span> Name</label>
<input type="text" class="form-control" id="appleName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="appleAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
<input type="text" class="form-control" id="appleAddress" placeholder="Enter your address">
</div>
<div class="form-group">
<label for="appleTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
<input type="text" class="form-control" id="appleTelephone" placeholder="Enter your telephone number">
</div>
<div class="form-group">
<label for="appleAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
<input type="text" class="form-control" id="appleAmount" placeholder="Enter the amount of fruits you wish to purchase">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="orangeModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-apple"></span> Fruit - Oranges</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="orangeName"><span class="glyphicon glyphicon-user"></span> Name</label>
<input type="text" class="form-control" id="orangeName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="orangeAddress"><span class="glyphicon glyphicon-home"></span> Address</label>
<input type="text" class="form-control" id="orangeAddress" placeholder="Enter your address">
</div>
<div class="form-group">
<label for="orangeTelephone"><span class="glyphicon glyphicon-earphone"></span> Telephone Number</label>
<input type="text" class="form-control" id="orangeTelephone" placeholder="Enter your telephone number">
</div>
<div class="form-group">
<label for="orangeAmount"><span class="glyphicon glyphicon-tasks"></span> How many?</label>
<input type="text" class="form-control" id="orangeAmount" placeholder="Enter the amount of fruits you wish to purchase">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
Here's the script I'm using to execute the function after there is an onChange() on the select dropdown list:
<script>
$(document).ready(function(){
$("#fruitlist").change(function(){
$("#appleModal").modal();
});
});
</script>
As you can see, if you plug in the code and run it, no matter what selection you make on the dropdown, it'll only execute the "Apples" modal. For clarity, I want to display an "Apples" modal for an "Apples" select value, an "Orange" modal for an "Orange" select value, a "Pineapples" modal for a "Pineapples" select value and so on. I was trying to think of different ways to tackle this problem, such as an if-statement where if the apples select value was selected, display the apples modal form, or some sort of loop where for every int value assigned to each select value, display the corresponding modal form. I tried to do this, but was unsuccessful. I may be approaching this the wrong way.
I spent about 15 minutes trying to find suggested threads to make sure I wasn't asking a duplicate question before submitting this, I was unable to come across one that could help me specifically enough for my issue. I'm new to using cascading dropdown lists and could really use some assistance. Thank you very much!

I would recommend changes the value of options in select to singular and use it to append to find the corresponding modal.
$("#fruitlist").change(function(){
var value = $(this).val();
$('#' + value + "Modal").modal({show: 'true'});
});
Example : http://jsfiddle.net/9nmc6zjc/4/

For starters, you need the value of the selected option, which you can get with $(this).val() within the change closure.
Then one way to go about it is to give your modals data attributes that correspond with these values. For example, your apples modal would get a data attribute like.
<div class="modal fade" data-select="apples" id="appleModal" role="dialog">
//
</div>
Then you can open the correct modal with
$(document).ready(function(){
$("#fruitlist").change(function(){
$('.modal[data-select="' + $(this).val() + '"]').modal());
});
});

Pop-Up form not appearing in bootstrap website

I wrote a code for pop up form for submitting data when clicked on Edit link in a bootstrap website:
Code is:
<script type="text/javascript">
$(document).ready(function(){
$("#modal-body").modal('show');
});
</script>
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<label class="label" for="name">Your Name</label><br>
<input type="text" name="name" class="input-xlarge"><br>
<label class="label" for="email">Your E-mail</label><br>
<input type="email" name="email" class="input-xlarge"><br>
<label class="label" for="message">Enter a Message</label><br>
<textarea name="message" class="input-xlarge"></textarea>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
Nah.
</div>
</div>
<div id="thanks"><p><a data-toggle="modal" href="#form-content">Edit!</a></p></div>
But pop up form isn't appearing. Where is the mistake?

Two things:
1) Remove the "hide" class from your modal html:
<div id="form-content" class="modal fade in" style="display: none;">
2) Target the actual modal with your jQuery instead of the modal-body:
$(document).ready(function () {
$("#form-content").modal('show');
});
This seems to work for me, as shown here. Let me know if this is not the effect you are looking for. Good luck!

modal-body is a class, but you're treating it like an id in the script.
You should change the class to an id, or amend the script.

Change this $("#modal-body").modal('show'); to $(".modal-body").modal('show');

sending variable value to Bootstrap modal

I'm just learning about bootstrap..I need help from anyone who know how to send variable value to a modal..
to make it even clearer, I have a table with action column. the action column consist of edit and delete button. if the edit button clicked, then a modal with edit form appear ( I put the modal in the same file with the modal trigger button). my question is, how do I send the ID of the following data to the edit form in the modal???
here is the code of edit(update) data:
<a data-target="#modal-edit-user" data-toggle="modal"> <i class=" glyphicon glyphicon-edit">
and here is the modal code:
<div id="modal-edit-user" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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"><b>Form Edit Data User</b></h4>
</div>
<div class="modal-body">
<form name="tambah_user" method="POST" action="../controller/edit_user.php">
<?php echo $id_user;?>
<div class="controls control-group">
<input class="form-control" type="text" name="nama_user" placeholder=" nama user">
<br><input class="form-control" type="text" name="alamat" placeholder=" alamat user">
<br><input class="form-control" type="text" name="kota" placeholder=" kota">
<br><input class="form-control" type="text" name="no_telp" placeholder=" nomor telepon user">
<br><input class="form-control" type="text" name="username" placeholder=" username login user">
<br><input class="form-control" type="text" name="password" placeholder="password login user">
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Batal</a>
<input type="submit" name="sumbit" value="Simpan" class="btn btn-primary">
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I hope there is someone who can explain me the answer.. thanks a lot :-)

You can do that with Javascript. Just add a click event listener and update the form, when edit button is clicked. Something like this:
$(document).ready(function () {
$('.user-edit').click(function () {
$('span.user-id').text($(this).data('id'));
});
});
Here is a quick fiddle of how you could go about it.

scope function inside controller not updating the values according to ng-models in the view

Hi i got this function in the controller that is called from the ng-view:
productApp.controller('ModalInstanceCtrl', function ($scope, $modalInstance, productFactory, prodId) {
$scope.ok = function () {
console.log($scope.model_productDescription);
$scope.$watch(['model_productBrand,model_productName,model_productDescription,model_productPrice, model_productStock'], function() {
var stock = '';
if($scope.model_productStock) {
stock = 'AVAILABLE';
}else{
stock = 'NO STOCK';
}
var productObject = {
id : prodId,
prodBrand : $scope.model_productBrand,
prodName : $scope.model_productName,
description : $scope.model_productDescription,
price : $scope.model_productPrice,
prodStock : stock
}
productFactory.updateProductById(productObject, function successCallback(data) {
// do something here in data
}, function errorCallback(data, status) {
alert(data + ' Failed with error ' + status);
});
})
};
});
This is the modal.htm body:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">Modify a Product</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<!-- Row 1 -->
<div class="col-md-12 col-centered">
<div class="control-group">
<label class="control-label" for="prod_brand">Product Brand</label>
<input type="text" id="prod_brand" class="form-control"
ng-model="model_productBrand" required="required" value="prod.prodBrand">
</div>
<div class="control-group">
<label class="control-label" for="prod_name">Product Type</label> <input
type="text" id="prod_name" class="form-control"
ng-model="model_productName" required="required" value="prod.prodName">
</div>
<div class="control-group">
<label class="control-label" for="prod_price">Price</label>
<div class="input-group">
<span class="input-group-addon">$</span> <input type="text"
class="form-control" ng-model="model_productPrice" value="prod.price"> <span
class="input-group-addon">.00</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prod_description">Description</label>
<textarea id="prod_description" class="form-control" ng-model="model_productDescription" cols="70" rows="3">{{prod.description}}</textarea>
</div>
<div class="control-group" style="margin-top: 10px">
<div class="input-group">
<span class="input-group-addon"> <input type="checkbox" ng-model="model_productStock">
</span>
<span class="form-control no-cursor">Stock</span>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Edit product</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Now, if i type in the textarea (for example), and press the ok button, it will get into this function. Now, since the textarea value has changed, shouldn't be reflected in the $scope.productDescription value? looks like it's not. I thought that whenever you make a change in the model, it would override the $scope.model_name value, should i use ng-change or any other directive for this?
Tried adding a $watch but it's not working either, any suggestion?
P.S: console.log($scope.model_productDescription); // shows the old description despite the fact i change it
Thanks.

The most probable cause of this is that your model.html is creating child scope. The changes that you do to the model property are local to child and cannot be seen in the parent due to prototypal inheritance.
What you can try is to create an object on the controller and do binding on object property.
$scope.productObject={};
Do the textarea binding to
<textarea id="prod_description" class="form-control" ng-model="productObject.productDescription" cols="70" rows="3">{{prod.description}}</textarea>
Now the changes would be reflected in productObject.productDescription property.
Also go through this wiki to understand how does scope inheritance works https://github.com/angular/angular.js/wiki/Understanding-Scopes

God... i'm going to fix it as of now by doing this:
From the view:
<button type="button" class="btn btn-primary" ng-click="ok(model_productBrand, model_productName, model_productPrice, model_productDescription, model_productStock)">Edit product</button>
From the controller passing the vars to the ok() function:
$scope.ok = function (model_productBrand, model_productName, model_productDescription, model_productPrice, model_productStock) {
Yeah... i know it looks UGLY as hell, but bleh...
Thank you, anyway i'm going to tick your answer as correct since the solution you gave me is really convenient, the only problem was that my project was kinda bad design for the solution you provided :P but is good!