Polymer REST backend - rest

I have a backend written in golang exposing /api/list interface. It returns lists when called from GET and create new list when it receive POST with parameters.
I can read it with standard core-ajax element, there is a huge amount of examples to do that.
What I didn't understood is what should I do, when I want to create new element through POST? I read the documentation and searched for sample code for half day, can you point me to right direction?
//
Ok, thanks for help, it was really only bad format of json I was sending. There is still dark cloud in my mind telling that I misunderstood something from conceptual view. Is this:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<polymer-element name="channels-service" attributes="channels">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ch_load"
auto
url="/api/list"
on-core-response="{{channelsLoaded}}"
handleAs="json">
</core-ajax>
<core-ajax id="ch_update"
url="/api/list"
on-core-response="{{channelsUpdated}}"
method="POST"
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('channels-service', {
created: function() {
this.channels = [];
},
channelsLoaded: function() {
// Make a copy of the loaded data
this.channels = this.$.ch_load.response.slice(0);
},
newChannel: function(ch_name) {
// this.$.ch_update.body = "ch_name";
this.$.ch_update.body = '{"Name":"pitchalist2"}'
this.$.ch_update.go();
},
channelsUpdated: function() {
//window.log(this.$.ch_update.response.slice(0));
}
});
</script>
</polymer-element>
correctly written data layer? It looks very counterintuitive to me and in examples using local data storage it works way easier.

You can send a POST request by setting the method attribute (method="POST") and the body attribute (body='{"my":"data"}'). Indeed you need a second iron-ajax element for this request.
See the attributes section in the iron-ajax documentation.

Related

Google Analytics 4 (gtag js) 'set' command not adding data to events

I'm trying to add data to each event I send in GA4 via javascript by using the 'set' command:
https://developers.google.com/tag-platform/gtagjs/reference#set
From those docs, it appears to be similar to Serilog Enrichment, but it doesn't appear to work and I don't see this data coming through.
I'm using localhost + Google Analytics Debugger chrome extension. Then in the Analytics > Configure > DebugView I see the custom event 'hello-world' and the property 'test', but I don't see the data I add via the "set" command.
GA DebugView
I use the set command for 2 calls - first is the "user_id" property that does work. That must be a special case, since GA treats that differently. The 2nd is for the custom object that doesn't work.
Console shows some output for both set command calls, but nothing to tell me that something has succeeded or failed
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SOMECODE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
// Set enrichment properties for every event "on this page"
// https://developers.google.com/tag-platform/gtagjs/reference#set
gtag('set', {
'foo': 'bar',
});
// Set the measurement id
// https://developers.google.com/analytics/devguides/collection/gtagjs/setting-values
gtag('config', 'G-SOMECODE');
//Set the GA4 user_id and keep it set for all events
gtag('set', {
'user_id': 'a24b935c-03cd-47f0-af68-c60a68b31303'
});
gtag('event', 'hello-world', {
'test': true
});
</script>
<title>Html Delivery</title>
<script type="text/javascript">
function myFunction() {
// Event with nested data test. It doesnt seem to display nicely
gtag('event', 'button-click-nested', {
'data': {
'type': 'nextButton'
}
});
gtag('event', 'button-click', {
'type': 'nextButton'
});
}
function LinkFunction() {
console.log("link click");
gtag('event', 'link click', {
'type': 'link'
});
}
</script>
</head>
<body>
<button onclick="myFunction()">Next</button>
<a id="myLink" href="#" title="Click to do something" onclick="LinkFunction()">link text</a>
</body>
</html>
I've tried to move the calls to above/below the config command, but it makes no difference either.
There is a similar question, but my rep wont let me comment on it to see if its still the case. The accepted answer doesn't really help me since I wanted to be able to add any arbitrary data in this way.
I have tried to setup a custom metric for this in GA (im not using GTM), but still. No data comes through.
Does this just not work?

How to get popcorn.js working on dynamically loaded content?

