cancel comment in angular and change view - javascript

when i click on edit button the view is changed by ng-if how to go back by clicking cancel button
<div class="timeline-body">
<div marked="cmnt.content" class="markdown" ng-if = "editPostComment != $index " ></div>
<!--Edit comment-->
<div class="commentBox" ng-if = "editPostComment == $index " >
<textarea
rows="10" > {{cmnt.content}}</textarea>
<div class="hints">
<span class="boldtext">**Bold**</span>
<span class="italictext">_itlaics_</span>
<span class="striktext">~~strike~~</span>
<span class="codetext">'code'</span>
<span class="codetext">'''preformatted'''</span>
<span class="quotetext">>quote</span>
</div>
<div id="comment-btns">
<button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="cancel()">Submit</button>
<button class="btn btn-primary pull-left cancel-edit" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click = "cancelEdit()">Cancel</button>
</div>
</div>
</div>

If your route change when clicking on edit comment, you can do it like in javascript. Try this
$scope.cancel = function(){
$window.history.back();
}
But if it only depend to the nf-if condition you can set the value of editPostComment to be different to $index as below
$scope.cancel = function(editPostComment){
editPostComment = null;
}
and then change the cancel button to
<button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="cancel(editPostComment)">Submit</button>

Related

show and ng-show is not helping out for below div

when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()

my when running the eventlistener, my code executes the ${input.value} instead of text from the input section, what could be wrong here

