We Keep Coding

alert before close(x) button in chrome modal popup

i want to close the popup modal confirm alert but above code is not working.
I also tried popupcsd.onbeforeunload and popupcsd.onUnload but not working
var popupcsd = window.open('www.example.com', 'CSD ', 'width=1000, height=800');
var popupcsd =window.open('www.example.com', 'CSD ', 'width=1000, height=800');
popupcsd.beforeunload = function(){
console.log('leaving page'); // Use 'Preserve Log' option in
Console
alert('alert');
return leavingPageText;
}
am working this code in Angular JS

Instead of beforeunload use onbeforeunload
popupcsd.onbeforeunload = function(){
console.log('leaving page');
alert('alert');
return leavingPageText;
}
I tried and its working on my end

Callback name that you have used is wrong. It should be changed as below.
popupcsd.onbeforeunload instead of popupcsd.beforeunload

Clicking a button should get an Ajax response, but reloads the whole page in CasperJS

I'm playing around with CasperJS and trying to catch some Free-Email Alias on https://registrierung.web.de/#.homepage.loginbox_1.1.registrierung
So I have the input field: "E-Mail-Wunschname:" where I want to paste a name, then click the "Prüfen" button and then just scrape the suggested accounts.
So far I have tried that:
var casper = require('casper').create({
pageSettings: {
loadImages: false,
loadPlugins: true,
userAgent:('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:45.0) Gecko/20100101 Firefox/45.0')
}
});
var mouse = require("mouse").create(casper);
casper.start('https://registrierung.web.de/#.homepage.loginbox_1.1.registrierung').viewport(1200,1000);
casper.then(
function() {
this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField',"Test");
this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField',casper.page.event.key.Enter);
this.wait(5000);
}
);
casper.then(function() {
this.wait(5000);
this.capture('webde.png');
console.log('clicked ok, new location is ' + this.getCurrentUrl());
});
casper.run();
I also tired to click the button with:
casper.wait(6000, function() {
this.evaluate(function(){
document.querySelector('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField').value = "Test";
document.querySelector('#checkAvailabilityBtn').click();
});
});
casper.then(function() {
this.capture('webde.png');
console.log('clicked ok, new location is ' + this.getCurrentUrl());
});
With both ways it's just a complete submit of the page and not just the generation of the suggestion.

Clicking on the button (casper.click("#checkAvailabilityBtn")) seems to work well.
Here is the full script:
var casper = require('casper').create();
casper.start('https://registrierung.web.de/#.homepage.loginbox_1.1.registrierung').viewport(1200,1000);
casper.then(function() {
this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField', "Test");
this.click("#checkAvailabilityBtn");
});
casper.wait(5000);
casper.then(function() {
this.capture('test80_webde.png');
console.log('clicked ok, new location is ' + this.getCurrentUrl());
});
casper.run();
By the way, casper.sendKeys() is not able to handle key presses such as the Enter key. You would need to use PhantomJS' page.sendEvent() function. It works normally in the following way, but doesn't seem to work correctly in this case, because it reloads the page:
this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField', "Test", {keepFocus: true});
this.page.sendEvent("keypress", this.page.event.key.Enter);

Using Casper to log-in a page with Javascript generated content

I'm trying to use casper to log-in to http://insider.espn.go.com/insider/pickcenter/.
Now issue is that when you click log-in button, a AngularJS generated fileds - username and password appear.
I have put WaitForSelector to wait for this pop-up. But it always exits saying " Timeout expired"
Here's my script. Please help.
var links = [];
var casper = require("casper").create();
function getLinks() {
var links = document.querySelectorAll('a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href');
});
}
casper.on('page.loaded', function() {
this.echo('page title is ' + this.getTitle());
});
casper.start('http://insider.espn.go.com/insider/pickcenter/', function() {
// search for 'casperjs' from google form
this.emit('page.loaded');
casper.capture('test1.png');
this.click('#ins_signin');
});
casper.wait(5000,function(){
casper.capture('test2.png')
});
casper.wait(5000,function(){
casper.capture('test3.png')
});
casper.waitForSelector(".ng-scope", function() {
this.echo('Login Modal Active!');
casper.capture('test4.png');
//this.capture('screenshotofmodal.png', { top: 0, left:0, width:1000, height: 4000});
});
casper.then(function() {
this.fill('input[id="username"]', { q: 'removed' }, true);
this.fill('input[id="passwordfield"]', { q: 'removed' }, true);
});
casper.then(function() {
this.click('#submitBtn');
});
casper.then(function() {
// aggregate results for the 'phantomjs' search
links = links.concat(this.evaluate(getLinks));
});
casper.run(function() {
// echo results in some pretty fashion
this.echo(links.length + ' links found:');
this.echo(' - ' + links.join('\n - ')).exit();
});

