Using browserstate/history.js
All my links are running through the history adapter:
History.Adapter.bind(window,'statechange',function() {
// do some stuff here
});
but if a user clicks the same link twice in a row then the second time it will not run since there is no 'statechange'. What is the solution for this?
You can add random data to differentiate the actions:
History.replaceState( {randomData: window.Math.random()}, '', url);
That way statechange will always fire.
Found answer here https://github.com/browserstate/history.js/issues/293
Related
Can someone help me with the new Adobe Target Premium tool.
Is there a way to track the click conversion manually without using VES?
Currently I am using latest v60 version of mbox , I hope someone can help me on this.
You can simply define an mbox and update it from the elements click handler in javascript. Then you can listen for this mbox as a conversion metric.
Sample code:
// when your script loads
mboxDefine('unused string', 'Name of the Mbox');
...
$(document).ready(function() {
$('#element-to-track').click(function() {
// fire the mbox (Name of the Mbox) you can see it as a conversion metric
mboxUpdate('Name of the Mbox');
}
});
When you click the element, you should see an ajax?mbox... request going out with the name of the mbox as request parameter.
In case you want to measure a click which routes the page to another location, don't forget to add some timeout (500ms) to the click handler, so the request has time to complete.
I am following this example https://kadira.io/academy/meteor-routing-guide/content/rendering-blaze-templates
When I click on my links the whole page is being reloaded. Is there any way to load only the template part that is needed and not the whole page?
Edit: Also I noted another problem. Everything that is outside {{> Template.dynamic}} is being rendered twice.
Here is my project sample. https://github.com/hayk94/UbMvp/tree/routing
EDIT: Putting the contents in the mainLayout template and starting the rendering from there fixed the double render problems. However the reload problems happen because of this code
Template.mainLayout.events({
"click *": function(event, template){
event.stopPropagation();
console.log('body all click log');
// console.log(c0nnIp);
var clickedOne = $(event.target).html().toString();
console.log('This click ' + clickedOne);
//getting the connID
var clientIp = null // headers.getClientIP(); // no need for this anymore
var clientConnId = Meteor.connection._lastSessionId;
console.log(clientIp);
console.log(clientConnId);
Meteor.call("updateDB", {clientIp,clientConnId,clickedOne}, function(error, result){
if(error){
console.log("error", error);
}
if(result){
}
});
}, // click *
});//events
Without this event attached to the template the routing works without any reloads, however as soon as I attach it the problem persists.
Do you have any ideas why this code causes such problems?
EDIT 2 following question Rev 3:
event.stopPropagation() on "click *" event probably prevents the router from intercepting the click on link.
Then your browser performs the default behaviour, i.e. navigates to that link, reloading the whole page.
EDIT following question Rev 2:
Not sure you can directly use your body as BlazeLayout target layout.
Notice in the first code sample of BlazeLayout Usage that they use an actual template as layout (<template name="layout1">), targeted in JS as BlazeLayout.render('layout1', {});.
In the tutorial you mention, they similarly use <template name="mainLayout">.
That layout template is then appended to your page's body and filled accordingly. You can also change the placeholder for that layout with BlazeLayout.setRoot() by the way.
But strange things may happen if you try to directly target the body? In particular, that may explain why you have content rendered twice.
Original answer:
If your page is actually reloaded, then your router might not be configured properly, as your link is not being intercepted and your browser makes you actually navigate to that page. In that case, we would need to see your actual code if you need further help.
In case your page does not actually reload, but only your whole content is changed (whereas you wanted to change just a part of it), then you should make sure you properly point your dynamic templates.
You can refer to kadira:blaze-layout package doc to see how you set up different dynamic template targets in your layout, and how you can change each of them separately (or several of them simultaneously).
You should have something similar in case you use kadira:react-layout package.
I'm using Fullcalendar v2.4.0 and related plugin Scheduler v1.0.2 with all required dependencies. jQuery-ui is at v1.11.4.
I'm loading resources via Ajax call using Fullcalendar built-in method of:
resources: {
url: 'resources_feed.php',
type: 'POST'
}
resources_feed.php simply returns few lines of dummy data.
And for the events, using a similar built-in method of:
events: {
url: 'events_feed.php',
type: 'POST'
}
events_feed.php returning few lines of dummy data.
It all works as expected until I plug in more realistic large amount of data as resources but still keeping the events data same.
The problem I experience is that button clicks like views (Day, Week, Month), Today and left/right arrows are responding after a delay of min 2 seconds sometimes longer. It behaves as if there's a delay set for a few seconds between button click and event firing. I tried to put an alert in the onClick event and alert is displayed after this few second delay.
I tested another button outside Fullcalendar object but on the same page and that works as expected, ie firing as soon as you click the button. This rules out page or jQuery issues. Same behaviour in Firefox and Chrome.
If I switch resource loading back to dummy data then buttons start firing as soon as clicked.
I can't figure out why a large amount of data still to be fetched can affect button response even before triggering an Ajax call.
Anyone seen this before? Any pointers will be much appreciated.
Regards.
Looks like the issue is on your events_feed.php maybe you are loading all the data on every call. Maybe you are not catching properly the Start and End parameters on every button.
The feed.php should catch the start and the end on every call. Something like this:
$start = $_GET['start']);
$end = $_GET['end']);
// then select database
I had this problem when i started to use fullcalendar.
Hope it helps!
I've seen this thread on how to append/modify query parameters without duplicating, but I can't make it work.
I have a page in my Meteor application that lists items and allows filtering. I would like the filtering to be URL-based, so every change to a filter should reflect in the URL.
I use iron-router to then update the subscription accordingly.
For some reason, I can't modify the querystring though. This code doesn't trigger any action if called from a Template.templateName.events(...):
# valuePairs = ["foo=bar", "bar=foo"]
newUrl = Router.current().route.path {}, { query: valuePairs.join('&') }
Router.go newUrl
But if I call Router.go(newUrl) from the commandline, the expected result happens, i.e. the URL updates.
Is there another, preferred method to modify the query?
If not, how can I make above code work?
UPDATE - I just found that after running the event, if I go back in my browser history I can see the correct URL. It looks like something (?) triggers another page load to go back to original page.
Just based on
if I go back in my browser history I can see the correct URL
Do you suppress the actual link event? An <a href='#'> would flip flop you right back.
Template.tempyTheTemplate.events({
'click awesomeButton': function() {
// URL stuff
Router.go(magicURL);
return false; // <-- suppresses the event
}
});
I have an ASP.NET 2.0 Web application.I want to show a progress indcator when user saves some data (Ex : Editing profile).I have already used jQuery in my application for some client side effects. How can i do this ? any jquery trusted stuff to use along with ASP.NET ? Thanks in advance
Do you want to show actual progress or just a busy indicator while the action is happening? If the former, you'll need to have some mechanism to record the save progress in the session and a method to check the state of the progress via AJAX. You'd submit the form via AJAX then periodically call the check method to get reports of the progress and update whatever client-side indicator (usually switch from one to another of a series of canned images or increase the width of some filled "bar"). This, of course, is complicated.
If you want to do the latter, just display an animated GIF that's a busy indicator while you submit the form via AJAX from jQuery using the beforeSend callback, then hide the indicator using the ajax method's complete handler.
$('form').ajax( {
url: '/updateprofile.aspx',
type: 'POST',
data: function() { return $('form').serialize(); },
beforeSend: function() { $('#indicator').show(); },
complete: function() { $('#indicator').hide(); },
success: function(data,status) { alert('Update complete'); }
});
The above code would be in the function invoked from whatever handler invokes the submission or hooked to the form's submit event -- though you'd have to prevent the default action from taking place, too.
An alternative to showing a meaningful progress indicator is to show an animated gif whilst the data is being saved, e.g. the spinning 'daisy' pattern used in Firefox.
This shows the user that something is happening and is usually well received.
Progress indicators which show % complete are often meaningless anyway unless they really have an idea how long the first '50%' will take compared to the last '50%'. Other progress indicators are more meaningful, e.g. those showing record count increments, etc.