I want to load my Google Calendar feed on my web page using JSON-P. To make the main content on the page load quicker, I inject the script tag for JSON-P into the head tag only after page is loaded. Google Calendar API returns a script with callback function, see example here.
Is it possible to avoid using global function as a callback function? I would like to wrap all the necessary code for injecting the tag and parsing the results inside one wrapper function.
What you can do is using a method of the global where you application lives.
MYAPP.method({...});
No. When you are using JSON-P calls, the server returns something like below:
callback({...})
After you use <script> element to reference this JSON-P call URL, browser will download the JavaScript code and execute it, which means to execute your callback function using server-provided data.
If you don't want callback function to pollute your global namespace, just add some namespace to your callback function, like com.mycode.callback.
The biggest advantage of using JSON-P is that it can work around Same Origin Policy in browser and you can easily use data from other domains.
Related
I'm using the AWS S3 Javascript SDK and i am trying to do some operations as using external functions or append some HTML code in a HTML div etc. all these things from my callback send() but nothing happens i get errors whereas i don't have any problem when i'm making these stuffs outside that send().
I have absolutely to write some specific code involving external functions inside this send() that just can't be made outside . How to resolve this issue ?
You can have a glance on the AWS.request.send() here
I have a existing file ajax,js in my website that makes an ajax request and creates a global JSON object, searchResult using that response. Now I am creating a Chrome plugin, that requires this JSON Object inside it. I have a content script for the plugin viz. plugin.js and I want to include the object inside plugin.js file.
When I try to log window.searchResult from within plugin.js, it shows as undefined.
but when I use browser console, it shows the value as expected.
Please help me with this.
Problem
Chrome content scripts and the page's own scripts live in isolated worlds.
Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page.
Your code works in the console, since you execute it by default in the page's context. To see what the extension sees, you need to switch it.
Solution 1a
First, the generic solution (works even if you don't control the webpage)
There is a way around this, by injecting some code directly into the page's "world" (or properly called, context).
After injecting the code, your page-level script needs to communicate with the content script to pass the data. It's possible with custom DOM events (as, as you remember, DOM is shared). The page-level script sends an event with the data in the event's details.
Alternatively, you can just attach the data to some DOM node, say, an invisible <div>.
Solution 1b
Since you said it's your page, you can skip the inject-into-the-page step and have a listener ready in the page's own code.
The content script sends a custom event to request the data, and the page answers passes the data back as described in 1a.
Solution 2
In theory, you don't even need a content script.
You can use the "externally_connectable" mechanism to speak with the page directly.
Note though that the page has to initiate the conversation.
If I have a function written in Google Spreadsheets script editor that retrieves the data in the spreadsheet in JSON format, how can I access that function outside of the script editor in my own code? I want to access that JSON and manipulate it in my own code. Is there a way to do that using the Spreadsheets API? I format it in a specific way inside script editor so I can't just use the json-in-script provided. In the call (http://spreadsheets.google.com/feeds/feed/key/worksheet/public/basic?alt=json-in-script&callback=myFunc) there's a callback function for myFunc. Can I use the function I defined in the script editor to replace myFunc?
Following your comment that brings some details on your use case, there is a Google-Apps-Script feature specially designed to give access to some functions you wrote from within another script : is is called libraries and is fully described in the documentation.
EDIT, following 2cond comment:
Calling a GS function from a javascript (or any other language) script that is not a Google Script (GS) is not possible if you consider using it as a function...
but
what you can eventually do - depending on the data this function must handle - is to deploy a script as a webApp running as a service and call this service from your external app using the equivalent of an urlFetch (that's the service doing that in GS).
The service will have an url to which you can add parameters and it will return a result that you can use in your local app.
Of course this workflow has a few limitations and might quickly become complex but in many cases it is fully workable.
Note that the url you will have to use in the "versioned" one ending with .exec (Not sure this word is correct but I mean the published url that corresponds to a version of your script and not the ".dev" one that one can use to test a script in GS).
You'll find details about that in the documentation and on many other ressources, including SO. The url is typically something like this :
https://script.google.com/macros/s/AKfycbyw-2WtmF7wsd__________azjImbMWm5YrxB8/exec?someParameter=someValue&otherParam=otherVal // etc...
I use AJAX to load some content to the page, and that content has some jQuery(document).ready() code in it. I need for the stuff in the ready function to execute, but I cannot modify the actual code, but only use what's been provided by server via AJAX.
How to trigger those functions in jQuery 1.4+ / Prototype?
Basically, what I need to do is to execute an inline javascript code from a HTML response.
You could try an eval(code) of the code that comes from another source. When using Ajax you have to specify what kind of output are you expecting (dataType for jQuery Ajax call). This can be xml, json, script, or html. Unless you are doing JsonP and you import a script the other datatypes are basically text and you need to eval them in order to execute them. Once you eval() them the functions from the other source will be available in your global environment.
I am loading a portion of page using AJAX calls, which may contain script functions defined in them . Which are attached with the controls being loaded with different events. Now the problem is that when those events triggered i got the error "object not found" which indicate the function is not found/defined. While using Firebug i can see that the function is defined and available. So how can i make sure that browser can find the respective function.
I tried but either i am missing some thing or either its not working, Here is what i am doing
Page
--->Partial View A
----->Partial View B
Now Page Loads Partial A with Ajax Calls which further loads Partial B with Ajax Calls.Both Partial A & B contains few java script function that logically only associated with them not with master page.
The pages loads fine except the functions could not execute as "Object Not Found" comes in.
You should define functions using this syntax:
myFunction = function(foo) {}
not this syntax
function myFunction(foo) {}
The second form won't work when eval()'d (which is probably what's happening)
If you are using a framework or library you have to set a parameter in order to evaluate the script present in the response of the ajax request. It's usualy called evalScripts
evalScripts:true
You can also use the callbacks (success/error) of the request to trigger the events, so that it's easier to keep the code in one place and to avoid situations like this.
If you are using plain javasciprt and the XmlHttpObject, then you have to manually find all the script tags in your response and then eval() them.