I'm trying to inject a function into a webpage and call it, however no matter how I try it, whenever I try to call the function I get that it's undefined. I understand the browser reads function definitions on the page load and won't do so afterward, but is there a way for me to insert my functions in time. Here's a junk function I'd like to insert:
function makeAlert(word){
alert(word);
}
I've tried to inject it as is, append it to the body with <script> tags, and append it using <script src="makeAlert.js"></script> into the head with page-mod. However whatever I do, if I try to call the function on the page (using injected content script), the function is marked as undefined. Here is the basic code of what I thought would work:
in main.js
pageMod.PageMod({
include: "*",
contentScriptFile: self.data.url("makeAlert.js")
});
edit: as what I want to do seems to not be possible, my simple question is--Can I call a function I wrote from injected pagescript?
Content scripts are kept (mostly) separate from the web page for security reasons, see
https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts
If you really want to do this, you can by instead doing:
unsafeWindow.makeAlert = function (word){
alert(word);
}
A couple of important things about doing things this way:
unsafeWindow is, well, UNSAFE. Never trust any data that come from unsafeWindow, ever.
it will go away some time this year ( unsure of the exact timing )
What you should probably do instead is using postMessage from the web page to the content script to pass mesages. For more on how to do this safely, please read these docs:
https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/Communicating_With_Other_Scripts#Page_Scripts
Related
I am creating my first project that uses ui-router.
My project has about 10 views, each with their own controller and state. I am trying to modularise/encapsulate/decouple as best as possible but I am having trouble working out where to put the onExit and onEnter state callbacks.
The first option is to put it in app.js which is currently defining all of my states, however I feel that this would not be a good place as it could cause this file to blow up and become hard to read as more states are introduced and the logic gets more complex.
The second option I looked into was to put it into a controller (I have one for each state), however from researching it doesn't seem to be best practice to do this.
The third option is to create a service that is resolved, however with this option I would end up with either a giant service full of state change functions for each of the states (not decoupled) or an additional service per state which would contain the state change functionality, and I worry that would increase project complexity.
What is the standard way to achieve this?
Are there any other options that I am missing?
Our strategy for this has been to disregard the onEnter and onExit on the state object, because as you are discovering, they feel like they are in the wrong place in terms of separation of concerns (app.js).
For onEnter: we handle setup in an activate() function in each controller, which we manually execute inside the controller. This happens to also match the callback that will get executed in Angular 2.0, which was not an accident ;).
function activate() {
// your setup code here
}
// execute it. this line can be removed in Angular 2.0
activate();
For onExit: We rarely need an exit callback, but when we do, we listen for the $scope $destroy event.
$scope.$on("$destroy", function() {
if (timer) {
$timeout.cancel(timer);
}
});
I'm loading data using jQuery (AJAX), which is then being loaded into a table (so this takes place after page load).
In each table row there is a 'select' link allowing users to select a row from the table. I then need to grab the information in this row and put it into a form further down the page.
$('#selection_table').on('click', '.select_link', function() {
$('#booking_address').text = $(this).closest('.address').text();
$('#booking_rate').text = $(this).closest('.rate').val();
});
As I understand it, the 'closest' function traverses up the DOM tree so since my link is in the last cell of each row, it should get the elements 'address' and 'rate from the previous row (the classes are assigned to the correct cells).
I've tried debugging myself using quick and dirty 'alert($(this).closest(etc...' in many variations, but nothing seems to work.
Do I need to do something differently to target data that was loaded after the original page load? where am I going wrong?
You are making wrong assumptions about .closest() and how .text() works. Please make a habit of studying the documentation when in doubt, it gives clear descriptions and examples on how to use jQuery's features.
.closest() will traverse the parents of the given element, trying to match the selector you have provided it. If your .select_link is not "inside" .address, your code will not work.
Also, .text() is a method, not a property (in the semantical way, because methods are in fact properties in Javascript). x.text = 1; simply overrides the method on this element, which is not a good idea, you want to invoke the method: x.text(1);.
Something along these lines might work:
var t = $(this).closest('tr').find('.address').text();
$('#booking_address').text(t);
If #booking_address is a form element, use .val() on it instead.
If it does not work, please provide the HTML structure you are using (edit your question, use jsFiddle or a similar service) and I will help you. When asking questions like this, it is a good habit anyways to provide the relevant HTML structure.
You can try using parent() and find() functions and locate the data directly, the amount of parent() and find() methods depends on your HTML.
Ex. to get previous row data that would be
$('#selection_table').on('click', '.select_link', function(){
$('#booking_address').text = $(this).parent().parent().prev().find('.address').text();
});
Where parent stands for parent element (tr), then prev() as previous row and find finds the element.
Is there a demo of the code somewhere? Check when are you calling the code. It should be after the 'success' of AJAX call.
I am developing an Application in Bonfire.
They have extended the form helper.
Is there a way to call the original form helper from Codigniter without removing the extended one from Bonfire?
"Helpers" are just files with PHP functions in them. They aren't actually "extended", Codeigniter loads it's default helpers after loading yours, and checks if you "overwrote" a function like so:
if ( ! function_exists('form_open'))
{
function form_open() {/* default code */}
}
So unfortunately, no - there's no way to call the original function if you already declared your own.
HOWEVER: It appears that Bonfire does the exact same thing, checking with function_exists, so if you want to - you should be able to load your own form helper before it, but you still cannot simply load the original one without hacking Bonfire and removing the functions (which could have terrible side effects).
Faced the same prob, user742736's comment is the only answer that solved the prob.
Explained in detail, may be this can help some one
You can create your own helper function with out the divs surrounding the drop down here
bonfire/application/helpers/MY_form_helper.php
make a copy of the function form_dropdown, name it like form_dropdown_plain
modify the last few lines of the function to output with out divs
call form_dropdown_plain instead of form_dropdown
How to update a site with some other site contents that is getting refreshed often (may be twice in a minute)?
What you're doing is called scraping a website. Try googling on that. Pay particular attention to the laws around it. If you're benefiting the company you're scraping, they'll probably help you; if you're not, they'll probably sue you.
$.load() is your friend. The following JQuery-function call will replace the current value of element (e.g. div) with the id "result" with the content of page "ajax/test.html".
$('#result').load('ajax/test.html');
or with an additional success handler:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
if you would like to call one of these function every n seconds, use the following code:
setInterval(function() {
// wrap one of the above calls
}, <n>000);
edit:
for a cross-domain-solution, you can write a proxy page on your site which, upon call, loads the content of the 'other site' and echoes it.
Snippet available here: http://www.daniweb.com/code/snippet216729.html
Again related with my weekend project, I'm trying to learn a bit more of web-development. So I'm putting in the list of features i want to implement, some stuff i absolutely have no idea how to do.
I've been reading tutorials on how to use ajax, but i can't find a simple one, that i can copy-paste (with one or two changes) to see it work before i go into the how it works.
What I've been searching is just a simple example on an ajax function, that triggers a mysql insert or update. Anyone as a simple example on how to do this? I think it would prove a nice start to learn it. (Ajax or Json are both ok).
Correct me if I'm mystaken: I'm basing myself on this tutorial. So as obviously the client side doesn't have access to database calls, what I should do, would be something like creating a code snippet to add stuff to the database right? For example create an "addcomment.php" that can be called with xhr.open(GET, "addcomment.php?comment=mycomment", true);
Sounds like you got it right. Use Ajax to call a server side script which then does the database work for you.
A good setup is to use a framework like jQuery on the client side. This framework will encode and decode JSON automatically. On the server side you could create a class that handles all the ajax (or rather, ajaj, since we are using JSON) requests. Here is a short PHP file that shows the general idea. Add more elements to the functionMap array, and add the respective functions to the class.
class Ajaj{
private $callback = "";
private $functionMap = array( "select" => 'getIt');
function Ajaj(){
if(array_key_exists('jsoncallback',$_GET)){
$this->callback=$_GET['jsoncallback'];
}
}
function parse(){
echo "$this->callback(";
if(array_key_exists('action', $_POST)){
$action = $_POST['action'];
if(array_key_exists($action, $this->functionMap)){
echo $this->functionMap[$action];
}
}else{
echo "{}";
}
echo ")";
}
function getIt(){
return json_encode(//get the database stuff here);
}
}
$ajaj = new Ajaj();
$ajaj->parse();