I've followed this tutorial:
http://popcornjs.org/popcorn-101
Tutorial Code
<!doctype html>
<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#ourvideo");
// add a footnote at 2 seconds, and remove it at 6 seconds
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
pop.play();
}, false);
</script>
</head>
<body>
<video height="180" width="300" id="ourvideo" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnotediv"></div>
</body>
</html>
And can run this locally.
In Firebug, I see the footnote div update from:
<div style="display: none;">Pop!</div>
to:
<div style="display: inline;">Pop!</div>
On a live site however, I am loading my page html from a MongoDB database via Ajax and the footnote display functionality doesn't seem to be working.
Thinking this might have something to do with needing to 're-initialise' after the content has loaded, I've added the popcorn.js functionality to a function called on click:
Function
<script>
function myPopcornFunction() {
var pop = Popcorn("#ourvideo");
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
pop.play();
}
</script>
Call
$(document).on("click","a.video", function (e) {
// passing values to python script and returning results from database via getJSON()
myPopcornFunction();
});
This doesn't seem to have an effect.
No footnotediv content is loaded when the video plays.
The video is also not playing automatically.
It's hard to reproduce in jsFiddle with dynamic content, so is there a generic approach to ensuring popcorn works with dynamically loaded content?
Firebug Error on click
TypeError: k.media.addEventListener is not a function
It seems to have been a timing issue in that originally I had made a call to the myPopcornFunction() outside of the function which loaded the content (a getJSON() function). When I placed the call within the same block as the getJSON() function, things seemed to maintain their 'order' and popcorn could work correctly.
Before
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
});
e.preventDefault();
myPopcornFunction(); // the call WAS here
});
After
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
myPopcornFunction(); // the call is now HERE
});
e.preventDefault();
});
The myPopcornFunction() was the same as in the original post.

how to create dojo data onclick event for dojo dynamic tree in zend framework for programatic approach

i am new to Zend framework and dojo.i have created dynamic tree structure using dojo in zend framework but i want to make on click of each folder and element of tree structure to naigation to another form by writing a function .Pleas check my code and help me i have gone through some dojo on click event link and could not solve ..
<html>
<head>
<title> Tree Structure </title>
<link rel="stylesheet" href=/dojo/dijit/themes/ claro/claro.css" />
<script type="text/javascript" src="/ dojo/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true" >
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer")
dojo.require("dijit.form.Button");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.Tree");
dojo.require("dojo.parser");
function myTree( domLocation ) {
var store = new dojo.data.ItemFileReadStore({url: "http://localhost/CMTaSS_module1.0/public/dojo/cbtree/datastore/Family-1.7.json"});
var treeModel = new dijit.tree.TreeStoreModel({
store: store,
query: { name:'John'}
});
var tree = new dijit.Tree( {
model: treeModel,
id: "mytree",
openOnClick: true
});
tree.placeAt( domLocation );
}
var tree_obj = new dijit.Tree({
model: treeModel
},
"tree_obj");
dojo.connect(tree_obj, 'onClick', function(item, node, evt){
console.log("Item", item);
console.log("Node", node);
console.log("Event", evt);
//console.log('node: ' +tree_obj.getLabel(node));
//console.log('event: ' +tree_obj.getLabel(evt));
console.log('identifier: ' + tree_obj.getLabel(item))
});
</script>
</head>
<body class="claro"><br><br><br>
<div id="CheckboxTree">
<script type="text/javascript">
myTree("CheckboxTree");
</script>
</div>
</body>
</html>
Looks like your code sample is not formatted correctly as some of the logic is outside the myTree function. I used jsbeautifier.org to confirm this.
Other notes...
You should wait until dojo is ready. Either use dojo.addonload or, create a widget and reference that widget in the html portion of your code. Widgets are amazing and are what make dojo great, so getting a grasp on how they work will pay dividends.
Also note that if creating a widget programmatically (new dijit.Tree), you should call startup on it. This is not needed when creating it declaratively (inline html).
I hope this helps.

Unbind view model from view in knockout

