We Keep Coding

Error sending written text to Wysiwyg by email

Basically, I write a text and send everything correctly. The problem is when I get this email sent, it comes typed type in HTML. For example ... if I write Thanks! ... and send the email ... while reading the email I sent ... it will be tagged ... I always get something like this: <p> Thanks! b> Thanks! </ b>. My objective is to only receive the text ... without the tags.
View
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
#using (Html.BeginForm("Index", "Email", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="box box-info">
<div class="box-body">
<div class="form-group">
<input class="form-control" type="email" name="Destinatário" placeholder="Para:">
</div>
<div class="form-group">
<input class="form-control" name="Assunto" placeholder="Assunto:">
</div>
<div class="form-group">
<textarea id="summernote" name="Mensagem" class="form-control" style="height: 200px" placeholder="Introduza a Mensagem..."></textarea>
</div>
<div class="form-group">
<div class="btn btn-default btn-file">
<i class="fa fa-paperclip"></i> Anexo
<input type="file" name="Attachments" multiple="multiple">
</div>
<p class="help-block">Max. 32MB</p>
</div>
</div>
<div class="box-footer">
<div class="pull-right">
<button type="button" onclick="location.href='#Url.Action("DashboardV1", "Home")'" class="btn btn-default"><i class="fa fa-pencil"></i> Voltar</button>
<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o" id="sendEmail"></i> Enviar</button>
</div>
<button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Limpar Tudo</button>
</div>
</div>
}
#section Scripts {
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<script type="text/javascript">
var message = "#ViewBag.Message";
$(function () {
if (message != "") {
alert(message);
}
});
</script>
<script>
$(document).ready(function () {
$('#summernote').summernote();
});
</script>
}

JavaScript Get the closest element and input a value to the input

