Using the Copy feature to copy just video URL's
Mary
Right now my hello world sample + callback handler is putting the video
html into a DIV called saved_results. I'd like to put just the video
URL into a text form field, not the video HTML into a DIV.
Any help?
Here is the code thus far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>Hello World - Google AJAX Search API Sample</title>
<link href="http://www.google.com/uds/css/gsearch.css"
type="text/css" rel="stylesheet"/>
<style type="text/css">
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
font-size: small;
margin: 15px;
}
</style>
<script
src="http://www.google.com/uds/api?file=uds.js&v=0.1&key=YOURKEYHERE"></script>
<script type="text/javascript">
//<![CDATA[
function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(new GvideoSearch());
// Set the Local Search center point
// localSearch.setCenterPoint("Atlanta, GA");
// establish a keep callback
searchControl.setOnKeepCallback(this, MyKeepHandler);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute("Bloc Party");
}
//luis
function MyKeepHandler(result) {
// clone the result html node
var node = result.html.cloneNode(true);
var someURL = result.url.cloneNode(true);
// attach it
var savedResults = document.getElementById("saved_results");
savedResults.appendChild(node);
}
//luisend
//]]>
</script>
</head>
<body onload="OnLoad()">
My Saved Results:
<div id="saved_results"/>
Search Videos:
<div id="searchcontrol"/>
</body>
</html>
Just a reminder about my goal: I'd like to put just the video URL into
a text form field, not the video HTML into a DIV.
mhl
When your keep handler is called, you are passed a result object. Your
current code, which is cloning the node and attaching it is using only
the .html property.
If you want to access the other properties (like duration, url, title,
thumbnail, etc.) you can easily do that. result.url is probably what
you are after.
Note, that if you only want to do this special processing for video
search results, make sure you test the result type:
if ( result.GsearchResultClass == GvideoSearch.RESULT_CLASS ) {
// its a video search result...
}
Now, the thing I don't understand about your question is what exactly
are you trying to do? Why do you want to put the URL only into a text
input form field? Typically these elements are used if you intend to
edit the content. Video URLs are very nasty looking URLs. They are very
large and should definitely not be visible to end users.
One other thing that you might want to explore is how you can use CSS
to control whats visible in a given search result. I apologize that all
of the styles are not in the written documentation, but the gsearch.css
is pretty well documented and between that and the My Favorite Places
V2 sample code you should be able to get a feel for how you can use CSS
for this. Look specifically at what we did to twiddle the web search
result details between a view that shows just the hyper-linked title,
vs. the title, snippet, visible url, attribution watermark, etc.
If all you are trying to do is clip a video search result, transmit it
to your server to save it, and then refresh your page, you can clip the
entire result into a hidden form field, round trip the page, and then
use CSS styling to show only the hyper-linked title.
Let me know more about what you are really after. The HTML that is
generated for a search result is heavily marked up with classes and is
designed to let you apply extensive styling without having to write a
lot of code.
I
Mary
two of us who've tried to implement this so far don't know
JavaScript/DOM well. I've tried putting result.url in the callback
handler ( function MyKeepHandler(result.url) {
) to show up in the div without modifying anything else, but that does
not work.
We're trying to allow people to just "clip" the URL, post it to a form,
so it can be written to a database, so they can view it on their site
profile. We already have this functionality working with youTube's API,
and we'd like to do the same with google's API.
Hiding fields with CSS wouldn't really help us since we just want the
URL in the database.
mhl
profile, thats why I was suggesting that you grab the entire .html
property and push it into your database. If you only really need the
single video, here is a fragment that grabs the title and url and puts
them into an input element where you can then post to your server.
Good luck.
assume you have two input elements, first one whose id is "myTitle" and
the other, "myUrl"
function MyKeepHandler(result) {
var myTitleElement = document.getElementById("myTitle");
var myUrlElement = document.getElementById("myUrl");
if ( result.GsearchResultClass == GvideoSearch.RESULT_CLASS ) {
// its a video search result...
myTitleElement.value = result.titelNoFormatting;
myUrlElement.value = result.url;
// submit form?
}
}
wee...@gmail.com
the elements, and for anyone else using this result.titleNoFormatting
was misspelled :).
wee...@gmail.com
.innerHTML works for div's, .value works for form fields (i.e.
myUrlElement.value = result.url; )
uba...@gmail.com
> assume you have two input elements, first one whose id is "myTitle" and
> the other, "myUrl"
>
> function MyKeepHandler(result) {
> var myTitleElement = document.getElementById("myTitle");
> var myUrlElement = document.getElementById("myUrl");
>
> if ( result.GsearchResultClass == GvideoSearch.RESULT_CLASS ) {
> // its a video search result...
> myTitleElement.value = result.titelNoFormatting;
> myUrlElement.value = result.url;
>
> // submit form?
> }
> }
Respected Sir.. can you please solve my problem related to your post of
june 2
By using the colde below I couldn't print the url in the appropriate
div tag. Can you tell me whats wrong with the callback method. I will
really appreciate your help. Obaid
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
searchControl.setOnKeepCallback(this, MyKeepHandler);
searchControl.draw(document.getElementById("searchcontrol"),
drawOptions);
// Execute an inital search
searchControl.execute("Google");
}
// establish a keep callback
function MyKeepHandler(result) {
var newr = result.url.cloneNode(true);
var myUrlElement = document.getElementById("myUrl");
if ( result.GsearchResultClass == GvideoSearch.RESULT_CLASS ) {
myUrlElement.appendchild(newr);
}
}
//]]>
</script>
</head>
<body onload="OnLoad()">
<div id="myUrl"/>