We Keep Coding

Why val() function doesn't work with later rendered html?

so I have an add minus button rendered with javascript because I needed data from a database and if I don't render it with javascript it will work but it doesn't work.
HTML:
<div id="cart">
<div class="row">
</div>
</div>
JS (rendering):
var output = [];
var food_template = [];
//res is the data got from database
for(var f in res) {
id = res[f]["id"];
name = res[f]["name"];
description = res[f]["description"];
price = res[f]["price"];
food_template = [
'<div class="col-6">',
' <div class="single_food_item media">',
' <div class="media-body", style="margin-right:10px; margin-top: 20px; height: 200px">',
` <h3>${name}</h3>`,
` <p>${description}</p>`,
` <h5>$${price}</h5>`,
//add minus button starts
' <div class="input-group" style="width:50%">',
' <span class="input-group-btn">',
' <button class="btn btn-danger btn-minus" type="button">-</button>',
' </span>',
' <input type="text" class="form-control no-padding add-color text-center height-25" maxlength="3" value="0">',
' <span class="input-group-btn">',
' <button class="btn btn-success btn-plus" type="button">+</button>',
' </span>',
' </div>',
//add minus button ends
' </div>',
' </div>',
'</div>'
];
output.push(food_template.join("\n"));
}
("#cart .row").html(output.join("\n"));
JS (add minus button):
$('#cart .row').delegate('.btn-minus', 'click', function(){
$(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) - 1);
});
$('#cart .row').delegate('.btn-minus', 'click', function(){
$(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) + 1)
});
(all functions are called)
What I test made me think that the problem is probably the val() function isn't changing the value of the input HTML since if I use console.log to show it it works but it doesn't update on the web

I think you have both the plus and the minus event handlers attached to the minus button, so when you click it, the plus handler increments the value and the minus handler decrements it, therefore you see no change regarding the value of the input

jQuery dynamic fields after validation are disappearing

