First of all, I have no Idea what I'm doing exactly, secondly I hope my english is quite good enough.
My favourite website recently changed its look and feel, therefor I try to reanimate the "old" style via Greasemonkey. So far everything works but I have an issue opening a window for a comment. This comment(field) is now part of the site itself and no loger a free floating window.
What i did is adding this to the script:
var newWin = open('','write a comment','height=300,width=600');
newWin.document.write('<html><head><title>Write a comment</title></head></head><body bgcolor="#555555" text="#000000" topmargin="0" leftmargin="0" style="overflow:hidden;"><form id="commentForm" name="photoComment" action="http://[...]/add_photo_comment/38060403" method="post"reloadUrl="[...]/photo-comments/38060403/de/page/1"data-ua-submit="Fotodetailseite;Kommentar verfassen;Foto;38060403"><div class="media-left"><div class="media-body"><div class="form_row"><textarea id="photoComment_comment" name="photoComment[comment]" required="required" rows="5" class="form-control write-comment" placeholder="Anmerkung"></textarea></div><div class="row fcx-space-tiny"><div class="col-lg-12 text-right"><button type="submit" class="btn btn-primary btn-sm submit-comment"><i class="icon icon-comment"></i>send</button></div></div></div></html>');
Sofar this works for me when inserting the code directly into the script (window opens on entering the site directly)
As far as I wrap it in a function, the new window will be opened but without contetnt:
var input=document.createElement("input");
input.type="button";
input.value="Anmerkung";
input.onclick = createComment;
input.setAttribute("style", "font-size:18px;position:absolute;top:80px;left:40px;");
document.body.appendChild(input);
function createComment()
{
[exactly the same script as above]
};
What am I doing wrong?
Thanks for help
Related
there is this piece of code that provides a checkbox following from a link to the T&C.
<div class="checkbox accept_agreement">
<label class="control-label" for="step_data_accept_agreement">
<input type="hidden" name="step_data[accept_agreement]" value="0">
<input type="checkbox" name="step_data[accept_agreement]" id="step_data_accept_agreement" value="1">
<label for="step_data_accept_agreement">
<a target="_blank" href="/lanevillkor/">
<font><font>I agree, have read and stored the terms and conditions</font></font>
</a>
</label>
</label>
</div>
Now, I am working on a spock test using geb, and I try to retrieve the checkbox element
<input type="checkbox" name="step_data[accept_agreement]" id="step_data_accept_agreement" value="1">
to do so i have tried many things without the expected output. i was expected that something like
$("#step_data_accept_agreement").click() would be pretty straight forward but it is not. in the other side if I put $("[for='step_data_accept_agreement'] label").click() it clicks the link.
I tried to become as more specific but nothing looks to return the element correctly.
one of my last attempts was
termsAndConditionsOption(wait: true) { $("#step_data_accept_agreement", name: "step_data[accept_agreement]") }
and the error message, as in the other cases too, was in one sentence
element not visible
What do I miss?
So the solution was to use js to click the checkbox. The simpliest way is:
def agreeOnTermsAndConditionsAccept() {
String mouseClickEvt = """
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
arguments[0].dispatchEvent(evt);
"""
browser.js.exec(termsAndConditionsOption.firstElement(), mouseClickEvt)
}
Geb provides js support to work with javascript, as we find in the documentation. Also another link shows how to simulate a click event with pure javascript.
This was required as the checkbox cant be found as it is hidden. With javascript we can 'see' the position of the element and perform an action in the location that we want. iniMouseEvent can be used as well as it is documentanted here
I have a DOM like this:
<form id="frmResendPassword" role="form" method="post">
<div class="form-group">...</div>
<span class="pull-right">
<button type="submit" class="btn btn-sm btn-default">
Resend Password</button>
</span>
</form>
I want to tap the "Resend Password" button.
I have tried many different selectors such as:
elementByClassName("btn-default")
elementById("frmResendPassword")
elementByName("Resend Password")
elementByCss(thecsspath)
ect.... none of them perform the tap()...
however they do not throw a element not found error....
so im confused. can some one please help
update:
Here is the basic automation code... its very basic
it("should send text to phone", function(){
sleep.sleep(5)
return browser
.elementByName("mobileNo")
.sendKeys(usrnme)
.elementByCss("#frmResendPassword button[type=submit]")
.tap()
})
It types the mobile number in fine, however it seems to just ignore pressing the button.
My guess is that the selector is the problem. Try this:
elementByCss("button[type=submit]")
or if that doesn't uniquely identify it, maybe this:
elementByCss("#frmResendPassword button[type=submit]")
In English that means a button with type value of submit that has an ancestor of a form where the id(#) is frmResendPassword
This is how I solved it, thanks to mrfreester
it("should send text to phone", function(){
sleep.sleep(5)
return browser
.elementByName("mobileNo")
.sendKeys(usrnme)
.elementByCss("#frmResendPassword button[type=submit]")
.click()
})
I want videos playing in the reveal modal window to stop playing when the modal window closes (who doesn't?). This is easily done with jQuery by setting the iframe source to empty.
But I can't figure out how to make it work in a callback. The modal window itself functions as expected. And this works:
$('.close-button', '#video-reveal').on('click', function() {
$('#video-player').attr("src", "");
console.log("button event fired");
});
However, neither of the following has any effect:
// from documentation
$(document).on('close.fndtn.reveal', '[data-reveal]', function() {
var modal = $(this);
console.log("closing reveal event fired");
});
// my attempt to do it programmatically
$('[data-reveal]').on ('opened.fndtn.reveal', function() {
var modal = jQuery(this);
console.log("opened reveal");
});
So it feels like the event is not firing. I'm sure it is, but how to capture it?
The magic of Foundation 6 is not all obvious without some digging. Working with version 6.2.3
$(document).on(
'open.zf.reveal', '[data-reveal]', function () {
console.log("'open.zf.Reveal' fired.");
}
);
It appears as though you are using Foundation 5's callbacks, rather than Foundation 6...
For your callbacks, I'd suggest using 'closed.zf.reveal', 'open.zf.reveal' or 'closeme.zf.reveal' as mentioned here:
http://foundation.zurb.com/sites/docs/reveal.html
In HTML
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!--in apps.js-->
function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
Everything works perfectly. The appbar is displayed only in the home, but if I exit the App without closing and again opening it, it disappears the appbar
In home.js
WinJS.UI.Pages.define("/pages/home.html", {
ready: function (element, options) {
appBar = document.getElementById("createAppBar").winControl;
appBar.getCommandById("cmdSettings").addEventListener("click", doClickSettings, false);
appBar.getCommandById("cmdCalibrate").addEventListener("click", doClickCalibrate, false);
appBar.getCommandById("cmdShare").addEventListener("click", doClickShare, false);
appBar.getCommandById("cmdEdit").addEventListener("click", doClickCamera, false);
getLoc();
}});
...
In home.html
<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal'}">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSettings',label:'Ajustes',icon:'settings',tooltip:'Ajustes'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCalibrate',label:'Calibrar',icon:'fourbars',tooltip:'Calibrar'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdShare',label:'Compartir',icon:'like',tooltip:'Corre la voz'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'about',icon:'like',tooltip:'Corre la voz'}"></button>
<!--<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"></button>-->
Can someone help me?
Tnx in adv!
Looks like it is a bug in WinJS.
https://github.com/winjs/winjs/issues/140
I have a photography site driven in part by the 'Photoshelter' service, and I put an embedded search bar in my nav.
<form action="http://brettcole.photoshelter.com/search" method="get">
<input type="text" placeholder="search library" size="15" name="I_DSC">
<input type="submit" value="go">
<input type="hidden" name="I_DSC_AND" value="t">
<input type="hidden" name="_ACT" value="search">
</form>
It allows for a search to be executed with the no search term present, which then returns all 12,000 photos in my archive. Is there a best practice for preventing this, such that the user has to type something or nothing will happen when they click search?
It's also present on my advanced search page. This is generated by a search widget shortcode in the Photoshelter back end. I'd like to apply the same thing here, but not sure how the widgetization of it might affect the process.
Many thanks
You can use the onsubmit attribute of the form element to check if the user has entered information in any fields and then prevent submit based on that.
<script>
function checkValues() {
searchBox = document.getElementById("SearchField");
return searchBox.value != ""; // True will allow submission and false will prevent it
}
</script>
With this...
<form onsubmit="checkValues();" action="http://brettcole.photoshelter.com/search" method="get">
<input type="text" id="SearchField" placeholder="search library" size="15" name="I_DSC">
<input type="submit" value="go">
<input type="hidden" name="I_DSC_AND" value="t">
<input type="hidden" name="_ACT" value="search">
</form>
Should do what you need.
See also this answer: How to grab the onSubmit event for a form?
The actual search isn't working
From the contact page for example, it returns this
http://brettcolephotography.com/contact.html?I_DSC=red&I_DSC_AND=t&_ACT=search
the formula for my search returns is
http://brettcole.photoshelter.com/search?I_DSC=red&I_DSC_AND=t&_ACT=search
this search bar is present on all three of my web properties, personal site, blog, and photoshelter site, all three are tightly integrated to where you can't tell when you're switching between them. It needs to work regardless of where the search is being executed from. Thanks
Here is a function I wrote to disable the search form submitting if the search field is empty. It also focuses the cursor on the search field if the form is not submitted so that the user does not think that search is broken.
This is assuming that jQuery is loaded. Hope this helps!
var preventSearchIfEmpty = function() {
$('form[method="get"]').on( 'submit', function( ev ){
var query = $('input[type="text"]').val(),
queryLength = query.length;
if ( 0 === queryLength ) {
// Make the cursor blink so user is aware it's not broken, they need input to search
$('input[type="search"]').focus();
ev.preventDefault();
return;
}
});
}();