Taking over page
xfire.o...@gmail.com
my page. http://jdprofessionaltraining.com/fixin_search.htm I have
tried moving things around but it either takes it completely over or
screws up the template.
mhl
the ajax search control is sitting within the div id=searchcontrol. I
do notice that your page has two <body> elements. You should fix that
for sure. In our samples, we typically have <body
onload="OnLoad()"><div id="searchcontrol"></div></body>. You don't have
to copy this code and cut/paste it onto your page. What you have to do
is simply tell the search control where you want it to draw. This can
be anywhere on your page, in any div, in a table, in the sidebar, etc.
jon heckman
onload="OnLoad()"><div id="searchcontrol"></div></body> the highlighted part is <body> what do I change it to so I dont have 2 body elements because I tried deleting that from it and the api didnt even show at all.
mhl
<div id="searchcontrol"></div> and place this construct wherever you
want the search control to appear. Then find the existing <body>
element and change it to call your onload handler and you should be all
set. For instance, right now, you have:
<body>
<!-- Begin Masthead -->
...
<div id="content">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="_top">
...
</form>
Change this to:
<body onload="OnLoad()">
<!-- Begin Masthead -->
...
<div id="content">
<!-- google ajax search api -->
<div id="searchcontrol">Loading...</div>
</div>
jon heckman
check out my site at http://jonsupersite.com , has videos, games, and more.
mhl
http://www.dev411.com/blog/2006/07/13/dojo-dojo-addonload-vs-body-onload-and-window-onload
Dojo calls window.onload itself, SO your body.onload is conflicting
with dojo. Sorry that I didn't focus on your dojo issues before...
When using dojo, you can not use <body onload=""/> or window.onload.
Dojo provides a utility function for you to use instead.
In you script, do something like:
<script type="text/javascript">
//<![CDATA[
dojo.addOnLoad( function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();
...
});
...
</script>
jon heckman
// Create a search control
var searchControl = new GSearchControl();
dojo.addOnLoad( function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();
<body onload="OnLoad()">
<div id="searchcontrol"/>
And Should I still put onload="OnLoad()" in the top body, because without onload="OnLoad()" added to body it it doesnt show up at all and with it in body it still does the same thing.I just uploaded it without the body change
mhl
problem with conflicting loads. One very easy way to deal with this
when you are in an environment where some runtimes are glomming
directly onto window.onload is to use addEventListner/attachEvent. This
is a safe way to ensure your code gets called no matter what else is
happening in the page.
To use this technique remove your onload= attribute in the body tag.
Then in the script block that contains your onload handler, the one
that activates your search control, do something like this:
<script type="text/javascript">
function myOnLoad() {
var sc = new GSearchControl();
sc.addSearcher(new GwebSearch());
sc.draw(document.getElementById("searchControl"));
}
// arrange for myOnLoad to get called
registerLoadHandler(myOnLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
}
</script>
<body>
<div id="searchControl">Loading...</div>
</body>
Take a look at these blog based samples which both use this trick
jon heckman
Sorry for the delay. Some of the typepad guys were having a similar
problem with conflicting loads. One very easy way to deal with this
when you are in an environment where some runtimes are glomming
directly onto window.onload is to use addEventListner/attachEvent. This
is a safe way to ensure your code gets called no matter what else is
happening in the page.
To use this technique remove your onload= attribute in the body tag.
Then in the script block that contains your onload handler, the one
that activates your search control, do something like this:
<script type="text/javascript">
function myOnLoad() {
var sc = new GSearchControl();
sc.addSearcher(new GwebSearch());
sc.draw(document.getElementById("searchControl"));
}
// arrange for myOnLoad to get called
registerLoadHandler(myOnLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener ("load", handler, false);
mhl
jon heckman
mhl
#1 - you re-introduced a second body tag. Get rid of it. Your page
already has a body element, you dont need/hand another.
#2 - the function myOnLoad is being executed. Look at what it does...
It creates a search control populated with a single GwebSearch().
#3 - my guess is that your complaint is that a function called
OnLoad(), which sets up some site restricted searchers, etc. is not
getting called? If that is your complaint, then based on the code you
put on that page, thats the expected behavior since you never called
OnLoad().
Here is how you fix this.
#1 remove the secondary <body> element
#2 decide where on your page you want the search control and wherever
you want it to appear put <div id="searchcontrol:>Loading...</div>
#3 Change this script block from:
<script type="text/javascript">
function myOnLoad() {
var sc = new GSearchControl();
sc.addSearcher(new GwebSearch());
sc.draw(document.getElementById("searchControl"));
}
// arrange for myOnLoad to get called
registerLoadHandler(myOnLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
}
</script>
TO:
<script type="text/javascript">
// arrange for OnLoad to get called
registerLoadHandler(OnLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
}
</script>
#4 Study my suggested change and make sure what I am asking you to do
makes sense and that you understand the change. If you don't understand
something, ask a question on the part you don't understand.
#5 Keep in mind that there is nothing special about the function named
myOnLoad() or OnLoad(). They are just function names and if you want
them to get executed, something needs to call them. The function that I
wrote for you called registerLoadHandler will arrange for a function of
your choice to be called when the page loads. In the code that you sent
this morning, you chose to have myOnLoad get called even though all of
the code in your app is in a function called OnLoad
Hope this is helpful. Good luck and keep in touch.
mhl
#1 - you re-introduced a second body tag. Get rid of it. Your page
already has a body element, you dont need/hand another.
#2 - the function myOnLoad is being executed. Look at what it does...
It creates a search control populated with a single GwebSearch().
#3 - my guess is that your complaint is that a function called
OnLoad(), which sets up some site restricted searchers, etc. is not
getting called? If that is your complaint, then based on the code you
put on that page, thats the expected behavior since you never called
OnLoad().
Here is how you fix this.
#1 remove the secondary <body> element
#2 decide where on your page you want the search control and wherever
you want it to appear put <div id="searchcontrol:>Loading...</div>
#3 Change this script block from:
<script type="text/javascript">
function myOnLoad() {
var sc = new GSearchControl();
sc.addSearcher(new GwebSearch());
sc.draw(document.getElementById("searchControl"));
}
// arrange for myOnLoad to get called
registerLoadHandler(myOnLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
}
</script>
TO:
<script type="text/javascript">
// arrange for OnLoad to get called
registerLoadHandler(OnLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
}
</script>
#4 Study my suggested change and make sure what I am asking you to do
jon heckman
mhl
the div containing the Loading... string. The .draw() method will
overwrite Loading. Send me the url to your page that doesn't work. Did
you write this page on your own? Or did you get help from someone local
to you?
jon heckman
mhl
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
In your HTML you have the following:
<div id="searchControl">Loading...</div>
Note that in your OnLoad function, you are telling the system to draw
on top of an element called "searchcontrol", but in your HTML, it is
spelled "searchControl".
These languages are case sensative, so get these two places aligned and
things should work.
jon heckman
mhl
Something like this. NOTE: substitute the name of your search control
fore coreSearch.
// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);