I have a problem with my jQuery and with validation.
Here is my Code:
var fielddd = 1;
$(document).on('click', '.btn.add-field', function() {
fielddd++;
$('#newfield').append('<textarea class="from-control" name="somename[]" id="field_' + field + '"></textarea>' + '<button class="btn add-field">add</button>' + '<textarea class="from-control" name="somename2[]" id="field_' + field + '"></textarea>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<textarea class="from-control" name="somename[]" id="field"></textarea>
<button class="btn add-field">add</button>
<textarea class="from-control" name="somename2[]" id="field"></textarea>
</div>
<div class="row" id="newfield">
<!-- new textarea -->
</div>
The problem is that I have an validation and I have an button submit, after checking that one field empty is, the code make and redirect and after this redirect to the same page so that user can give his parameter in textarea. But after this redirect, by the user added field are disappeared.
How can I fix it?

You are using the same id in each and every textarea. Id must be unique. Mistakenly you are using "field" which must be replaced with "fielddd" that is being incremented.
var fielddd = 1;
$(document).on('click', '.btn.add-field', function() {
fielddd++;
$('#newfield').append('<textarea class="from-control" id="field_' + fielddd + '"></textarea>' + '<button class="btn add-field">add</button>' + '<textarea class="from-control" id="field_' + fielddd + '"></textarea>');
});

dynamic Accordion post and answer

I have this fiddle
http://jsfiddle.net/nesreen/m5TMF/763/
$("#AddansId").click(function(){
//get the parent of the div with id(Collapse+x)
// to abend the data content of the textarea beside the word
//Account Registeration at PrepBootstrap
});
I can create a dynamic accordion with button
inside each accordion I need to make another textarea and button to add another texts in the same collapse
but I face the problem of how can I get the parent of the button in each time even if the parent id is dynamic also

Let's see. A few steps to take here:
First you need to bind the click a bit differently(event
delegation) in this case because you want to click on dinamically
added elements
Second, we get the parent id using closest() method and attr('id')
For getting the textarea value you can use
$(this).parent().prev().find('textarea').val()
and then use append() method to append the text next to the word you want and finally use $(this).closest('.container').append(answer); to add the textbefore the word(this was a bit unclear so I added it before Account Registeration at PrepBootstrap. I hope that is what you meant)
var x = 1;
$(document).on('click', "#AddansId", function() {
var idOfParent = $(this).closest('.panel-collapse').attr('id');
//console.log(idOfParent);
var answer = $(this).parent().prev().find('textarea').val();
$(this).closest('.container').append(answer);
});
$(document).on('click', '#AddQuestId', function() {
x = x + 1;
$("#accordion").append('<div class="panel panel-default">' +
'<div class="panel-heading">' +
'<h4 class="panel-title"> ' +
'<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse' + x + '">' + $("#comment").val() + '</a> </h4>' +
'</div>' +
'<div id="collapse' + x + '" class="panel-collapse collapse in">' +
'<div class="panel-body">' +
'<div class="container"> ' +
' <form>' +
'<div class="form-group" >' +
'<label for="comment">answer:</label>' +
'<textarea class="form-control" rows="5" id="answer' + x + '"></textarea> ' +
' </div>' +
' <div style="float: right;"> <input type="button" class="btn btn-info" value="answer" id="AddansId"></div>' +
'</form>' +
'</div>' +
'Account registration at <strong>PrepBootstrap</strong>' +
'</div>' +
'</div>' +
'</div>' +
'</h4>' +
'</div>');
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<form>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<div style="float: right;"> <input type="button" class="btn btn-info" value="Add Question" id="AddQuestId"></div>
</form>
</div>
<div class="panel-group" id="accordion">
</div>

Error displaying info on Tooltip with AngularStrap

I am trying to display some info in a Tooltip and all I am getting is the Title like this
and here is my html where I call it
<button class="btn btn-primary"
type="button"
ng-click="moreInfoSlip(slip)"
data-trigger="click"
data-type="success"
data-title="{{tooltip.title}}"
bs-tooltip>
Click me
</button>
and here the JS
$scope.moreInfoSlip = function(slip) {
console.log(slip);
$scope.tooltip = {
title: '<strong>PICK INFO</strong>',
content: '<div class="selection-info"><p><strong>Game</strong> ' + slip.gameLineObj.name + '</p>' +
'<p><strong>League</strong> ' + slip.leagueObj.name + '</p>' +
'<p><strong>Date</strong> ' + moment(slip.gameLineObj.date).format('MMMM Do YYYY, h:mm:ss a') + '</p>' +
'<p><strong>Line</strong> ' + _.result(_.find(slip.lines, {isSelected: '1'}), 'pick') + '</p></div>'
};
}
what am I doing wrong ?

You need to set the data-html="true" attribute of tooltip. Like this
<button class="btn btn-primary"
type="button"
ng-click="moreInfoSlip(slip)"
data-trigger="click"
data-type="success"
data-html="true"
data-title="{{tooltip.title}}"
bs-tooltip>
Click me
</button>

How to turn a jquery ui dialog button into a checkbox?

So I'm new to Jquery and Jquery UI. I have my dialog box working but one thing I am looking for is how to change one of the buttons in the dialog into a checkbox.
My scenario:
A user will be posting information, like news and such. But I want to give them the ability to not publish it to the public yet. A draft, if you will. So the checkbox would be right beside the "ok" and "cancel" button.
I've tried creating an array before the dialog function and placing it there but I can't seem to find a way to declare a button as a checkbox.
Thank you in advance for all your help,
Edit: Here is some code I have tried. My problem is now that i try to style the button pane, it disappears.
var dialog = $('<div title="Create News Post">' +
'<form method="POST" action="index.php?controller=posts&action=add">' +
'<div id="tabs" class="form">' +
'<ul>' +
'<li>English</li>' +
'<li>French</li>' +
'</ul>' +
'<div id="tabs-1">' +
'<label class="first">' +
'<span>English Title:</span>' +
'<input type="text" name="en_title" />' +
'</label>' +
'<label>' +
'<span>English Text:</span>' +
'<textarea name="en_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'<div id="tabs-2">' +
'<label class="first">' +
'<span>French Title:</span>' +
'<input type="text" name="fr_title" />' +
'</label>' +
'<label>' +
'<span>French Text:</span>' +
'<textarea name="fr_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'</div>' +
'<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">' +
'<div class="ui-dialog-buttonset">' +
'<input type="checkbox" id="isDraft" /><label for="isDraft">Publish?</label>' +
'<button id="btnSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
'<span class="ui-button-text">Save</span>' +
'</button>' +
'<button id="btnCancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
'<span class="ui-button-text">Cancel</span>' +
'</button>' +
'</div>' +
'</div>' +
'</form>' +
'</div>'
)
.dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600});

1) You can add the buttons and checkbox into the HTML that creates the dialog and not the use dialog's property that generates buttons for you. Once you create the dialog you can set the handlers
using the dialog object in the selector:
dialog = $('<div>' +
'...' +
'<input type="submit" id="btnCancel" value="Ok" />' +
'<button id="btnCancel">Cancel</button>' +
'<input type="checkbox" id="chkIsDraft" name="chkIsDraft" value="Is Draft" />' +
'</div>')
.dialog(autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false});
$('#btnCancel', dialog).click(function(){
//...
});
dialog.dialog('open');
EDIT: Without reading jQuery UI code it seems that a div with a class attribute like 'ui-dialog-buttonpane' will be removed from the dialog html. So if you choose this approach
you must avoid reusing the jQuery UI dialog classes.
2) Other approach could be add a third button using the dialog's property and substitute the third button html for your checkbox:
//Again use the dialog object as the scope for the selector.
$('.ui-dialog-buttonpane button:eq(1)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
EDIT: The object returned by dialog correctly refers to the DOM element using in the creation of the dialog instead of all the machinery to make the dialog work. That is way you
will need to use dialog.parent() as the scope of the above selector.
3) A third option: Use a regular button that provides the same check/uncheck semantic that a checkbox (I mean visually, craft some CSS), when this button is clicked just make sure some hidden field in the dialog markup (Im thinking in a form you will post after the OK is pressed) gets updated to reflect the check state.
$("<div>...</div>").dialog({
modal: true /..
},
buttons: {
//...
'IsDraft': function() {
$(this).toggleClass('checked')
$("input[name='is_draft']",$(this).parent('form')).val($(this).hasClass('checked'));
}
}
});
EXAMPLE (BASED IN YOUR CODE):
var dialog = $('<div title="Create News Post">' +
'<form method="POST" action="index.php?controller=posts&action=add">' +
'<div id="tabs" class="form">' +
'<ul>' +
'<li>English</li>' +
'<li>French</li>' +
'</ul>' +
'<div id="tabs-1">' +
'<label class="first">' +
'<span>English Title:</span>' +
'<input type="text" name="en_title" />' +
'</label>' +
'<label>' +
'<span>English Text:</span>' +
'<textarea name="en_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'<div id="tabs-2">' +
'<label class="first">' +
'<span>French Title:</span>' +
'<input type="text" name="fr_title" />' +
'</label>' +
'<label>' +
'<span>French Text:</span>' +
'<textarea name="fr_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'</div>' +
'</form>' +
'</div>'
)
.dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600,height:400,
buttons: {
IsDraft: function(){alert('draft');},
Save: function(){alert('saving');},
Cancel: function(){alert('cancel');}
}
});
//lets do a replacement to get a checkbox in the button pane.
$('.ui-dialog-buttonset button:eq(0)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
dialog.dialog('open');

Maybe it'll help: look at the JQuery UI button. It can work as a checkbox. You can create separate button in the dialog for your purposes.