I have implemented site catalyst for a single page website which contains a form. the form has two steps.
I have added below custom events.
event1 to count number of form views.
event2 to count number of people who completed step 1.
event3 to count number of people who completed step 2.
Since its a single page site and there are no page reloads between any operation, I was under an impression that in siteCat reports Metrics > Page Views count should be same as event 1 count.
But on all the days, Page views count is more than event 1 count.
Is my understanding wrong or is there any issue in implementation.?
Here the code on page's body
<script language="JavaScript" type="text/javascript">
s.pageName="<%= currentPage.getTitle() == null ? xssAPI.encodeForHTML(currentPage.getName()) : xssAPI.encodeForHTML(currentPage.getTitle()) %>"
s.server=""
s.channel="Form"
s.pageType=""
s.prop1="Form"
s.prop2=""
s.prop3=""
s.prop4=""
s.prop5=""
/* Conversion Variables */
s.campaign=s.Util.getCampOnce()
s.state=""
s.zip=""
s.events="event1"
s.products=""
s.purchaseID=""
s.eVar1=""
s.eVar2=""
s.eVar3=""
s.eVar4=""
s.eVar5="";
var s_code=s.t();if(s_code)document.write(s_code)
</script>
Below is the settings for the success event in the admin console for event1.
Type : counter,
Polarity : up is good,
Unique event recording : Always record event,
Participation : enabled.
Thanks in advance for any help.
I am attaching the screens of pulse for the reference.
Here is the code that trigger event2 and event3
//Step1 complete
if(validator.form() && ($("#applicantPincodeErrorMessage").val()=="") && ($("#firstcoapplicantPincodeErrorMessage").val()=="")){
s.linkTrackVars="eVar1";
s.linkTrackEvents="event2";
s.events="event2";
var purpouseDD = document.getElementById("Purpose");
var purpouse = purpouseDD.options[purpouseDD.selectedIndex].text;
s.eVar1=purpouse;
s.tl();
s.linkTrackVars="";
s.linkTrackEvents="";
showSecondpanel();
}
//Step2 complete
s.linkTrackVars="eVar1";
s.linkTrackEvents="event3";
s.events="event3";
s.tl();
s.linkTrackVars="";
s.linkTrackEvents="";
Related
I need to relaod a sj:tab in struts2-jquery 3.3.3, so far i tried:
Add a listenTopic to sj:tab, didn't work as i read it wasn't yet
implemented in that version
Upon any event, reload the tab like:
$('#myPanel').tabs("load", "#myTab");
It works and reloads, but some more event handlers bind and when i submit via sj:submit, it submits twice, i've tried to remove all event handlers with jquery before reload, but i doesn't make any difference. So the event handlers grow exponetially:
> $('#myPanel').tabs("load", "#myTab");
1 event handler per button
> $('#myPanel').tabs("load", "#myTab");
2
> $('#myPanel').tabs("load", "#myTab");
4 .. 16 .. 32
How do i kill all those event handlers in sj:submit?
This was probably a bad smell from me as i needed to change a tab upon a new 'state' in the app, so i thought this would be a good idea:
( ajax call fired by a sj:submit --> POST )
# in the server check if the state changed, if so returns success and the client asks to reload.
$.subscribe("change_state"){
...
$('#myPanel').tabs("load", "#myTab");
# (http GET new tab)
};
The tab loads smoothly, but to prevent the old events to fire i had to setup variables for each button
$.subscribe("change_state", function(event){
if (!reloaded){
$('#myPanel').tabs("load", "#myTab");
reloaded = 1;
}
)};
$.document.ready(function(){
reloaded = null;
});
If someone have the right design for this version of struts i'd gladly offer the 100 bounty
Is it possible to somehow change the query variables for query in progress? My idea is that I'm storing number of showed items in route state with variable called pageSize. Now when user opens one item and press back button in browser, I will show him exactly the page he has seen before.But route state persist also while refreshed so I want to listen to onReadyStateChange and if event CACHE_RESTORE_FAILED will be fired I want to change pageSize to initial size. Is it possible to somehow listen to this change on Route level?
After #chris comment adding some code:
Route: you can see how I'm getting pageSize from route state
<Route
path=":username"
prepareParams={(params, { location }) => {
const relayParams = params;
if(location.state && location.state.pageSize) {
relayParams.pageSize = location.state && location.state.pageSize;
}
return relayParams;
}}
component={ProductList}
queries={UserQuery}
/>
It's not needed to show any ProductList code, for now it's just rendering of connection. The idea is simple, you open product list page, click on show more few times, and pageSize number is incremented from 20 to 100. User then click on product number 99, i show him product, he click back and he sees who he has seen before. That's great, route state remembered number of times. But after user click refresh in browser, route state is also persisted, so I'm doing query to fetch first 100 products and that's too much. I want to listen to events and if products are not found in local memory ( env has been switched or page refreshed) I want to update variables to fetch only first 20.
I have the following:
$(document).on("pageinit", function (event) {
alert("pageinit called");
$('#logout').bind('click', function() {alert("clicked!");});
});
The first time the page runs you get a single alert 'pageinit called'. Clicking the element with id #logout fires the alert 'clicked!'. If I click any other links in this page I still get the 'pageinit called' alert (and I get it multiple times, apparently for each page I have previously navigated as well) but subsequently the handler for #logout is gone and never never re-established.
Can anyone tell me how I can get the handler for #logout to remain? I've tried:
$('#logout').die('click').live('click', function() {alert("clicked!");});
to no avail.
After looking more closely (and as commented by Omar), this problem is caused by a combination of the jquery mobile paging system AND trying to attach to a 'single' element by id.
In my case each time I clicked a link within the page it would load into the jqm paging system a separate page, each one containing its own #logout element. My solution was to query for all the buttons and attach handlers to each one:
var buttons = $("*[id='logout']");
buttons.each(function() {
// handle click or whatever here
});
Instead of:
var button = $('#logout'); // Only hooks into the first #logout element
I have the following fragment in a web component:
<div id="mycodes">
<template iterate='code in codeList'>
{{code}}
</template>
</div>
And in a Dart file, codeList is populated when the user clicks on a button:
void onMyButtonClick(Event event) {
HttpRequest.getString('http://getData').then((response) {
mylist = json.parse(response);
for(var code in mylist){
codeList.add(code['c']);
}
}
The problem is that I don't see data on first click. I need to click the button twice to see data.
But if I fill codeList manually (not from network data) as shown below, then I see the data on first click:
void onMyButtonClick(Event event) {
codeList.add("data 1");
codeList.add("data 2");
}
}
I need the template to iterate after the network data is available. It appears that event loop has already done its job of painting a page before the network data becomes available through future object.
Is there a way to refresh the page after model is updated in dart?
The reason your codeList currently populates if you add it with the on-click event is because the current web_ui has 'watchers' which automatically are called when an event happens. You then populate the list synchronously. However one of the downfalls of watchers is exactly your use case, when the data is updated asynchronously then the watchers don't reflect changes in time.
As a result the watchers are being phased out and replaced with observables. Observables allow us to flag a variable to be watched for reassignment and when that happens it will cause the view to change. For example:
#observable int x = 0;
// ...
x = 1;
When the x = 1 is called later in the code it automatically triggers the views to update. This leaves us with one problem however. When you are adding to a list, you are not reassigning the value itself. As such, observables also offer a function to convert a list to an observable list (this also works for maps).
For instance if you changed your declaration of codeList to something like the following, then when you add to the list later it will update accordingly.
var codeList = toObservable([]); // Assuming it starts with an empty list
// or
var codeList = toObservable(_startCodeList); // if you already have a list
Also see the Dart Tutorial: Target 7 for more information on using #observable and toObservable.
For more in-depth information, check out the article on Observables and Data Binding
You need to mark the fields you want WebUi to monitor with the #observable annotation. Otherwise you only get the initial value not any subsequent updates.
You can do this either directly on the object declaration or you can make the entire class as observable and all its fields will then be observed.
For an example see http://www.dartlang.org/docs/tutorials/custom-elements/#using-two-way-data-binding
How does Stack Overflow show interactive character limits? Like when editing comments, it shows you how many characters you have left, as well as warning if it is too few.
I'd like that exact functionality in my Ruby on Rails... But not sure how to do it?
Stackoverflow uses the jQuery JavaScript Framework and it has a lot of existing scripts and plugins for this sort of thing.
One example is this Interactive Character Limit for TextArea in jQuery demonstrated here.
I'm sure there are others as well.
I use the following JavaScript function to restrict max length in textareas
function checkLength(edit, maxlen)
{
if (edit.value.length > maxlen)
edit.value = edit.value.substring(0, maxlen);
document.getElementById('remaining').innerHTML = edit.value.length;
}
Link this to your textarea's onKeyDown and onKeyUp attributes:
onKeyDown = "checkLength(this, 100);"
by using the onkeydown event on the input. There are millions of examples out there and frankly I'd be surprised if this isn't a duplicate question.
It is: How to show interactive character limits?
I think you are looking for some javascript, basically you add a handler to the textbox onkeypress event then to get the current length:
mytextbox.value.length
and to limit it you could do something like:
if (mytextbox.value.length > maxlimit)
mytextbox.value = mytextbox.value.substring(0, maxlimit);
You can also use simple javascript event handling to show character counts
for input elements. No server side processing required.
This javascript catches the key-press event for a text area "txt"
and shows the character count in a span "count".
See it running at
http://aaron.oirt.rutgers.edu/myapp/root/charCount.html
<html>
<head>
<script>
function go() {
var txt=document.getElementById("txt");
txt.onkeydown = countTxt;
}
function countTxt() {
var txt=document.getElementById("txt");
var count=document.getElementById("count");
count.innerHTML = txt.value.length+1; // count the character not shown yet ;)
}
</script>
</head>
<body onload="go()">
<h3>type in the text area and see the count change</h3>
<textarea id="txt" rows="8" cols="30"></textarea>
<br>
count: <span id="count"> 0</span>
</body>
The count can be off my +-1 -- fixing that (if you really want to) is left to the reader.