I'm looking for unbind functionality in knockout. Unfortunately googling and looking through questions asked here didn't give me any useful information on the topic.
I will provide an example to illustrate what kind of functionality is required.
Lets say i have a form with several inputs.
Also i have a view model binded to this form.
For some reason as a reaction on user action i need to unbind my view model from the form, i.e. since the action is done i want all my observables to stop reacting on changes of corresponding values and vise versa - any changes done to observables shouldn't affect values of inputs.
What is the best way to achieve this?
You can use ko.cleanNode to remove the bindings. You can apply this to specific DOM elements or higher level DOM containers (eg. the entire form).
See http://jsfiddle.net/KRyXR/157/ for an example.
#Mark Robinson answer is correct.
Nevertheless, using Mark answer I did the following, which you may find useful.
// get the DOM element
var element = $('div.searchRestults')[0];
//call clean node, kind of unbind
ko.cleanNode(element);
//apply the binding again
ko.applyBindings(searchResultViewModel, element);
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="knockout-2.2.1.js"></script>
<script type="text/javascript" src="knockout-2.2.1.debug.js"></script>
<script type="text/javascript" src="clickHandler.js"></script>
</head>
<body>
<div class="modelBody">
<div class = 'modelData'>
<span class="nameField" data-bind="text: name"></span>
<span class="idField" data-bind="text: id"></span>
<span class="lengthField" data-bind="text: length"></span>
</div>
<button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button>
<button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button>
<button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button>
</div>
</body>
</html>
#Mark Robinson gave perfect solution, I've similar problem with single dom element and updating different view models on this single dom element.
Each view model has a click event, when click happened everytime click method of each view model is getting called which resulted in unnecessary code blocks execution during click event.
I followed #Mark Robinson approach to clean the Node before apply my actual bindings, it really worked well.
Thanks Robin.
My sample code goes like this.
function viewModel(name, id, length){
var self = this;
self.name = name;
self.id = id;
self.length = length;
}
viewModel.prototype = {
showModelData: function(data){
console.log('selected model is ' + data);
if(data=='model1'){
ko.cleanNode(button1[0]);
ko.applyBindings(viewModel1, button1[0]);
console.log(viewModel1);
}
else if(data=='model2'){
ko.cleanNode(button1[0]);
ko.applyBindings(viewModel3, button1[0]);
console.log(viewModel2);
}
else if(data=='model3'){
ko.cleanNode(button1[0]);
ko.applyBindings(viewModel3, button1[0]);
console.log(viewModel3);
}
}
}
$(document).ready(function(){
button1 = $(".modelBody");
viewModel1 = new viewModel('TextField', '111', 32);
viewModel2 = new viewModel('FloatField', '222', 64);
viewModel3 = new viewModel('LongIntField', '333', 108);
ko.applyBindings(viewModel1, button1[0]);
});

Determine if a dijit's DOM has finished loading

Is there a way to query a dojo dijit to tell if the dijit's DOM has finished loading?
I believe if the dijit's "domNode" property is set, the DOM for the widget has been created. The widget may or may not be attached to the larger DOM, that can be a separate step. Checking domNode.parentNode as being a real element might help, but it is no guarantee that parentNode is also in the live document.
I believe something like this might work, although I didn't test it :
if (yourWidget.domNode) {
// here your widget has been rendered, but not necessarily its child widgets
} else {
// here the domNode hasn't been defined yet, so the widget is not ready
}
Dijit widgets' rendering is handled through extension points, called in that order :
postMixinProperties
buildRendering
postCreate <== at this point, your widget has been turned into HTML and inserted into the page, and you can access properties like this.domNode. However, none of the child widgets has been taken care of
startup : this is the last extension point called, after all the child widgets have been drawn
(This is the explanation of the widgets' lifecycle on "Mastering Dojo").
EXAMPLE :
<html>
<head>
<script src="path/to/your/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.lang.aspect");
dojo.require("dijit.form.Button");
// Define your aspects
var startupAspect = {
before : function() {console.debug("About to execute the startup extension point");},
after : function() {console.debug("Finished invoking the startup extension point");},
};
function traceWidget(theWidget) {
// Attach the aspect to the advised method
dojox.lang.aspect.advise(theWidget, "startup", startupAspect);
}
</script>
</head>
<body>
<button dojoType="dijit.form.Button" type=button">
dijitWidget
<script type="dojo/method" event="postCreate">
traceWidget(this);
</script>
<script type="dojo/method" event="startup">
console.debug("Inside startup");
</script>
</button>
</body>
</html>