I have a Kendo UI datepicker angular directive in Typescript. When I place 2 directives on one page and comment the line scope["ngModel"] = _utc;, it works fine but doesn't solve my purpose. But when I uncomment the line and select the date in second directive, it clears the value of first calendar.
export class DateUtcDirective {
public static $inject: string[] = ["AuthService", "propBagFilter"];
public constructor(
authService: Services.AuthService,
propBagFilter: Function
) {
return <ng.IDirective>{
restrict: "A",
template:
"<div>" +
"<div class='input-group'>" +
"<input kendo-date-picker k-ng-model='ngModel' k-format='format' k-on-change='select()'/>" +
"</div>" +
"<div class='input-group' ng-show='isTimeAllowed' >" +
"<br />" +
"<input kendo-time-picker k-ng-model='ngModel' />" +
"</div>" +
"</div>",
replace: true,
scope: {
ngModel: "=",
paramObject: "="
},
link(scope: ng.IScope, element: any, attrs: any) {
var propBag = propBagFilter(scope["paramObject"].props);
var authPropBag = propBagFilter(authService.currentUser.props);
(<any>scope).select = function () {
if (!!propBag["IsUtc"]) {
console.log(scope);
var localDate = new Date(scope["ngModel"]);
var _utc = localDate.toUTCString();
scope["ngModel"] = _utc;
}
}
scope["isTimeAllowed"] = propBag["IsTimeAllowed"] || false;
scope["isUtc"] = propBag["IsUtc"] || false;
scope["format"] = authPropBag["ShortDatePattern"];
}
}
}
}
try giving id to
<input kendo-time-picker k-ng-model='ngModel' />
like
<input kendo-date-picker k-ng-model='ngModel' k-format='format' k-on-change='select()' id="abc1"/>
<input kendo-time-picker k-ng-model='ngModel' id="abc2" />
Related
I have a problem when trying to edit a post in a rest api called Spark, the project aims to simulate a social network, here is the code for the editing part of the post:
var abreEdit = function() {
$(document).on('click','.abre-editar' ,function(){
var id = $(this).data('id'),
title = $(this).data('title'),
categories = $(this).data('categories'),
content = $(this).data('content');
console.log(id);
$.confirm({
title: 'Editar Postagem',
columnClass: 'col-md-12',
content: '' +
'<form action="javascript:void(0);" class="form-novo-cliente">' +
'<div class="form-group">' +
'<label>Título*</label>' +
'<input type="text" placeholder="Informe o título" maxlength="100" name="titulo" class="titulo form-control" required value="'+title+'"/>' +
'</div>' +
'<div class="form-group">' +
'<label>Conteúdo*</label>' +
'<textarea name="conteudo" id="conteudo" class="form-control" rows="3">'+content+'</textarea>'+
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label>Categorias</label>' +
'<input type="text" placeholder="Informe as Categorias" maxlength="80" name="categorias" class="categorias form-control" value="'+categories+'" />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Salvar',
btnClass: 'btn-green',
action: function () {
var titulo = this.$content.find('.titulo').val(),
conteudo = this.$content.find('#conteudo').val(),
categorias = this.$content.find('.categorias').val(),
form = this.$content.find('form');
if(!titulo){
$.alert('Informe o Título!');
return false;
}
if(!categorias){
$.alert('Informe ao menos uma categoria!');
return false;
}else{
var v_categorias = [];
v_categorias = categorias.split(' ');
}
if(!conteudo){
$.alert('Informe o conteúdo!');
return false;
}
var array = {'id': id,
'title': titulo,
'content':conteudo,
'categories': v_categorias};
var json = JSON.stringify(array);
console.log(json);
var ajax = new XMLHttpRequest();
// Arrow request type: Post and the API URL
ajax.open("PUT", "https://localhost:4567/postagem", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Set request parameters and send the request
ajax.send(json);
// Cria um evento para receber o retorno.
ajax.onreadystatechange = function() {
// If the state is 4 and the http.status is 200, it is because the request was successful.
if (ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText;
$.confirm({
title: 'Sucesso',
columnClass: 'small',
content: 'Postagem alterada no ORKUT!',
buttons: {
formSubmit: {
text: 'OK',
btnClass: 'btn-green',
action: function () {
window.location.reload();
}
}
}
});
}
}
}
},
enter image description here
I try to edit, save, but don't edit via the "put" method in Spark, there is something I can do to make this part functional.
enter image description here
I have a collection of beacons that I want to show on a map. I want their positions to be synchronized between all instances of the application.
That is, when I move a beacons to another position I want this change to be reflected in the other instances of the application.
This using the Parse javascript SDK in its version 1.11.0.
I have defined the following Parse model, which represents each object in the collection saved on the server:
var Baliza = Parse.Object.extend("Balizas");
Baliza.prototype.show = function(){
var self = this;
var start= '<div class="row" style="width: 350px;">\n' +
' <div class="control-group" id="fields">\n' +
' <label class="control-label" style="text-align: center;" for="field1">Introducir Mac Asociadas a Ese Punto</label>\n' +
' <div class="controls">\n' +
' <form id="form" role="form" autocomplete="off">';
var tmp = '';
tmp = tmp + '<div class="entry input-group col-xs-12">\n' +
' <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[0]+'">\n' +
' <span class="input-group-btn">\n' +
' <button baliza-id='+self.id+' class="btn btn-success btn-add" type="button">\n' +
' <span class="glyphicon glyphicon-plus"></span>\n' +
' </button>\n' +
' </span>\n' +
' </div>';
if (self.get("mac").length>1){
for (var i=1; i<self.get("mac").length; i++) {
tmp = tmp + '<div class="entry input-group col-xs-12">\n' +
' <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[i]+'">\n' +
' <span class="input-group-btn">\n' +
' <button baliza-id='+self.id+' class="btn btn-remove col-xs-12" type="button">\n' +
' <span class="glyphicon glyphicon-minus"></span>\n' +
' </button>\n' +
' </span>\n' +
' </div>';
}
}
var end = '</form>\n' +
' <br>\n' +
' <button type="button" baliza-id='+self.id+' class="btn btn-block btn-info btn-sm ">Salvar</button>\n' +
' <button type="button" baliza-id='+self.id+' class="btn btn-block btn-danger btn-sm ">Eliminar</button>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
//console.log('impirmiendo marker');
//console.log(this.marker);
console.log("Localización -> ", self.get("localizacion"));
if(self.marker != null) {
self.marker.setLatLng(new L.LatLng(self.get("localizacion").latitude, self.get("localizacion").longitude),{draggable:'true'});
} else {
self.marker = new L.marker([ self.get("localizacion").latitude, self.get("localizacion").longitude], {
icon: L.AwesomeMarkers.icon({icon: 'certificate', prefix: 'glyphicon', markerColor: 'blue'}),
draggable: 'true'
}).bindPopup("", {maxWidth: 560});
self.marker.on('dragend', function(event){
var position = event.target.getLatLng();
console.log("Notify new Location -> ", position.lat, position.lng);
//Enviamos El Dato a Parse
this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
this.save(null, {
success: function (balizaSaved) {
console.log("Baliza Guardad con éxito: ", balizaSaved);
},
error: function (baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}.bind(this));
map.addLayer(self.marker);
}
self.marker.getPopup().setContent(start+tmp+end);
};
The code responsible for notifying the change of position in the map is the following:
self.marker.on('dragend', function(event){
var position = event.target.getLatLng();
console.log("Notify new Location -> ", position.lat, position.lng);
//Enviamos El Dato a Parse
this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
this.save(null, {
success: function (balizaSaved) {
console.log("Baliza Guardad con éxito: ", balizaSaved);
},
error: function (baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}.bind(this));
The subscription was created as follows,
var query = new Parse.Query(Baliza);
var subscription = query.subscribe();
var mapaBalizasParse = new Map();
// After specifying the Monster subclass...
//Parse.Object.registerSubclass('Balizas',Baliza);
subscription.on('create', function (balizaCreated) {
console.log("New baliza created -> ", balizaCreated.toJSON());
var baliza = new Baliza(balizaCreated.toJSON());
baliza.show();
mapaBalizasParse.set(baliza.id, baliza);
});
subscription.on('update', function (balizaSaved) {
console.log('BALIZA ACTUALIZADA -> ', balizaSaved.toJSON());
var baliza = mapaBalizasParse.get(balizaSaved.id);
baliza.set("mac", balizaSaved.get("mac"));
baliza.set("localizacion", balizaSaved.get("localizacion"));
baliza.show();
});
subscription.on('delete', function (baliza) {
//console.log(mapaBalizasParse.get(baliza.id));
map.removeLayer(mapaBalizasParse.get(baliza.id).marker);
mapaBalizasParse.delete(baliza.id);
});
subscription.on('leave', function (balizaLeave) {
console.log('Leave called -> ', balizaLeave.id, balizaLeave.get("localizacion"));
});
subscription.on('enter', function (balizaCalled) {
console.log('Enter called -> ', balizaCalled.id, balizaCalled.get("localizacion"));
});
Each time I click on a position on the map I create a Beacons as follows:
function onMapClick(e) {
var baliza = new Baliza();
baliza.set("localizacion",new Parse.GeoPoint(e.latlng.lat, e.latlng.lng));
baliza.set("mac",["11:22:33:44:55:10"]);
baliza.set("editando",true);
baliza.save(null, {
success: function(baliza) {
//Añadimos La Baliza Al Mapa Interno
//mapaBalizasParse.set(baliza.id,baliza);
//baliza.show();
},
error: function(baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}
The list of currently registered "beacons" is shown as follows:
query.find({
success: function(results) {
console.log("Total Balizas -> " + results.length);
for (var i = 0; i < results.length; i++) {
var currentBaliza = results[i];
console.log("Baliza " + i + " -> ", currentBaliza);
currentBaliza.show();
mapaBalizasParse.set(currentBaliza.id, currentBaliza);
}
},
error: function(error) {
console.log("Error: " + error.code + " " + error.message);
}
});
The problem is if for example I move the beacon from position ( latitude: 40.961229844235234, longitude: -5.669621229171753 ) to another point in the map (latitude: 40.9604196476232, longitude: -5.6707102060318)
The other instances of the application receive in the update event the old version of the object, its location field has not changed ( latitude: 40.961229844235234, longitude: -5.669621229171753 )
Someone can tell me what I'm doing wrong in the code.
Thanks in advance.
I have been doing some test with minimal configuration and this is that I saw:
In the callback for loading all beacons in the map set you use this code:
var beacon = new Baliza({id: baliza.id, localizacion:
baliza.get("localizacion") , mac: baliza.get("mac"), editando:
baliza.get("editando")});
but when you add a new beacon created in the callback of 'create' event, you use this one:
var beacon = new Baliza();
beacon.id = baliza.id;
beacon.localizacion = baliza.get("localizacion");
beacon.mac = baliza.get("mac");
beacon.editando = baliza.get("editando");
In my tests, if you use the first code the beacons updates normally, but if you use the second one, a old version of the beacon is logged in javascript console.
It seems that something special happens in the empty constructor that you are not including in the overloaded constructor.
I hope that it helps you. :)
Here my complete code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple test parse JS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<input type="text" id="txtIndex" class="textbox" value="1">
<button type="button" class="btn-add">Add beacon</button>
<button type="button" class="btn-modify">Modify beacon</button>
<button type="button" class="btn-remove">Remove beacon</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://unpkg.com/parse#1.11.0/dist/parse.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Own JS-->
<script src="./js/demo_parse.js"></script>
</body>
</html>
JS
var mapBeacons = new Map();
var query;
var subscription;
var Baliza;
function loadAllBeacons(){
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
//Vamos Creando Los Objetos Que Recibimos
var beacon = new Baliza();
beacon.id = results[i].id;
beacon.localizacion = results[i].get("localizacion");
beacon.mac = results[i].get("mac");
mapBeacons.set(beacon.id,beacon);
}
},
error: function(error) {
console.log("Error: " + error.code + " " + error.message);
}
});
}
function modifyBeacon(){
var key = $("#txtIndex").val();
var baliza = mapBeacons.get(key);
var my_chance = new Chance();
var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())
baliza.set("localizacion",randomLocation);
baliza.save(null, {
success: function(baliza) {
// Execute any logic that should take place after the object is saved.
mapBeacons.set(baliza.id,baliza);
},
error: function(baliza, error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and message.
alert('Failed to remove new object, with error code: ' + error.message);
}
});
}
function removeBeacon(){
var key = $("#txtIndex").val();
var baliza = mapBeacons.get(key);
baliza.destroy({
success: function(myObject) {
// The object was deleted from the Parse Cloud.
//map.removeLayer(baliza.marker);
//mapaBalizasParse.delete($(this).attr('id'));
console.log("Beacon removed sucessfully");
console.log(myObject);
},
error: function(myObject, error) {
// The delete failed.
// error is a Parse.Error with an error code and message.
}
});
}
function addNewBeacon(){
var baliza = new Baliza();
var my_chance = new Chance();
var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())
baliza.set("localizacion",randomLocation);
baliza.set("mac",["11:22:33:44:55:10"]);
baliza.set("editando",true);
baliza.save(null, {
success: function(baliza) {
console.log("OnSave Beacon saved sucessfully");
console.log(baliza);
},
error: function(baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}
$(function() {
console.log( "ready!" );
//Init parse
Parse.initialize("6xuPkPgqEfCdzXwaxAfUuKbTAglJL5ALa1mmY8de");
Parse.serverURL = 'http://encelocalizacion.com:1337/parse';
//Objeto Ppara interacturar con el Objeto Baliza de Parser
Baliza = Parse.Object.extend("Balizas", {
/**
* Instance properties go in an initialize method
*/
id: '',
localizacion: '',
mac:'',
marker:'',
popup:'',
initialize: function (attr, options) {
}
});
query = new Parse.Query(Baliza);
subscription = query.subscribe();
// Subscription for create
subscription.on('create', function (baliza) {
// TODO CHANGE THIS
var beacon = new Baliza({id: baliza.id, localizacion: baliza.get("localizacion") , mac: baliza.get("mac"), editando: baliza.get("editando")});
/*
var beacon = new Baliza();
beacon.id = baliza.id;
beacon.localizacion = baliza.get("localizacion");
beacon.mac = baliza.get("mac");
beacon.editando = baliza.get("editando");
*/
mapBeacons.set(beacon.id,beacon);
console.log("New beacon added to BBDD")
console.log(mapBeacons)
});
// Subscription for update
subscription.on('update', function (kk) {
console.log('Updated beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude + " " + kk.get("mac")+ " " + kk.get("id"));
});
// Subscription for delete
subscription.on('delete', function (kk) {
mapBeacons.delete(kk.id);
console.log('Deleted beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude + " " + kk.get("mac"));
console.log(mapBeacons)
});
loadAllBeacons();
$(document).on('click', '.btn-add', function(e) {
addNewBeacon();
}).on('click', '.btn-remove', function(e) {
removeBeacon();
return false;
}).on('click', '.btn-modify', function(e) {
modifyBeacon();
});
});
I'd like to convert following HTML(json, ajax) Code in C# Winform application.
I'll try it by using JSON.Net, but I'm not familiar with C# WinForm.
I want to binding ajax result value after the user click a button.
How do I this??
html code following that :
Thank you.
// format string
function J2String(object) {
var results = [];
for (var property in object) {
var value = object[property];
if (value != null){
results.push(property.toString() + ': ' + value );
}
}
return '{' + results.join(', ') + '}';
}
// format ajax result data
formatstring = function (text) {
if (arguments.length <= 1) return text;
for (var i = 0; i <= arguments.length - 2; i++) {
text = text.replace(new RegExp("\\{" + i + "\\}", "gi"),
arguments[i + 1]);
}
return text;
}
// return data [ GET method ]
function GetAjaxData(){
RcvData.value = "";
$.ajax({
url:"http://127.0.0.1",
type:"GET",
data: { "REQ": formatstring ("AA^^1000^^^^23^1234567^W1234567890^^00000081") },
dataType: "jsonp",
jsonp: "callback",
success: function(data){
RcvData.value = J2String(data);
}
});
}
<body>
Value : <input type="text" style="width:80%" id="RcvData"><br/>
<form name="tform" method="post">
<input type="button" value="Send" onClick="GetAjaxData()" >
</body>
[ .net framework 4.5 ]
~~~ using ~~ ;
using System.Net;
using System.Net.Http;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
private async void btnTest_Click(object sender, EventArgs e){
string reqData = "AA^^1000^^^^23^1234567^W1234567890^^00000081";
textBox1.Text = await GetAjaxData(reqData);
}
private async Task<string> GetAjaxData(string reqData){
HttpClient client = new HttpClient();
HttpResponseMessage response = await client.GetAsync("http://localhost/?callback=jsonp123456&REQ=" + reqData );
response.EnsureSuccessStatusCode();
byte[] buf = await response.Content.ReadAsByteArrayAsync();
Encoding myEncoding = Encoding.GetEncoding("utf-8");
string data = myEncoding.GetString(buf, 0, buf.Length - 1);
dynamic obj = JsonConvert.DeserializeObject(data );
string _parseData = obj.Code
+ "^" + obj.Name
+ "^" + obj.RespCode
+ "^" + obj.Remark;
var result = await Task.FromResult<string>(_parseData);
return result;
}
I have a javascript that must generate in runtime.The text of script is generate in controller class :
private string mapString
{
get
{
Locations loc = new Locations();
string appPath = Request.ApplicationPath;
loc.ReadXml(Path.Combine(Request.MapPath(appPath) + "\\App_Data", "Locations.xml"));
StringBuilder sb = new StringBuilder();
for (int i = 0; i < loc.Specfications.Count; i++)
{
sb.Append("var myLatLng" + i.ToString() + "= new google.maps.LatLng(" + loc.Specfications[i].Y.ToString() + "," +
loc.Specfications[i].X.ToString() + ");");
sb.Append(" var beachMarker" + i.ToString() + " = new google.maps.Marker({position: myLatLng" + i.ToString() + ",map: map,icon: image,title:'" + loc.Specfications[i].Title + "'});");
....
...
...
ViewData["MapString"] = mapString;
When I use it in script tag :
<script type="text/javascript">
function initialize() {
#Server.HtmlDecode(ViewData["MapString"].ToString())
}
</script>
It dosen't return a true text and it retruns something like this:
contentString0 = '<table width="100%" style="font-family: tahoma; text-align: right; font
**update : The site didn't show my question correctly ,I want to show "'<" but it show "'<"
but it must return :
contentString0 ='
you see that it convert "'<" to "'<" .
But when I use : #Server.HtmlDecode(ViewData["MapString"].ToString()) out of script tag ,all things is OK.
You may want to do it this way, which I think is going to be more flexible than generating code in your controller :
Controller action :
public JsonResult GetCoords()
{
// your code here - im putting a generic result you may
// need to put some logic here to retrieve your location / locations
var result = new { lon = "51.0000", lat = "23.0000" };
return Json(result, JsonRequestBehavior.AllowGet);
}
in your view add :
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('/YourController/GetCoords', function (jsonData) {
var lon = jsonData.lon;
var lat = jsonData.lat;
yourGoogleMapFunction(lon, lat);
});
});
</script>
I found a tutorial on how to create editable regions on a page using AJAX.
This is great, except it was written for a single element with a unique ID. I'd like to be able to click on multiple elements on the same page and have them also be editable (e.g., I'd like to alter the script below so it works not with a single element, but with multiple elements of a particular class).
Here is my HTML:
<h2>Edit This</h2>
<p class="edit">This is some editable content</p>
<p class="edit">This is some more editable content</p>
<p class="edit">I could do this all day</p>
Here is the JS file I'm working with (I updated the script per Rex's answer below): This script is, unfortunately, not working - can anyone point me in the right direction?
Event.observe(window, 'load', init, false);
function init() {
makeEditable('edit');
}
function makeEditable(className) {
var editElements = document.getElementsByClassName(className);
for(var i=0;i<editElements.length;i++) {
Event.observe(editElements[i], 'click', function(){edit($(className))}, false);
Event.observe(editElements[i], 'mouseover', function(){showAsEditable($(className))}, false);
Event.observe(editElements[i], 'mouseout', function(){showAsEditable($(className), true)}, false);
}
}
function showAsEditable(obj, clear) {
if (!clear) {
Element.addClassName(obj, 'editable');
} else {
Element.removeClassName(obj, 'editable');
}
}
function edit(obj) {
Element.hide(obj);
var textarea ='<div id="' + obj.id + '_editor"><textarea cols="60" rows="4" name="' + obj.id + '" id="' + obj.id + '_edit">' + obj.innerHTML + '</textarea>';
var button = '<input type="button" value="SAVE" id="' + obj.id + '_save"/> OR <input type="button" value="CANCEL" id="' + obj.id + '_cancel"/></div>';
new Insertion.After(obj, textarea+button);
Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
}
function cleanUp(obj, keepEditable) {
Element.remove(obj.id+'_editor');
Element.show(obj);
if (!keepEditable) showAsEditable(obj, true);
}
function saveChanges(obj) {
var new_content = escape($F(obj.id+'_edit'));
obj.preUpdate = obj.innerHTML // stow contents prior to saving in case of an error
obj.innerHTML = "Saving…";
cleanUp(obj, true);
var success = function(t){editComplete(t, obj);}
var failure = function(t){editFailed(t, obj);}
var url = 'http://portal.3roadsmedia.com/scripts/edit.php';
var pars = 'id=' + obj.id + '&content=' + new_content + '&pre=' + obj.preUpdate;
var myAjax = new Ajax.Request(url, {method:'post',
postBody:pars, onSuccess:success, onFailure:failure});
}
function editComplete(t, obj) {
obj.innerHTML = t.responseText;
showAsEditable(obj, true);
}
function editFailed(t, obj) {
obj.innerHTML = 'Sorry, the update failed.';
cleanUp(obj);
}
The Event.observe method currently attaches to a single element with the ID specified. You should change this to iterate over a collection of elements located by classname and attach to each of them. According to the Prototype documentation, you can provide an element object as the first parameter, instead of an ID.
Currently, id is a string:
function makeEditable(id) {
Event.observe(id, 'click', function(){edit($(id))}, false);
//...
Which means Event.observe is attaching to the click event of the element with the ID provided. You want to attach to all elements with a class. Try:
function makeEditable(className) {
var editElements = document.getElementsByClassName(className);
for(var i=0;i<editElements.length;i++) {
Event.observe(editElements[i], 'click', function()
//...
}
//...