I am trying to make a small app with items pulled from a json source and i want a form to edit each element. Each element has several attributes, name, id, description.
Here is the example but the edit form does nothing at the moment. I will later use the example to store the data in a database.
I am trying to find out the best solution to have this edit form directly on each element when pushing on edit for example. What is the best way to do it?
Thanks in advance!
script.js
var app = angular.module('myApp', []);
function Controller($scope) {
var items = [
{
"id": "1",
"name": "John",
"price": "55.33",
"description": "Lorem ipsums aute irure doln v anim id est laborum.",
"flag": "0"
},
{
"id": "2",
"name": "Mike",
"price": "68",
"description": "Loriannaj jh said ihsa djni cjipsums aute irure doln v anim id est laborum.",
"flag": "0"
},
{
"id": "15",
"name": "George",
"price": "78",
"description": "This is the description",
"flag": "1"
}
];
//Initialize the controller and the UI
$scope.items = angular.fromJson(items);
}
html
<html ng-app="myApp">
<head>
<title>Test Page</title>
<link type="text/css" rel="stylesheet" href="style.css">
<!-- Angular Staff -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header>
</header>
<section>
<div class="columns2" ng-controller="Controller">
<div style="width: 500px; display: inline-block">
<h3>ITEMS</h3>
<div ng-repeat="item in items">
<div class="user_div" >
{{item.name}}
<a style="float: right" href="#" ng-click="showEdit = ! showEdit">Edit </a>
</div>
<div class="user_data" ng-show="showDetails" >{{item.description}}</div>
<div class="user_data" ng-show="showEdit" >
<h3>Edit Item</h3>
<input value="{{item.name}}" type="text" >
<input value="{{item.description}}" type="text" >
<button ng-click="editItem({{item.id}},{{itemName}},{{itemDescription}})">Edit</button>
</div>
</div>
<br>
<pre>Items: {{items|json}}</pre> </div>
</div>
</body>
</html>
I ran into the same requirement and came up with this solution:
<tr ng-repeat="transaction in data.transactions">
...
<td>
<input ng-model="transaction.numAvailable"
ng-style="!transaction.edit && {'background-color': '#eeeeee'}"
ng-blur="saveShelf(transaction)"
ng-click="editShelf(transaction)"
class="form-control"
ng-value="transaction.numAvailable"/>
</td>
</tr>
And in my controller.js:
$scope.editShelf = function(trans){
trans.edit = true;
};
$scope.saveShelf = function(trans){
trans.edit = false;
//call service to save value
};
Basically, you have an input that looks disabled with bg-color:#eee, onclick removes the bg-color, onblur resets the bg-color. To make this work I added an 'edit=false' to my list with lodash:
_.forEach($scope.data.transactions, function(trans){
trans.edit = false;
});
You can use x-editable for inline edit. As we can't see any example , you can use this module for inline-edit.
you can create a factory like this
app.factory('userFactory', function ($http) {
var factory = {};
factory.get = function () {
return $http.get('your_rest_url', {}).then(function (resp) {
console.log('Success', resp);
}, function (err) {
console.error('ERR', err);
});
};
});
inject it to your controller
var Ctrl = function ($scope, userFactory) {
$scope.items = userFactory.get();
};
then bind the data to your form elements
<input ng-model="items.property">
Related
I installed "element-ui": "^2.3.7" and I use it in my Vue component :
<el-date-picker
v-model="valueDateTimeOrder"
type="daterange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:picker-options = "pickerOptions">
</el-date-picker>
in data:
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
}
It's works perfect. But when I want to disable all in an array, I don't know how to do it. Because the array only exist after get api. But data is done after all this component, it cannot wait call the range. Help me to set picker-options. Thanks
I think this can help you.
var app = new Vue({
el: '#app',
data() {
var vm = this;
return {
disabledDates: [],
pickerOptions1: {
disabledDate(time) {
time = moment(time).format('YYYY-MM-DD');
return vm.disabledDates.indexOf(time)>-1;
}
},
value1: '',
val: ''
};
},
methods: {
appendDate () {
this.disabledDates.push(this.val);
this.$refs.picker.unmountPicker();
this.$refs.picker.mountPicker();
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet"/>
<div id="app" style="height:500px;">
<div class="block">
<el-date-picker
ref="picker"
v-model="value1"
type="date"
:picker-options="pickerOptions1"
placeholder="select date">
</el-date-picker>
<div>
disabledDates:{{disabledDates}}<br>
<input type="text" v-model="val"><button #click="appendDate">append date into disabled date array(format:YYYY-MM-DD)</button>
</div>
</div>
</div>
I have a google app engine and I recently decided to add app engine to it. I have gone through the steps, have imported my google project into firebase, added all the initialization code, and some temp functions for logging in and signing up. However, the app never goes past the points where I try to log in. I have been searching everywhere and trying everything I can. I'm sure I'm just missing something small, but could use another set of eyes. Thanks.
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Hello Endpoints!</title>
<script type="text/javascript" src="/js/base.js"></script>
<!-- SCRIPT FOR FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-database.js"></script>
<script type="text/javascript" src="/js/firebaseApp.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css">
<link type="text/css" rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-action" onclick="loginEvent()">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary" onclick="signupEvent()">
Sign Up
</button>
<button id="btnLogout" class="btn btn-action hide">
Log out
</button>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
</div>
<div class="container">
<form action="javascript:void(0);">
<h2>Add Asteroid</h2>
<div><span class="label">Name: </span><input id="asteroidName" /></div>
<div><span class="label">Diameter: </span><input id="asteroidDiam" /></div>
<div>Dimensions:</div>
<div><span class="dimlabel">Length: </span><input id="asteroidLength" /></div>
<div><span class="dimlabel">Width: </span><input id="asteroidWidth" /></div>
<div><span class="dimlabel">Height: </span><input id="asteroidHeight" /></div>
<div><span class="label">Mean Distance From Sun: </span><input id="asteroidDist" /></div>
<div><input id="addAsteroid" type="submit" class="btn btn-small" value="Submit"></div>
</form>
<form action="javascript:void(0);">
<h2>Refresh Asteroids</h2>
<div><input id="listAsteroids" type="submit" class="btn btn-small" value="Refresh"></div>
</form>
<table id="AsteroidTable">
<tr>
<th>Asteroid</th>
<th>Diameter</th>
<th>Dimensions</th>
<th>Mean Distance From Sun</th>
</tr>
</table>
<script type="text/javascript">
function init() {
google.devrel.samples.hello.init('//' + window.location.host + '/_ah/api');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</div>
</body>
</html>
And here is my FirebaseApp.js:
function loginEvent()
{
const email = document.getElementById('txtEmail');
const pass = document.getElementById('txtPassword');
email.value = "HELLO";
email.value = firebase.app().name;
pass.value = "NO";
firebase.auth().signInWithEmailAndPassword(email, pass)
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
pass.value = "YES"
}
function signupEvent()
{
const email = document.getElementById('txtEmail');
const pass = document.getElementById('txtPassword');
firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
}
I was changing the values of the email and password just to make sure I was reaching that point. printing out the value of firebase.app().name returns [DEFAULT]. I also made sure email/password option was selected in Firebase. Thank you for any help you can provide.
You only need to include https://www.gstatic.com/firebasejs/4.3.1/firebase.js which contains all the modules needed. No need to include all the others: firebase-app.js, firebase-auth.js, etc.
Also signInWithEmailAndPassword and createUserWithEmailAndPassword accept string arguments. You are passing input elements instead. There should errors thrown in the console because of this. So instead of email, pass email.value.
can you tell me how to assign a value of a dynamic amount of forms with input-field to a MVVM-Property in a template. The examples of the official Documentation is always binding to a property to the binded dataSource. I don't want to use the datasource properties, because ill have a more complex datasource, so i don't want to send the whole object to the server, only the entered Values! I want to it Like this:
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div>
<div> Age: ${age}</div>
<input type="text" data-bind="value: inputs"/>
<h1 data-bind="text: inputs"></h1>
<span data-bind="click: show">click</span>
</div>
</script>
var arr = new kendo.data.ObservableArray([
{ name: "John Doe", age: 23 },
{ name: "Jane Doe", age: 34 }
]);
var viewModel = kendo.observable({
arr: arr ,
inputs:"asdas",
show: function(){alert(viewModel.get('inputs'));}
});
kendo.bind($("#example"), viewModel);
You will see that the inputs property don't get the entered value. What is the correct way to do it?
Thank
Here is your updated code
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div>
<div> Age: ${age}</div>
<input type="text" data-bind="value: name"/>
<h1 data-bind="text: name"></h1>
<span data-bind="click: show">click</span>
</div>
</script>
var arr = new kendo.data.ObservableArray([
{ name: "John Doe", age: 23 },
{ name: "Jane Doe", age: 34 }
]);
var viewModel = kendo.observable({
arr: arr ,
inputs:"asdas", // Binding with this is also working
show: function(e){alert(e.data.name);}
});
kendo.bind($("#example"), viewModel);
Working in this fiddle link: http://jsfiddle.net/iamsalik/pk7jr1x1/1/
I want to use the JavaScript Alfresco.ObjectPicker component in order to have category picker into the file: dnd-upload.get.html.ftl
<div class="form-field inlineable">
<label >Catégories:</label>
<div class="object-finder inlineable" id="a_default_prop_cm_categories-cntrl">
<div class="current-values inlineable object-finder-items" id="b_default_prop_cm_categories-cntrl-currentValueDisplay"></div>
<input type="hidden" value="" name="prop_cm_categories" id="c_default_prop_cm_categories"/>
<div class="show-picker inlineable" id="d_default_prop_cm_categories-cntrl-itemGroupActions"><span class="yui-button yui-push-button" id="yui-gen7"><span class="first-child"><button type="button" tabindex="0" id="yui-gen7-button" >Sélectionner</button></span></span></div>
<script type="text/javascript"> //<![CDATA[
(function(){
var picker = new Alfresco.ObjectFinder("a_default_prop_cm_categories-cntrl", "c_default_prop_cm_categories").setOptions(
{
field: "prop_cm_categories",
compactMode: true,
mandatory: false,
currentValue: "",
selectActionLabel: "Sélectionner",
minSearchTermLength: 1,
maxSearchResults: 1000
}).setMessages(
{""}
);
picker.setOptions(
{
itemType: "cm:category",
multipleSelectMode: true,
parentNodeRef: "alfresco://category/root",
itemFamily: "category",
maintainAddedRemovedItems: false,
params: "",
createNewItemUri: "",
createNewItemIcon: ""
});
})();
//]]>
</script>
</div>
</div>
And I have declared a JS dependency in the same file: dnd-upload.get.html.ftl
<#script type="text/javascript" src="${url.context}/res/components/object-finder/object-finder.js" group="objectfinder"/>
When I click on the button : "Sélectionner" , nothing happens and I have no console error neither.
Do you , Please, have any idea about how to make this Picker Working ?
Regards,
Sofia.
I have images that are loaded from database. When I click on an image, I want to show that image in a Modal Pop-up. My problem is that, I am not able to call the partial view from jquery. In fact, that action is not getting called from JQuery. Please help... I am a fresher. Below is my code:
_Layout.cshtml
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
#Styles.Render("~/bundle/ProfileStyle")
#Scripts.Render("~/bundle/JQuery")
#Scripts.Render("~/bundle/JQueryUI")
#Scripts.Render("~/bundle/CustomJS")
</head>
<body>
<div>
#RenderBody()
</div>
<div id="dialog">
#Html.Partial("_ProfileDetail")
</div>
</body>
</html>
Index.cshtml
#model IEnumerable<Profile.Models.TestProfile>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="tableOuterBlock">
#foreach (var item in Model)
{
<div class="tableInnerBlock">
<span>
#*<a href="#Url.Action("Edit", "Profile", new {#item.upi_Id})">*#
<img id="imgOpenDialog" src="#Url.Content(#item.upi_ImgData)" alt="No Image" width="100" height="100" />
#*</a>*#
</span>
</div>
}
</div>
Partial view
#model Profile.Models.TestProfile
<div>
#if(Model != null)
{
<img id="imgOpenDialog" src="#Url.Content(#Model.upi_ImgData)" alt="No Image" width="80%" height="50%" />
}
</div>
JQuery
$(function () {
$("[id*=imgOpenDialog]").click(function () {
var imgDetail = $(this).prop("src");
$("#dialog").dialog({
autoOpen: true,
position: { my: "center" },
modal: true,
resizable: false,
open: function () {
//parameter to c# function
data: { strImg = imgDetail }
$(this).load('#Url.Action("ShowProfileDetail","Profile")');
}
});
});
});
Controller
public PartialViewResult ShowProfileDetail(string strImg)
{
strImg = strImg.Substring(strImg.IndexOf('/'));
List<TestProfile> tpList = db.TestProfiles.Where(x => x.upi_ImgData ==strImg).ToList();
TestProfile testProfile = db.TestProfiles.Find(tpList[0].upi_Id);
return PartialView("_ProfileDetail", testProfile);
}
it may be a bit late but if you check out this blog, and download his code, you will see his use of jquery to create a modal pop up from a partial view.