could you tell me please how do I inject js into a page with CasperJS?
I want this after page has been loaded:
inject alert(Hello, World!') or/and
inject window.location=stackoverflow.com
make screenshot.
Pretty simple.
To switch context from Casper's one to browser simply call casper's evaluate method. It enables to evaluate your code in Browser context.
So calling alert should look something like this:
casper.evaluate(function() {
alert('Hello, World!');
})
You can read documentation for evaluate method here
As this answers both of your questions I would just like you to know that navigating to other web can be more easily done with Casper open method as your code will be much easier to read and maintain.
Related
So I am a newbie grails developer, and was wondering how to properly use services per the MVCS design pattern. Right now in my service, I have a couple functions doing my application logic, and then I am referencing the service directly from my gsp. I read on a comment here that this is not good form. So right now I have
<g:set var="doc" bean="documentPartService"/> directly in my gsp.
So I am looking to change it, just like the comment states, by passing the information through the right channels.
One little hurdle I am coming across is passing information from my service to my controller to my gsp. For an example
<g:form name="inputForm" action="replace">
somecodehere...
<input value="Submit" type="submit">
</g:form>
then in my replace function in my controller
def replace(){
render documentPartService.replace(params)
}
then I have some logic in my service.
I have seen in some services I have looked at, they return the variable as a json (documentBody is a variable local to my service)
return documentBody as JSON
but I am a little puzzled on how to actually access this in my controller/view. I can't just
print documentBody in my controller, because it is only defined in my service. In the plugin services and controllers I was using as references, the controllers are 1 liners, just like I have, where the only thing they do is render servicefunction()
Can anyone shed some light on how I should properly design this?
When you post your form the action is replace - the replace action in your controller renders the output of your service back out as the output rather than returning a gsp bound to the replace controller definition.
In theory it should work as in the user will post - the post will return the action replace which will return that JSON response.
the alternative is
def replace(){
def myValue=documentPartService.replace(params)
render (view: 'replace', model: [myValue:myValue ])
}
then you could have a gsp page called replace which has ${myValue} defined in it which will be its results.
Also its probably a better idea to call your service with defined values passed via the controller to it:
def replace(String val1,String val2,String val3){
def myValue=documentPartService.replace(val1,val2,val3)
[myValue:myValue ]
}
UPDATE
It may seem much coming from me to be hinting the latter method considering you probably seen the first call i.e.
render documentPartService.replace(params)
calls similar to above methods within one of my plugins.. I guess if you took a look at the mailinglist plugin, you will notice with the help of Burt. The controllers/services are locked down to data types and exact expectations.
I can only tell you from experience that best practices are if they are to be defined functions that have no reason for expansion then stick with the latter method. In the case of for example ajaxdependancyselection using the render services output method, in some ways this helps keep it more backward/forward compatible. But actually thinking about it maybe those calls can be locked down. Will update the plugin soon
I know there are many tutorials but they concentrate on xul, and manipulating menus and examples are overcrowded with features.
What I need is a simple extension that will for example add a red border to all <body> elements of every page I'm visiting and js would show me alert when a page is finished loading. Just to show that it is working and I will have a point to start learning from.
I know that there are ready extensions like greasemonkey and user css but what I intend to do is to first make such functionality raw, without overhead of yet another extension. And second to have ha proof of concept code so I can learn other features of firefox api.
I know how to write chrome/opera extension. I know all the languages needed, and how to make a mock extension, so it show up in firefox addons list. Vut the problem is that I don't know what to put where to get to the content of actual web page.
I know that there is a file called main.js that I'm supposed to put somewhere with code like this:
var data = require("self").data;
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*",
contentScriptFile: data.url("my_script.js"),
contentStyleFile: data.url("my_style.css")
});
And that begin to look familiar, like in Chrome., my script code:
window.addEventListener("load", function() {
alert("hello there!");
}, true);
But I don't know where to put these files. Are there some default location, or must I set some configuration file to let know the api where main.js is ?
I know that there are projects to make such css/js based extension simpler, like jetpack - but that still creates overhead. I want to learn, but also don't waste my time and create something useful while doing that based on the knowlegde I have from chrome API.
edit:
I found this tutorial: https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/Accessing_the_DOM - but there is nothing on where to put these files there is no example extension using these features.
edit2: https://github.com/mozilla/addon-sdk/tree/master/examples - there is no link for these in mozdev examples, one must search this thru google
Are you still in need of a ready made example?
Here is a bootstrap addon template that does exactly this. You just need to edit the addDiv and removeDiv functions for starters.
https://gist.github.com/Noitidart/9287185
It's called the Add-on SDK. Start here
I am starting to notice problems when I try and code my javascript and use functions that are in my viewmodel. Things like this:
case 37:
#if (Model.GoLeft)
{
Here I get a syntax error and the words "expected constant" for Model. Is there some solution to this? Do I need to upgrade something so it works?
I checked around on stackoverflow. Someone else suggested that I should separate my js but that doesn't help me as for example in this case where I want the keypress to do something if on a certain type of page where the Model allows it. If the js is in another file I can't code this way.
thanks
your approach is just wrong. Dont generate JS code in views by ifs. You defintely should keep your JS separetly (so that browser can efectively cache and reuse it). If you need to change behaviour of client-side code according to model values, do that by generation only some king of "flags" (JS have multiple ways to do that, i am not expert in JS - for example global variable works always, but there are more elegant and recommended ways) and in your client-side method test for their presence and fork your code by that.
So this seems like it should be simple. I'd like to set a public model property from javascript that's fired on the mouseover of an image.
So something like this:
Html:
...img src="<%=Model.AppDetails.Logo%>" onmouseover="showMenu(this);...
Javascript:
function showMenu(app) {
<%Model.CurrentId = app.id%> //app.id is of course undefined here
...
Or is a better approach to call a controller method to set it? If so what's the best approach? Ajax? Seems like a lot of heavy lifting for something so simple.
Appreciate the feedback.
Sharon
What exactly are you trying to do with Model.CurrentId? If you're trying to just send it back to the server when the page next sends information, use a hidden field or similar.
However, if you're trying to set a value on the server when the user mouses over an image, of course you need to use ajax or similar. How else is the server going to know what the client is doing.
If you want to use Model.CurrentId later in the same file, you will need to re-apply the template as well. Once the view is processed on the server, the client has no information from the template (the client doesn't see the <%...%> tags, those are replaced on the server before sending).
I can't imagine any scenario where you'd want to send information to the server on a mouseover unless you were going to also get information back (like an extended tooltip, or an image popup), so ajax is probably your best option.
In my layout, I'm calling include_javascripts() in my <head></head> section. Later on in my layout, I'm calling a component which makes use of use_javascript(), but, unfortunately, the javascript has been output, so this request falls on deaf ears.
I can think of a few approaches:
Put the call to `include_javascripts()` at the bottom.
At the moment I can't do this, because I'm using a CMS on top of symfony which uses a lot of inline javascript.
Override the include_javascript helper, or create a new one, which adds doesn't add anything, but adds it adds to a queue that a filter will take care of after rendering the page.
This is sort of like the common filter which was removed from 1.2. Obviously, they don't seem to like this approach.
Are there any other alternatives?
The use_javascript function simply adds the specified script to a collection, which is output by the include_javascripts function.
In order to have inline javascript in your code, you will need to use tags, since the use_javascript is pointless unless include_javascripts is called afterwards.
If you do not want to deal with filenames and such, you could always use sfConfig::get('sf_root_dir') . js/filename.js to grab your file.