I'm using SignalR (2.0.0 then 2.0.1) to make some real-time web application. Every 5 seconds it receives some data... Also process user events. Anything works, but i have problems with IE8 (same with any version if IE + compatibility Mode).
var worker = $.connection.mainHub;
...
worker.client.test= function () { ... };
var connection = ((navigator.userAgent.match(/iPad/i) != null) ?
$.connection.hub.start({ transport: ['webSockets', 'longPolling'] }) :
$.connection.hub.start())
.done(function () { console.log($.connection.hub.id);});
1) The first one: after ~1-2minutes of working - everything became slower(user events like pressing buttons, simple css hover action, etc.), IE seems to be dieing.
I thought the reason is memory leak.. it's a large amount of JavaScript (I'm using knockoutjs to build my html). But now i'm not sure
2) I need to have some clarity, how should I reload the page.
I'm using "location.href = location.href;" and everything fine, but in IE it seems to cause an error.
Not always, but often there is an error "$.connection.hub.id is undefined". I check $.connection.hub.transport, it's undefined too. Have no idea what i'm doing wrong...
it seems there was redirecting to other page at the moment of 'done' occured. jquery.signalR stayed on the other page.. I guess there is some specific of brouser cash
Related
I have a React web app which uses Blockly that I'm currently trying to write automated tests for using the Cypress framework.
Cypress works pretty well for the basic process of signing on, but starts behaving inconsistently once Blockly is supposed to load.
About half the time, the entire Blockly portion of the app doesn't show up at all in the Cypress viewport. Sometimes this shows up, sometimes it doesn't, and I'm unsure what causes it or how to really reproduce it, it seems to be random.
Here is how it looks when it loads properly
Here is how it looks when it doesn't load properly
At first, I thought that the reason it didn't work is because the resources for Blockly hadn't loaded, and Cypress was trying to access resources that didn't exist.
To work around this, I added a delay, using cy.wait(). I tried anywhere from 1s-10s, but the delay doesn't seem to affect anything, no matter how long the delay is, it doesn't seem to impact if the Blockly portion of the app loads properly or not.
Here is the code for the portion of the Cypress test file used:
it('Sign in with created profile', () => {
cy.visit('localhost:3000/');
cy.get('input[name="email"]')
.type('test123#test.com').should('have.value', 'test123#test.com');
cy.get('input[name="password"]')
.type('testtest').should('have.value', 'testtest');
cy.get('button[type="submit"]').click();
});
it('Open created project', () => {
cy.get('div[class="project-container"]').contains('test project').click();
});
it('Drop 1+1 block into grid', () => { //2s delay
cy.wait(2000).then((prom) => {
cy.get('div[class="blocklyTreeRow"]').contains('Math').click({ force: true });
});
});
It works perfectly, until just after the 'Open created project' part of the test is run, then it's a hit or miss if the Blockly part of the app shows up. Refer to the images above for possible scenarios that happen.
Please check you are not trying to automate iframe because cypress do not support iframe
Iframe opened Question :
https://github.com/cypress-io/cypress/issues/136
Else :
Try to use Aliased.
// Wait for the route aliased as 'getAccount' to respond
// without changing or stubbing its response
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('#getAccount').then((xhr) => {
// we can now access the low level xhr
// that contains the request body,
// response body, status, etc
})
More documentation available here :
https://docs.cypress.io/api/commands/wait.html#Alias
I have a website that uses ajax for paging, the page system works according to the hashchange event, whenever I want to move to another page, I call a function that change the hash to the page number, when the hash changed the hashchange event is fired and call a function to get the page data .
However, it works perfectly except one thing, if I change the page more than 3-4 times the page will not respond and will crash, I check the network tap in the Inspect element in google chrome and what I see is when I change the page the number of ajax requests will be doubled and the transferred data also will be doubled, which will cause a memory leak.
Eventually, I've tried to do the paging thing without hashchange to see if the problem will be solved, and it worked like charm.
Can you please till me what to do ? thanks in advance
hashchange event
$(window).bind('hashchange', function () {
search(0);
});
changehash function
function ChangeHash(p) {
window.location.hash = p;
}
page button
$('#Pages').append("<button type='button' class='btn btn-default"+active+"' Onclick=\"ChangeHash(" + a + ")\">" + a + "</button>");
The code you've given doesn't show it, but most likely what's happening is that after each xhr you are re-running that bind call.
Hence, you are double, triple, quadruple binding the event unintentionally - which is precisely what the network log shows: haschange is running 2,3,4,5 ... times until the browser crashes.
To avoid this, make sure
$(window).bind('hashchange', function () {
search(0);
});
Is only run once.
When using the HTML5 Validation API it is possible to intercept the error, access the error message and render it differently.
When using the WebShim Polyfill, I would've hoped that this would work in the same way without having to access a customValidationMessage property.
Is there a way WebShim can be configured so we can write consistent code for intercepting these error messages as below.
$("input").on("invalid", function(evt) {
evt.preventDefault();
alert(evt.currentTarget.validationMessage);
});
... I would expect this code to work in a Polyfill, perhaps I have misunderstood it's setup or something?
The reason I want to do this is so that I can grab all the invalid fields and display the errors in one block, rather than next to each field.
Thanks,
Nick
Yes, this is possible. If you setup everything correctly you only have to change your call to validationMessage. Webshims always fixes elements through the jQuery API, not the DOM element itself. Which means you always have to use $.prop to access DOM properties.
$("input").on("invalid", function(evt) {
evt.preventDefault();
alert($.prop(evt.target, "validationMessage"));
});
You can also use eventdelegation:
$(function(){
$(document).on("invalid", function(evt) {
var message = $.prop(evt.target, "validationMessage");
if(message){
evt.preventDefault();
alert(message);
}
});
});
Note:
Eventdelegation for invalid is done through event capturing (which isn't normally used by jQuery). Therefore you have to wait untill polyfill is loaded. (Normally, jQuery's ready event is delayed untill then.)
I check if an validationMessage is there, although there was an invalid event. Here is why: There was a spec change and now an invalid event is also triggered on the form element. This is currently only polyfilled in an unstable version of webshims and only for incapable browsers (IE < 12, Safari < 8 ...).
I am trying to fetch data from a site by simulating events using CasperJS with phantomJS 1.7.0.
I am able to simulate normal click events and select events. But my code fails in following scenario:
When I click on button / anchor etc on remote page, the click on remote page initiates an AJAX call / JS call(depending on how that page is implemented by programmer.).
In case of JS call, my code works and I get changed data. But for clicks where is AJAX call is initiated, I do not get updated data.
For debugging, I tried to get the page source of the element container(before and after), but I see no change in code.
I tried to set wait time from 10 sec to 1 ms range, but that to does not reflect any changes in behavior.
Below is my piece of code for clicking. I am using an array of CSS Paths, which represents which element(s) to click.
/*Click on array of clickable elements using CSS Paths.*/
fn_click = function(){
casper.each(G_TAGS,function(casper, cssPath, count1)
{
casper.then ( function() {
casper.click(cssPath);
this.echo('DEBUG AFTER CLICKING -START HTML ');
//this.echo(this.getHTML("CONTAINER WHERE DETAILS CHANGE"));
this.echo('DEBUG AFTER CLICKING -START HTML');
casper.wait(5000, function()
{
casper.then(fn_getData);
}
);
});
});
};
UPDATE:
I tried to use remote-debug option from phantomJS, to debug above script.
It is not working. I am on windows. I will try to run remote debugging on Ubuntu as well.
Please help me. I would appreciate any help on this.
UPDATE:
Please have a look at following code as a sample.
https://gist.github.com/4441570
Content before click and after click are same.
I am clicking on sorting options provided under tag (votes / activity etc.).
I had the same problem today. I found this post, which put me in the direction of jQuery.
After some testing I found out that there was already a jQuery loaded on that webpage. (A pretty old version though)
Loading another jQuery on top of that broke any js calls made, so also the link that does an Ajax call.
To solve this I found http://api.jquery.com/jQuery.noConflict/
and I added the following to my code:
this.evaluate(function () { jq = $.noConflict(true) } );
Anything that was formerly assigned to $ will be restored that way. And the jQuery that you injected is now available under 'jq'.
Hope this helps you guys.
I have run ajax-calls on the unload event for about a year.
It has generally worked in FF and IE but not to 100%, I cannot say when it has failed.
I register the event by writing in the bodytag:
onunload="...."
I got error messages in FF4 since the unload event also wanted to write in a div-tag of the page that just had unloaded. Fixed this by making the ajax-routine write nothing if the id of the target div is 'dummy'
I am no expert on AJAX, but the following code has worked:
http://yorabbit.info/e-dog.info/tmp/ajax_ex.php (the link is a text-page)
(You call ajaxfunction2 with the following arguments: filename, queryString for PHP, string to show in target div during update, name of target div)
I don't get any error messages in the FF error console and IE9 works. Is there any way I can make it work in FF too?? I have just started trying FF4, but my impression is that it works less well than in FF3.
Thanks.
(I am on a trip and ay not have the possibility to reply immediately, but I really appreciate suggestions and will reply in due course)
EDIT:
I had bettter add this:
The AJAX-call I make on unload does only send some data (how long time the user stayed on the page) to the PHP-MySQL server
I don't know what is happening here, but Firefox 4 has made notable changes to how unloading works: For example, if you do an alert() during a link click event, it will no longer freeze the page, but load the new location anyway. Maybe this is something similar.
However, you are never guaranteed for the Ajax call to finish if it is not synchronous in any browser anyway - the request may or may not come back with a response until the page has been closed. Whether this works will be down to chance, and the user's network speed.
Try using a synchronous request first, as outlined here: How does jQuery's synchronous AJAX request work?
this will usually guarantee that the request comes back. However, use it very sparingly - blocking behaviour at page unload can be very annoying for the user, and even freeze the browser.
I suggest to use jQuery instead of keeping track of browser changes yourself.
Solution:
Find working sample here: http://jsfiddle.net/ezmilhouse/4PMcc/1/
Assuming that your internal links are set relatively, and your external links therefore set starting with 'http':
Leave ...
Stay ...
You could hijack 'a' tags via jQuery events and ask the user to confirm the leaving (in case of external links). In 'ok' case you kick off your 'onleave' ajax call (async=true) and redirect user to external link:
$('a').live('click', function(event){
// cache link
var link = $(this).attr('href');
// check if external link (assuming that internal links are relative)
if (link.substr(0,4) === "http") {
// prevent default a tag event
event.preventDefault();
// popup confirm message
var reply = confirm('Do you really want to leave?');
if (reply) {
var url = 'http:mydomain.com/ajax.php';
var data = {'foo': 'bar', 'fee':'bo'};
// kick off your 'onleave' ajax call
// forced to be synchronous
$.ajax({
type: "POST",
async: false,
url: url,
data: data,
success: function( data ) {
// ok case: leave page, cached link
window.location.href = link;
}
});
}
return false;
}
});