HTML Code indicating the classes and id of the respective elements.
<div class="input-group mb-3" >
<input type="text" class="form-control" id="input-item" value="">
<div class="input-group-preppend">
<button type="button" class="btn btn-success" id="add-item" >Add</button>
<button type="button" class="btn btn-info" id="delete">Delete</button>
</div>
</div>
<div id="display-item">
<div class="item">
<!--<p>New list items appear here!</p>
<div class="item-btn">
<i class="fa-regular fa-pen-to-square"></i>
<i class="fa-solid fa-square-xmark"></i>
</div>-->
</div>
</div>
JS Code showing what should be happen when i key in a word inside the input section and click on add, it shows ${input.value} instead
let input = document.querySelector('#input-item');
let add = document.querySelector('#add-item');
let display = document.querySelector('#display-item');
add.addEventListener('click', () => {
if (input.value.trim() !=0) {
let newItem= document.createElement('div');
newItem.classList.add('item')
newItem.innerHTML = '<p> ${input.value} </p> <div class="item-btn"> <i class="fa-
regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>'
display.appendChild(newItem);
input.value= '';
} else {
alert('please add an item!')
}
});
this is the js code
Use
`
instead of
'
newItem.innerHTML = `<p> ${input.value} </p> <div class="item-btn"> <i class="fa-
regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>`

How to append a div to another div

Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.
<div class="appendOuter">
<?php
foreach($query as $data){
$id = $data['ID'];
$initialAccess = $data['Access'];
if(strlen($initialAccess) > 3){
echo '
<div class="box" >
<input type="hidden" value='.$id.' class="ID">
<textarea class="Access">'.$Access.'</textarea>
</div>';
}
}
?>
<div class="text-center">
<button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
My javascript to append a new div
<script>
function addMorediv(index){
var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
element.appendTo('.appendOuter');
}
</script>
Assuming that all your other HTML structure is similar to what you've demoed:
element.appendTo($(this).parent().parent());
Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea(s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.
$('.btn-add').on('click', function() {
var $box = $(this).parent().parent().find('.box:last');
var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
$element.appendTo($box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">
<!-- Assume your PHP generated 3 ".row" div rows in for loop -->
<div class="row">
<div class="box">
<input type="hidden" value="1" class="ID">
<textarea class="Access">1</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="2" class="ID">
<textarea class="Access">2</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="3" class="ID">
<textarea class="Access">3</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
</div>

bootstrap modal html content knockout binding not applying popover

When I use the popover control in my modal the bindings do not work.
Here is the default content :
<form id="a" class="form-horizontal" data-bind="submit: SaveModal">
<div class="modal-body modal-content-form">
Default Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary btn-modal-submit" value="Submit">
</div>
</form>
When I click my button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal" data-title="Information" btn-block'=""><i class="fa fa-print"></i>Quote Proposal</button>I get the new Content:
<form id="a" class="form-horizontal" data-bind="submit: SaveModal">
<div class="modal-body modal-content-form">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse001391ce-ebdb-4423-b525-40f97835fa53">Modal Controls</a>
</h4>
</div>
<div id="collapse001391ce-ebdb-4423-b525-40f97835fa53" class="panel-collapse collapse">
<div class="panel-body"><div class="row"><div class="col-sm-6">
<div class="form-group">
<label>Coverage Special</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input id="CoverageSpecial" name="CoverageSpecial" data-bind="value: CoverageSpecial" type="number" step="any" class="form-control control-font">
<span class="input-group-addon">
<a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="left" title="TextBox Numeric Help : FAQs" data-content="
This control is an html textbox of type (TextNumeric). The values
that are allowed are between a (Minimum) and a (Maximum)
integer. The (Precision) allowed will dictate the amount of
numbers after the decimal. It is (Required) and will
render a label with the (Name) value.
"><i class="fa fa-question-circle"></i></a>
</span>
</div>
<span class="help-block"></span>
</div>
</div></div></div>
<div class="panel-footer"></div>
</div>
</div>
</div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary btn-modal-submit" value="Submit">
</div>
</form>
The problem is that knockout does not work if I dynamically append content. Why?
Knockout doesn't listen to changes made to the DOM. It processes the DOM tree once (after you call applyBindings) and creates event listeners and subscriptions to make sure stuff gets updated once needed. Some bindings, like the with binding, can re-apply bindings to parts of the DOM when needed.
Here's an example of a very basic way to force knockout to re-apply bindings:
We swap out parts of the DOM by using an html binding and an observable that holds the partial HTML
After each swap, we re-apply bindings to the inner part of the element that has the html binding: you cannot apply bindings to an element twice; the outer element is already bound to our initial vm
This example serves to show how knockout works, and isn't the best solution. Managing multiple binding contexts by hand can get messy. I'd suggest creating a custom binding that does this for you. Also, this solution only supports partial views that have one parent element.
var content1 = "<h1 data-bind='text: label1'>test</h1>";
var content2 = "<h2 data-bind='text: label2'>test</h2>";
var partialContent = ko.observable(null);
var reapplyBindingsToPartial = function() {
var partialVM = {
label1: "Heading 1",
label2: "Heading 2"
};
var partialElement = document.querySelector(".js-partialView").firstChild;
ko.applyBindings(partialVM, partialElement);
};
var swap = function() {
if (partialContent() === content1) {
partialContent(content2)
} else {
partialContent(content1);
}
// By now, the `html` binding was re-evaluated
reapplyBindingsToPartial();
};
var vm = {
partialContent: partialContent,
swap: swap
};
ko.applyBindings(vm);
swap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="js-partialView" data-bind="html: partialContent"></div>
<button data-bind="click: swap">
swap
</button>

retrieve dynamically created values of hidden input with jquery

The following is the form created via php.
<form method="POST" action="http://localhost:8000/resources/11" accept-charset="UTF-8">
<label for="tag">Tagname</label>
<input class="form-control" id="tags" name="tagname" type="text">
</div>
<div id="tagnames" class="control-group clearfix">
<div class="tag-wrapper pull-left">
<button data-original-title='This is about quantum description.' data- placement="top" data-toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
quantum <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<div class="tag-wrapper pull-left">
<button data-original-title='This is about kids!' data-placement="top" data- toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
kids <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<input id="tag_ids" name="tag_ids" type="hidden" value="4,5">
</div>
<div id="tagname"></div>
<button type="submit" class="btn btn-primary submit_button">
<span class="fa fa-pencil-square-o"></span>
Update
</button>
<a class="btn btn-default" href="http://localhost:8000/resources">Cancel</a>
</form>
I want to alert(4) or alert(5) whichever corresponding tagname I click on.And I should be able to remove that id from the value.
Can anyone please help me?
I been scratching for two days for this problem.
I would suggest you to do this way by splitting into arrays and get the index:
$('.tag_tooltip .fa-times').on('click', function(){
var o = $('#tag_ids').val().split(','), // creates an array
idx = $(this).closest('.tag-wrapper').index(), // get the index of closest parent
value = o.splice(idx, 1); // remove the value
$('#tag_ids').val(value); // apply the new values
alert($('#tag_ids').val());
});

Categories