There are some nodes that get data from AJAX call in my jsTree.
How can I refresh the data and NOT by reloading the whole tree?
the best would be simple click on the node I wish to refresh
context menu is ok too
How about this?
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jstree.js"></script>
<script>
var treeConfig = {
"json_data" : {
"data" : [{
"data" : "Root",
"state" : "closed",
"children" : ""
}],
"ajax" : {
"url" : "http://localhost/tree.json",
"data" : function (node) {
return { query : "Value" };
}
}
},
"plugins" : [ "themes", "json_data", "ui" ],
};
$(document).ready(function(){
$("#treeContainer").jstree(treeConfig);
$('#treeContainer a').live('click',function(){
var tree = jQuery.jstree._reference("#treeContainer");
var currentNode = tree._get_node(null, false);
tree.refresh(currentNode);
});
});
</script>
</head>
<body>
<div id="treeContainer"></div>
</body>
</html>
Here's what I'm doing:
using the JSON data plugin (but the concept is similar for HTML and XML plugins)
loading the initial tree node ("Root") from the data config object
setting the AJAX config object so all other nodes request their child data via ajax, when initially opened (applies to any node where 'state' is 'closed' and 'children' is 'empty')
using the AJAX data function to pass the correct query string to get relevant data for the node being opened. My example always fetches http://localhost/tree.json?query=Value but you probably want to do something like set Value to the node id so the server sends back relevant data.
So far this makes an ajax request for the node data only the first time the node is opened. The final step is:
create a click function which causes a single node to refresh its data every time it is clicked
Related
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?
I'm working on a script that will refresh ads after 30 seconds of engaged on screen time. What I'd like to do is track in AdManager how these refreshed ads perform and how much they are adding to my bottom line.
I'd like to set up a key value like "reloaded" that has a true of false value indicating whether that impression was an initial load of the ad unit or a refreshed load after 30 seconds of engaged time.
I can't seem to figure out how to do this. It looks like you only have the option of setting key values at the page or ad unit level, not the impression. Anyone know how to achieve this?
Thanks!
You are able to add a key and an attached value to a specific slot before refreshing it. Then, you can use it after the slot refreshed. Below is the demonstration :
Step 1 : Page setup
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
var slots = {}
googletag.cmd.push(function() {
slots['banner'] = googletag.defineSlot('/adpath', [[728, 90]], 'banner').addService(googletag.pubads()).setTargeting('key1', 'value1');
googletag.pubads().enableSingleRequest();
googletag.pubads().setCentering(true);
googletag.pubads().collapseEmptyDivs(true);
googletag.enableServices();
});
</script>
<div id='banner'>
<script>
googletag.cmd.push(function() {
googletag.display('banner');
});
</script>
</div>
Step 2 : Check the attached key to the slot
//in your console
slots['banner'].getTargetingKeys()
//should log >> Array [ "key1" ]
Step 3 : add a new key in js
<script>
slots['banner'].setTargeting('reloaded','true')
</script>
Step 4 : reload the slot
<script>
googletag.pubads().refresh(slots[0])
</script>
Step 5 : Check the attached key to the slot
//in your console
slots['banner'].getTargetingKeys()
//should log >> Array [ "key1", "reloaded" ]
With this set up, you are able to identify / target the "reloaded = true" inventory within your Google Ad Manager interface.
Related documentation :
GPT setTargeting
GPT getTargetingKeys
GPT refresh
Hope this helps.
I implement content filter with ember.js and I need to save filter state in URL. How can I do this?
I reed this section http://guides.emberjs.com/v1.12.0/routing/query-params/ and try to do that code
http://output.jsbin.com/cixama/4
But choice saved in URL as
http://output.jsbin.com/cixama/4#/?pull=undefined
Why undefined?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic select on Ember.js</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.18/ember-data.prod.js"></script>
</head>
<body>
<script type="text/x-handlebars" id="index">
<form>
{{view "select" content=model
optionValuePath="content.number"
optionLabelPath="content.title"
value=pull
prompt="Choice option"}}
</form>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create({});
// ROUTES
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
}
});
// CONTROLLERS
App.IndexController = Ember.Controller.extend({
queryParams: ['pull'],
pull: null,
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create({});
// ROUTES
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
}
});
// CONTROLLERS
App.IndexController = Ember.Controller.extend({
queryParams: ['pull'],
pull: null,
});</script></body>
</html>
Your problem is that the number property of the payload is an integer, while the query param is a string.
When you select an item from the dropdown, a numeric value gets written into the pull property. But the query params mechanism replaces it with a string. The dropdown sees the value changed, looks up a new value and finds nothing. It assumes that no value was chosen and sets pull to undefined.
One solution is to use two properties: one will store the original numeric value, the other will be a getter/setter computed property that would convert between numeric and text.
<form>
{{view "select" content=model
optionValuePath="content.number"
optionLabelPath="content.title"
value=currentPull
prompt="Choice option"}}
</form>
<p>currentPull: {{currentPull}}</p>
App.IndexController = Ember.Controller.extend({
queryParams: ['pull'],
pull: Ember.computed('currentPull', {
get: function() {
return this.get('currentPull');
},
set: function(key, value) {
this.set('currentPull', parseInt(value, 10));
return value;
},
}),
currentPull: null,
});
Demo: http://output.jsbin.com/redefi/2
But a better solution would be to introduce a model layer into your app. You'd have a pull-request entity with its attributes corresponding to properties of the payload. Then you can handle the number↔text conversion in the serializer, and your business logic will stay concise and expressive.
I am trying to display and update HLINEAR GAUGE fusionGadget pointer value. When I am dragging the pointer , the function FC_ChartUpdated is not being called. I have tried using RealtimeUpdateComplete eventListener too. But it displays error 'Object does not support property / method 'setAttribute''..Can you please tell me the reason?
We have to call that JS function or It will be called automatically when Gauge is updated?
Here is my code,
<html>
<head>
<title>FusionGadgets</title>
<script language="JavaScript" src="FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">FusionGadgets</div>
<script type="text/javascript">
var myChart = new FusionCharts("HLinearGauge.swf", "myChartId", "450", "120", "0", "0");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
<script>
FusionCharts("myChartId").addEventListener("RealtimeUpdateComplete" , myChartListener);
function myChartListener(){
alert('Hi.');
}
function FC_Rendered(DOMId)
{ //alert(Math.round(pointerValue));
//Check if DOMId is that of the chart we want
if (DOMId=="myChartId"){
//Get reference to the chart
var chartRef = FusionCharts(DOMId);
//Get the current value
var pointerValue = chartRef.getData(1);
//You can also use getDataForId method as commented below, to get the pointer value.
//var pointerValue = chartRef.getDataForId("CS");
//Update display
alert(Math.round(pointerValue));
}
}
</script>
</html>
Finally,After had been working for several hours,this issue has been resolved.These are the steps which made the issue was resolved...
1.passing registerWithJs value '1'.
var myChart1 = new FusionCharts("HLinearGauge.swf", "myChartId1", "450", "105", "0", "1");
2.Changed Flash Player Global Security Settings..
for more info
3. Chang the FusionCharts.js file to new version.
4.After had made these changes,I encountered with new issue,
chartRef.getData(1) gives javascript error (Object does not support the property/method).
So then I changed the code for getting chart reference
to
var chartRef = getChartFromId(DOMId);
from
var chartRef = FusionCharts(DOMId);
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>