First, before clicking, I would add a check to validate the the button is loaded. After, I would anchor the sign up form on a unique selector. After looking quickly on the page, when you click sign in, the email input has a class "ng-touched" which only appears after clicking on sign up. What I would try would look like this :
casper.start('http://insider.espn.go.com/insider/pickcenter/', function() {
// search for 'casperjs' from google form
this.emit('page.loaded');
casper.capture('test1.png');
});
casper.waitForSelector("#ins_signin",function then(){
this.click("#ins_signin");
}, function onTimeOut(){
this.capture('waitSignInFail.png');
}, 5000);
casper.waitForSelector(".ng-touched", function then() {
this.echo('Login Modal Active!');
casper.capture('weHaveSignInForm.png');
}, function onTimeOut(){
this.capture('signInFormFail.png');
}, 5000);

Open javascript popup after jquery response

I have this simple javascript function:
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.check', function(){
$.post('/index.php',
{
article: '1'
},
function(data, textStatus)
{
window.open('https://google.com');
});
});
});
</script>
<button class=".check">Check</buttton>
Although the click is user initiated but the popup is getting blocked by browsers. How to avoid this?

There's no way to unblock it through code.
Most browsers feel popups are very interrupting and that's the reason they block it.
You can only find out if the popup is being blocked and promptly notify the user to unblock it.
var wind = window.open('https://google.com');
if(!wind || wind.closed || typeof wind.closed=='undefined')
{
//POPUP BLOCKED
alert("please enable popups");
}

Your pop-up should be triggered directly by user interaction. But instead it's in an AJAX callback.
So, to prevent the block you should open the pop-up within the click handler. Then make the post..
EDIT: A tricky method would be to open the popup directly, then make the request and finally redirect the popup to the result URL:
$(document).on('click', '.check', function(){
var popup = window.open('/loading.html', 'popup');
$.post('/index.php', { article: '1' },
function (data, textStatus) {
popup.location.href = 'http://new-url';
});
});

You can try this trick:
function(data, textStatus)
{
var anchor = $( '<a/>', {href:'https://google.com',target:'_blank'} ).text( 'TEST' );
$('body').append( anchor );
$('body').find( 'a' ).last()[0].click();
anchor.remove();
};
JS FIDDLE DEMO

Click button on page when site loading is complete

I have made a simple omnibox extension for Chrome, The idea is you enter a postal code, press enter and it opens a few websites. But it does not work how i want to
function resetDefaultSuggestion() {
chrome.omnibox.setDefaultSuggestion({
description: 'Postcode: Zoek de postcode %s'
});
}
resetDefaultSuggestion();
chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
// Suggestion code will end up here.
});
chrome.omnibox.onInputCancelled.addListener(function() {
resetDefaultSuggestion();
});
function navigate(url) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.create({url: url});
});
}
chrome.omnibox.onInputEntered.addListener(function(text) {
navigate("http://www.gevonden.cc/postcode/" + text + "/streetname,housenr/");
navigate("http://www.nummerzoeker.com/?color=white&lastname=&str=&hnr=&pc=" + text +"&pl=&phone=&maxrows=100&sort=3&search=Zoeken");
navigate("http://www.zoekenbel.nl/postcode.asp?zoekop=p&zoek=postcode&postcode=" + text + "&Huis_nr=");
navigate("https://server.db.kvk.nl/TST-BIN/ZS/ZSWWW01#?TAAL=NL++&TYPE=PCHN&AANT=0&AWCD=" + text + "&NHVC=&HIST=+&submit=");
});
chrome.omnibox.onInputEntered.addListener(function(text) {
navigate("http://www.funda.nl/koop/zoeksuggestie/" + text + "/");
});
This all works ok, the last website (http://www.funda.nl/koop/zoeksuggestie/ + text) does not work perfectly, when the page loading is complete a button needs to be clicked, to display the results. When I run the following in the console, it works.
document.querySelectorAll("input[type='submit']")[0].click();
How do I add this to the extension so it waits for the page to load completely and then clicks the button?
Thanks in advance, LTKort
PS This is the first time making an extension and the first time coding in JS?!

Use jquery document ready
$(document).ready(function(){
// your code here
});
The code in that function executes when the document is ready.
To make sure the button doesn't get clicked everytime te page reloads, you can use the jquery cookie plugin.
$(document).ready(function(){
if($.cookie("visited") == 'true'){
// do nothing
} else {
$.cookie("visited", true);
$("input[type='submit']").trigger("click");
}
});