Hi I am a beginner in Angularjs and was trying to implement edit of a field and trying to save the data..
The below is the html:-
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save()">save</button>
<button ng-click="closepopup()">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
The below is the js:-
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
angular.copy($scope.address[$index], $scope.address);
}
$scope.closepopup=function(){
$scope.istrue=false;
}
$scope.save = function() {
$scope.istrue=false;
angular.copy($scope.addresses, $scope.addresses[0])
Address.save($scope.addresses)
};
I am trying to fetch and save the data in the service Address which gets getting the value from the database
You need store edit state in each address
So html
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{address.istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save(address)">save</button>
<button ng-click="closepopup(address)">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
And js
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
//angular.copy($scope.address[$index], $scope.address); // why you need this?
}
$scope.closepopup=function(address){
address.istrue=false;
}
$scope.save = function() {
address.istrue=false;
// angular.copy($scope.addresses, $scope.addresses[0])// why you need this?
Address.save($scope.addresses)
};
Related
I am unable to make the trash icon visible more than one when I checked the checkbox element.
The first card only shows the trash icon, and the rest of the cards are not showing.
I have tried getElementById, querySelectorAll and getElementsByClassName. Nothing works properly as expected.
Can you find the logic error in the code?
function check() {
if (document.querySelector(".check").checked == true) {
document.querySelector(".deleteButton").style.visibility = "visible";
} else {
document.querySelector(".deleteButton").style.visibility = "hidden";
}
}
.deleteButton {
visibility: hidden;
}
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
Don't wrap a checkbox in a link
Also delegate
I delegate from a div I called container. It needs to be the nearest common container for your cards
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("check")) {
tgt.closest(".card-body").querySelector(".deleteButton").classList.toggle("hide", !tgt.checked)
}
else if (tgt.closest("a").classList.contains("deleteButton")) {
e.preventDefault();
tgt.closest(".card").remove()
}
})
.hide {
display: none
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div id="container">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
</div>
This is my code snippet:
<div class="row">
<div class="col-md-4">
<div class="dash-box dash-box-color-1">
<div class="dash-box-icon">
<i class="glyphicon glyphicon-cloud"></i>
</div>
<div class="dash-box-body">
<span class="dash-box-count">someNumber</span>
<span class="dash-box-title">sometitle</span>
</div>
<div class="dash-box-action">
<button>More Info</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="dash-box dash-box-color-2">
<div class="dash-box-icon">
<i class="glyphicon glyphicon-download"></i>
</div>
<div class="dash-box-body">
<span class="dash-box-count">someNumber</span>
<span class="dash-box-title">someTitle</span>
</div>
<div class="dash-box-action">
<button>More Info</button>
</div>
</div>
</div>
</div>
</div>
I want to extract data values from a json file and display it at the someNumber at someNumbers place. What is the best way to do that?
I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.
There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.
I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!
You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/