Meteor users and backbone very slow - performance

I created a project for easy content sharing. You can look at my project here:
SharingProject
You can use user#example.com with 123456 as password to test the site as verified user. Of course the site has some bugs yet...
I used the meteor user package and the backbone package to navigate through the pages.
On localhost, there is no problem. For testing I uploaded the project to the meteor server. Now while I am logged in and navigating through the pages, every time I navigate to a new page the app 'checks' the user on client side because of the url change. This is annoying...
Of course I could navigate through the pages only calling Session.set('page_id', ..) but my goal is to be able to send people an url to a specific page on the server.
The code is similar to the one in the todos example from the meteor page:
Meteor.subscribe('pages', function () {
if (!Session.get('page_id')) {
var page = Pages.findOne({}, {sort: {owner: -1}});
if (page)
Router.setPage(page._id);
}
});
...
var PagesRouter = Backbone.Router.extend({
routes: {
":page_id": "main"
},
main: function (page_id) {
Session.set("page_id", page_id);
},
setPage: function (page_id) {
this.navigate(page_id, true);
}
});
Router = new PagesRouter;
Meteor.startup(function () {
Backbone.history.start({pushState: true});
});
Why I am asking here: I searched the web and can't find anyone with the same problem. So either nobody tried this before or there is a simple solution for this?
Edit: How I call the pages
<template name="pages">
{{#each pages}}
<p>{{title}}
{{#if isauthor}}
<a class="delPage" href="javascript:delPage('{{_id}}')">delete</a>
{{/if}}
</p>
{{/each}}
</template>

I don't know how you are rendering the page links but a link like this :
http://pagesharingproject.meteor.com/a1fbacba-0ddf-4077-a653-294b428bbfb8
should read like:
http://pagesharingproject.meteor.com/#a1fbacba-0ddf-4077-a653-294b428bbfb8

Ok I solved the problem, changing (true)
Meteor.startup(function () {
Backbone.history.start({pushState: true});
});
to (false)
Meteor.startup(function () {
Backbone.history.start({pushState: false});
});
and of course adding an anchor like Mubix suggested. Thanks for the hint!
It is up to date on the site mentioned above.
I spend some time today on the backbone documentation, but I can't imagine why this is working? Especially I am wondering why
{hashChange: false}
doesn't work here?

Related

Timed out waiting for asynchronous script result while executing protractor scripts with appium

I have a problem while running more than one test in protractor : Timed out waiting for asynchronous script result after 60010 s
The code of tutorial script which is executed just after the login script :
Here the code i'm using in my config file from A Code proposed in another question but it didn't solve my problem !
onPrepare: function() {
return browser.getProcessedConfig().then(function(config) {
var browserName = config.capabilities.browserName;
browser.manage().timeouts().setScriptTimeout(60000);
});
PS : Even if i put an incorrect location for the element i have the error of time out and not this element cannot be found ! as if that line of code "the click into tutorial button" is never executed
Is it because tutorial make an ajax call ?
Here my html code :
</div></md-card-content> </md-card><!-- end ngIf: !expandChart --> </div> </div> </div></md-content> </div></div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <!--<script>--> <!--!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){--> <!--(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),--> <!--r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)--> <!--}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');--> <!--ga('create', 'UA-XXXXX-X');--> <!--ga('send', 'pageview');--> <!--</script>--> <script src="scripts/vendor.js"></script> <script src="cordova.js"></script> <script src="scripts/scripts.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script> <div class="introjs-overlay" style="top: 0;bottom: 0; left: 0;right: 0;position: fixed;opacity: 0.8;"></div><div class="introjs-helperLayer " style="width: 538px; height:366px; top:64px;left: 195px;"></div><div class="introjs-tooltipReferenceLayer" style="width: 538px; height:366px; top:64px;left: 195px;"><div class="introjs-tooltip" style="left: 546px;"><div class="introjs-tooltiptext">Watchlist view. Swipe the row in the grid to the left to show the delete action.</div><div class="introjs-bullets"><ul><li><a class="active" href="javascript:void(0);" data-stepnumber="1"> </a></li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li></ul></div><div class="introjs-progress" style="display: none;"><div class="introjs-progressbar" style="width:12.5%;"></div></div><div class="introjs-arrow left" style="display: inherit;"></div><div class="introjs-tooltipbuttons"><a class="introjs-button introjs-skipbutton" href="javascript:void(0);">Don't show it again!</a>PreviousNext</div></div></div></body></html>​
1. Regarding with route check
In case after first spec, user got logged in and the route changed. Make sure all are navigated before any test executed.
expect(browser.getCurrentUrl()).toContain('#/the_route_of_logged_in');
// '#/' is just illustration. You can remove it to make it shorter
// => like this ...toContain('the_route_of_logged_in');
2. Regarding with click on tutorial
browser.wait(EC.elementToBeClickable(tutorial), 10000);
Do the browser.wait with EC for click-able button before attempt to click it (it seem like you got good approach here)
=> SUMMING UP you can give this a try:
'user strict';
var EC = protractor.ExpectedConditions;
describe('tutorials', function () {
it('should make click into tutorial button', function () {
expect(browser.getCurrentUrl()).toContain('the_route_of_logged_in');
var tutorial = $('.introjs-nextbutton');
browser.wait(EC.elementToBeClickable(tutorial), 8000, 'Timed out');
tutorial.click();
browser.sleep(8080); // regardless we are not reaching this point. But I will suggest to reduce this sleep time like 1000 (1s).
});
});
3. (optional) in case 2 points above does not help
In your all of your spec login-spec.js and tutorial-spec.js. Add process.nextTick(done); in a afterAll() block to ensure if there are no any Jasmine Reporters being stuck after a spec.
describe('foo', function(){
afterAll(function(done){
process.nextTick(done);
});
it('should bar...', function() {});
}
P.S. Beware that I am totally have no clue if my suggestions/approach could help. As debugging with e2e-test always painful... because we are always likely not knowing "where are the errors come from". So all I can do is giving you suggestions.
(sometimes it took me hours to just observe the behaviors of browser to identify an issue of e2e-test)
And DO NOT COPY PASTE my code into your code. I typed it with the images you provide, I can make some typos there.
Add parameter to conf.js under capabilities:
maxSessions: 1,
it should help.
Also your timeoutinterval might be too high 30000 should be enough.
Or on prepare change line to :
browser.manage().timeouts().implicitlyWait(5000);
#EDIT:
change to sth similar to this found something like this
baseUrl is 10.0.2.2 instead of localhost because it is used to access the localhost of the host machine in the android
emulator/device
baseUrl: 'http://10.0.2.2:' + (process.env.HTTP_PORT || '8000'),
Capabilities new command:
newCommandTimeout: 60
Also use of promises might be helpfull instead of timeouts
someethingToDo.click().then(function(){
return somethingToDo.click();
}).then(function(){
//morecode
});
I think you might have an issue with how your timeouts are set up. Remove all timeout references from your config file and try something like this (adjust accordingly to include other configurations as needed):
exports.config = {
allScriptsTimeout: 60000,
getPageTimeout: 30000,
jasmineNodeOpts: {
defaultTimeoutInterval: 62000,
}
}
Finally i tried to solve my problem by adding this call back
describe("long asynchronous specs", function() {
beforeEach(function(done) {
done();
}, 10000);
});
Here is a link from jasmine Asynchronous_Support that help me understand time out problems.
Hope that can help you,

AJAX call with nodeJS and express successful, but not displaying data

I have recently migrated from a codeigniter framework, to a nodejs with an express framework. Our codeigniter site had a lot of JS as it was, and we made a lot of AJAX calls because it is a single page app. We are messing around with node and express now, and I cannot get a simple AJAX call to function. It could be a lack of understanding of node, it could be something else. We are using openshift to host. We are using hogan-express as a template.
server.js
var express = require('express');
var fs = require('fs');
var http = require('http');
var path = require('path');
var SampleApp = function() {
var self = this;
self.initializeServer = function() {
self.app = module.exports = express();
self.app.configure(function() {
self.app.set('views', __dirname + '/views');
self.app.set('view engine', 'html');
self.app.engine('html', require('hogan-express'));
//self.app.set('layout', 'layout') # use layout.html as the default layout
self.app.use(express.favicon());
self.app.use(express.logger('dev'));
self.app.use(express.bodyParser());
self.app.use(express.methodOverride());
self.app.use(express.session());
self.app.use(self.app.router);
self.app.use(require('stylus').middleware(__dirname + '/public'));
self.app.use(express.static(path.join(__dirname, 'public')));
});
require('./routes');
}
There is more code in this file, I am only including the relevant code (I think).
Ajax.html
<div id="button">
<button id="testbutton">Push Me!</button>
</div>
<div id="populate">{{title}}</div>
<div id="null">{{>part}}</div>
<script type='text/javascript'>
$(function(){
$('#testbutton').click(function (){
$.ajax({
url:'/test',
type: 'POST',
success: function(result){
alert('success!');
},
error: function(){
alert("well this is embarassing... if the problem persists please let us know at facebook.com/stembuds");
}
});
});
});
</script>
index.js
app = require('../server');
app.get('/', function(req, res){
res.render('ajax');
});
app.post('/test', function(req, res){
console.log('get');
res.locals = {title: 'Horray'};
res.render('ajax', {partials:{part:'part'}});
});
part.html
<p> pass me in!!</p>
So basically what I am trying to do is when the button is clicked I want the ajax call to show a partial view. The way we are going to structure the site is to have one single page, and have the ajax calls render different views based on the buttons that the user clicks. So here is the interesting part: I get the success alert from the ajax call, but the {{title}} and the {{>part}} never show up. However, when I go to the console and click 'network', and then click 'test' (the url to my ajax call), the response shows the divs populated with "Horray" and "pass me in!!". Sorry for the length, and thank you for any information you can provide us.
If you are calling your resources with ajax (as you are doing) then you get the response to your ajax function. After successful call you need to render the view in your client side JS code.
What I mean is that your code works as expected, but your backend cannot update your browsers view. You need to do it client side or load the whole page again from the server.
Your success hander could be something like this:
success: function(result){
renderTheResults(result);
},
You can just send the JSON. You need to send the json via send not render. Because render is supposed to deliver the full HTML page. May be .ejs file.
For example:
res.send({partials:{part:'part'}});
res.send should be used to pass json to your page. And on your page you have to use the JSON to populate the HTML dynamically.

Magento add to wishlist via ajax is not working with secure url (SSL installed)

I am using magento add to wishlist via ajax
it's working fine but after install SSL on server and make secure magento checkout pages from admin.
It give me not any response from ajax (302 Found).
But if i open this url in new tab then it's working fine.
When i use https in request url then it gives me the following html response "Reload the page to get source for: REQUEST URL" and without https there is no response to display.
here below the code which i used for :-
function additemtowishlist(wId,pId)
{
var wishlisturl = 'wishlist/index/ajaxadd/product/'+pId;
var wishlistparam = '/?wishlist_id='+wId;
var url = '<?php echo Mage::getUrl("",array('_secure'=>false))?>'+wishlisturl+wishlistparam;
new Ajax.Request(url, {
dataType: "json",
onSuccess: function(response){
if (typeof(response.responseText) == 'string') eval('data = ' + response.responseText);
if (typeof data.product_id != 'undefined') {
var htmltoshow = '<div class="messages successmessage"><div class="success-msg"><span>'+data.message+'</div></div>';
jQuery("#wishlistresulthome-"+data.product_id).html(htmltoshow);
jQuery("#customwishlist-"+data.product_id).css('visibility','hidden');
}
else {
alert(Translator.translate('Error happened while creating wishlist. Please try again later'));
}
}
});
}
Thanks in advance.
Hello Simranjeet you may try this :-
function additemtowishlist(wId,pId)
{
var wishlisturl = 'wishlist/index/ajaxadd/product/'+pId;
var wishlistparam = '/?wishlist_id='+wId;
var url = '<?php echo Mage::getUrl("",array('_secure'=>false))?>wishlist/index/ajaxadd/product/';
new Ajax.Request(url, {
method: 'post',
parameters: {'wishlist_id':wId,'product_id':pId },
onSuccess: function(response){
if (typeof(response.responseText) == 'string') eval('data = ' + response.responseText);
if (typeof data.product_id != 'undefined') {
var htmltoshow = '<div class="messages successmessage"><div class="success-msg"><span>'+data.message+'</div></div>';
jQuery("#wishlistresulthome-"+data.product_id).html(htmltoshow);
jQuery("#customwishlist-"+data.product_id).css('visibility','hidden');
}
else {
alert(Translator.translate('Error happened while creating wishlist. Please try again later'));
}
}
});
}
I discovered that ajaxToCart has ssl functionality built into it, but if the theme developer was lazy they may have neglected to include the code that tells ajaxToCart that ssl is enabled. I found it in the following code from ajax_cart_super.js.
function ajaxToCart(url,data,mine) {
var using_ssl = $jq('.using_ssl').attr('value');
if(using_ssl==1) {
url = url.replace("http://", "https://");
}
..
..
}
As you can see, ajaxToCart will replace the http with https, but only if there is an element with the class using_ssl and value=1. The developer who made my theme didn't include that element, so when the ajax request points to an unsecure page that should be secure, the ajax response won't work in jquery.
So for me, the quick fix was to just add this element onto my pages. I know this site will always have ssl enabled so I simply hard coded it into my template as shown below.
<input type="hidden" class="using_ssl" value="1" />
Once that was there, the javascript picked up the value and did the replacement. So now it works fine for me by just adding that into the template. If you are a theme developer and you want users to be able to switch this on and off, you may want to check against the settings in the admin. Although you may be on an insecure page, it will tell you if ssl is enabled in the backend, which would require this fix to be added.
I haven't tested the following but I think it would look something like this...
if(Mage::app()->getStore()->isCurrentlySecure()){
echo '<input type="hidden" class="using_ssl" value="1" />';
}
BTW, after years of appreciating stackoverflow solutions, I am making my first post here. Thanks to all contributors, the help is great and I'll try to pay it back now. :)
Try update your javascript url variable, by setting _secure to true value.
please try with below with your wishlist url just change instead of my custom action
Mage::getUrl('',array('_secure'=>true))
I think that gets you the base secure url, I believe.
Mage::getUrl('customer/account/login',array('_secure'=>true))
Will get you to the login page. In other words,
Mage::getUrl('module/controller/action',array('_secure'=>true))

I'm trying to disable my url from changing without disabling ajax in jquery mobile

When I navigate to a different page in my project in IE (and sometimes chrome) the new URL is added to the old one.
For example, if this is my original URL: localhost:49866/Home/Index
and I was to navigate to a different page, that URL is added to the old one like this:
localhost:49866/Home/Index#/Newpage
I've found that this is an ajax thing which makes it easier to retrieve old pages. However, is there a way to fix this without disabling my ajax?
The only solution I've found is to disable my ajax completely using this script:
$(document).ready(function () {
if ($.browser.msie || $.browser.webkit) {
$("a").attr("data-ajax", "false");
$("a").attr("rel", "external");
var a = $("form");
if (a != null) {
$("form").first().attr("data-ajax", "false");
$("form").first().attr("rel", "external");
}
}
});
You can set any url you want on each of your jquery-mobile pages. Use the data-url attribute on your data-role="page" div like this:
<div id='myJQMPage' data-role="page" data-url="/the/url/i/want")>
</div>

jquery ajax post callback - manipulation stops after the "third" call

EDIT: The problem is not related to Boxy, I've run into the same issue when I've used JQuery 's load method.
EDIT 2: When I take out link.remove() from inside the ajax callback and place it before ajax load, the problem is no more. Are there restrictions for manipulating elements inside an ajax callback function.
I am using JQuery with Boxy plugin.
When the 'Flag' link on the page is clicked, a Boxy modal pops-up and loads a form via ajax. When the user submits the form, the link (<a> tag) is removed and a new one is created from the ajax response. This mechanism works for, well, 3 times! After the 3rd, the callback function just does not remove/replace/append (tested several variations of manipulation) the element.
The only hint I have is that after the 3rd call, the parent of the link becomes non-selectable. However I can't make anything of this.
Sorry if this is a very trivial issue, I have no experience in client-side programming.
The relevant html is below:
<div class="flag-link">
<img class="flag-img" style="width: 16px; visibility: hidden;" src="/static/images/flag.png" alt=""/>
<a class="unflagged" href="/i/flag/showform/9/1/?next=/users/1/ozgurisil">Flag</a>
</div>
Here is the relevant js code:
$(document).ready(function() {
$('div.flag-link a.unflagged').live('click', function(e){
doFlag(e);
return false;
});
...
});
function doFlag(e) {
var link = $(e.target);
var url = link.attr('href');
Boxy.load(url, {title:'Inappropriate Content', unloadOnHide:true, cache:false, behaviours: function(r) {
$("#flag-form").live("submit", function(){
var post_url = $("#flag-form").attr('action');
boxy = Boxy.get(this);
boxy.hideAndUnload();
$.post(post_url, $("#flag-form").serialize(), function(data){
par = link.parent();
par.append(data);
alert (par.attr('class')); //BECOMES UNDEFINED AT THE 3RD CALL!!
par.children('img.flag-img').css('visibility', 'visible');
link.remove();
});
return false;
});
}});
}
Old and late reply, but.. I found this while googling for my answer, so.. :)
I think this is a problem with the "notmodified" error being thrown, because you return the same Ajax data.
It seems that this is happening even if the "ifModified" option is set to false (which is also the default).
Returning the same Ajax data three times will cause issues for me (jQuery 1.4). Making the data unique (just adding time/random number in the response) removes the problem.
I don't know if this is a browser (Firefox), jQuery or server (Apache) issue though..
I have had the same problem, I could not run javascript after I call boxy. So I put all my javascript code in afterShow:function one of boxy attributes. I can run almost except submit my form. My be my way can give you something.

Resources