I have a piece of HTML that looks like this
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
Above that I have a button that looks like this
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
Once that button is pressed I run a function to get the #imageContent div and append a new row with the same as before.
<script type="text/javascript">
function add_fields() {
var div = document.getElementById("imageContent");
div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
</script>
This works as expected and adds a new row into the imageContent div.
See picture. If I click Select Image, it launches a modal window with all of my images, and when I select one, it runs this piece of js.
onInsertCallback: function (obj){
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
}
The problem I am having is that it does not get the correct input area to insert the value into, and instead always updates the first element. The full js code looks like this.
$(document).ready(function() {
jQuery(document).ready(function() {
/** Keep track of which modal button was clicked. **/
var currentModalBtn;
jQuery('.modal-btn').click(function() {
currentModalBtn = jQuery(this);
});
jQuery('.laradrop').laradrop({
onInsertCallback: function(obj) {
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
},
onErrorCallback: function(jqXHR, textStatus, errorThrown) {
// if you need an error status indicator, implement here
//Swal here
swal({
title: 'Error!',
text: 'An Error Occurred',
type: 'error',
showConfirmButton: false,
showCancelButton: true
});
},
onSuccessCallback: function(serverData) {
//
}
});
});
});
My question is, how can I ensure that I get the right input field that the button was clicked on to update that fields value and make sure the others stay as they were.

move var currentModalBtn; outside the ready so it is available to the callback(s)
Also have only one
$(document).ready(function() {
jQuery(document).ready(function() {
you have a mess of jQuery/$ and so on - this will likely work better:
function add_fields() {
var $div = $("#imageContent");
$div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
var currentModalBtn;
$(function() {
/** Keep track of which modal button was clicked. **/
$("#imageContent").on("click",".modal-btn", function() {
currentModalBtn = $(this);
});
$("#test").on("click",function() {
currentModalBtn.closest('.input-group').find('input.file-src').val("hello");
$('#myModal').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
<button type="button" id="test">
click
</button>

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.

You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />

You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

jquery Editing dynamically generated div content

I have the following code snippet:
(document)
.on("submit", ".edit-employee-form", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
method: $(this).attr("method"),
dataType: "html",
context: this,
data: $(this).serialize(),
success: function (response) {
p = $(this).parent();
p.prevAll('#first-name').html($(this).find("#first_name").val());
p.prevAll('#last-name').html($(this).find("#last_name").val());
p.prevAll('#email').html($(this).find("#email").val());
p.prevAll('#remain_case').html($(this).find("#remain_case").val());
$(this).parent().hide();
console.log('yay');
},
error: function (response, error) {
console.log("ERROR");
console.log(response);
console.log(error);
}
});
}
);
What it does is it submits a form to edit a particular employee (a list is displayed on the page) and then updates the html to reflect the changes the user submitted.
My problem is that some of the employees are also added via ajax calls, so their corresponding list elements are added dynamically to the html. I don't seem to be able to access their divs with id first-name, last-name, email etc. Any advice on how I can select divs which have been added dynamically?
I'm sorry for this being an image but I don't seem to be able to copy off the chrome console. The second element is added dynamically.
<div class="container firm-employees">
<div class="row">
<div class="col-lg-3 table-header">Name</div>
<div class="col-lg-2 table-header">Surname</div>
<div class="col-lg-3 table-header">E-Mail</div>
<div class="col-lg-1 table-header">Cases</div>
<div class="col-lg-3 table-header">Options</div>
</div>
<div class="row manage-user-row">
<div class="col-lg-3" id="first-name">Gray</div>
<div class="col-lg-2" id="last-name">Sawyer</div>
<div class="col-lg-3" id="email">masakotypu#hotmail.com</div>
<div class="col-lg-1" id="remain_case">1</div>
<div class="col-lg-3">
<button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit User
</button>
<a href="edit/22">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
Edit Secretaries
</button>
</a>
</div>
<div id="ed-205" class="edit-employee-box">
<form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">
<div class="row">
<div class="col-lg-3">
<label for="first_name" class="form_label">First Name</label>
<input type="text" name="first_name" value="Gray" id="first_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="last_name" class="form_label">Last Name</label>
<input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="email" class="form_label">E-Mail</label>
<input type="text" name="email" value="masakotypu#hotmail.com" id="email" class="form-control">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="phone" class="form_label">Phone Number</label>
<input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">
</div>
<div class="col-lg-3">
<label for="remain_case" class="form_label">Remaining Cases</label>
<input type="text" name="remain_case" value="1" id="remain_case" class="form-control">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<br>
<input type="submit" class="btn btn-success btn-md" value="Update User">
<a href="edit/22">
<button type="button" class="btn btn-info btn-md">
Reset Password
</button>
</a>
</div>
<div class="col-gl-3">
</div>
</div>
</form>
</div>
</div>
<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">pubazof#hotmail.com</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit User</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Edit Secretaries</button></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="pubazof#hotmail.com" id="email" class="form-control"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><button type="button" class="btn btn-info btn-md">Reset Password</button></div><div class="col-gl-3"></div></div></form></div></div>
</div>

Your code should be sure the order of finished ajax calls because it's too fast to follow with human eyes. If when appending ajax call is not completed, you cannot select those elements using even element id.
To do so, you should put ajax function calls in "success handler".
if Number one is success then Number two in the one's success handler, and Number three in two's success handler, and so on...
The simple solution is to use PROMISE to get all of ajax relative functions in order.
Please refer to the link : https://api.jquery.com/promise/
To check the element is successfully appended in time, check out the console with 'console.info or console.log" or something like that. if it's length is 0, then the appending ajax call is not yet completed.

How to add fileds dynamically using javascript with Bootstrap?

I got the code add fields dynamically here Add fields dynamically - link
when I try use this code insight my form class <form class="form-horizontal" action="create.php" method="post"> it won't work but when put this filed out from form class it will work I know have to changes in java script but I'm new to JS so please help me the changes
this my form:
<body>
<form class="form-horizontal" action="create.php" method="post">
<div class="form-group">
<label for="des" class="col-sm-2 control-label">To Address</label>
<div class="col-sm-8">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group ">
<input class="form-control"name="fields[]"type="text" placeholder="To....." />
<span class="input-group-btn">
<button class="btn btn-success btn-add"type="button">
<span class="glyphicon glyphicon-plus"></span> </button> </span>
</div>
</form>
</div>
</div>
</div>
<div class="form-group">
<input name="submit" class="btn btn-success" type="submit" value="Save" id="search"/>
</div>
</form>
</body>
myscript :
<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>

You made a mistake in your HTML markup, adding a form inside another form, and i had a look at your reference, you would see you did make a mistake.
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>
</div>
</div>
</div>
So if you wanted to add your POST method, you would add it into the form tag there, and not create a new one.
Hope this helps.

here i did a mistake to add form insight form the easy way to add multiple fields :
<label for="des" class=" control-label">Description</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<div class="col-sm-8">
<input id="des" type="text" class="form-control" name="descrip[]"></div>
<span class="remove-field">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
script funtion :
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});