[Proto-Scripty] $(dialog_1) is null by firebug
I am writing an application using prototype.js and dialog.2.0.js
(http://roland.devarea.nl/dialog/#e6) the iframe effect. But I
encountered a problem when I try to fitting it into my application.
What I want to do is that when a user click a href=#
id=dialog_1Show Iframe/a , a dialog box will be shown. Thus, I
use the following code,
//showiframe.js
var modal = new Dialog({
handle: '#dialog_1',
title: 'Google.com',
width: 'max',
height: 'max',
padding:0,
margin: 75,
iframe:'http://www.google.com'
});
$('dialog_1').observe('click',function(){
modal.open();
});
then in my page, i have,
head
script type=text/javascriptsrc=javascript/prototype.js/script
script type=text/javascriptsrc=javascript/scriptaculous.js?
load=effects,controls/script
script type=text/javascript src=js/dialog.2.0.js/script
script type=text/javascript src=js/showiframe.js/script
/head
..
ul id=menu
lia class=current href=index.php title=WelcomeHome/
a/li
lia href=crblog.php title=Create postCreate post/a/
li
lia href=# id=dialog_1View iframe/a/li
/ul
..
but it is no effect and firebug shows that $(dialog_1) is null.
However, if I strictly follow the dialog.2.0 's sample, that is :
lia href=javascript:, id=dailog_1View iframe/a/li
.
and embeding the javascript in the main page,
script type=text/javascript language=javascript
new Dialog({
handle:'#dialog_12',
title:'Dialog #12 (Google.com)',
width:'max',
height:'max',
padding:0,
margin:75,
iframe:'http://www.google.com'
});
/script
It works fine. Does anyone know how can I implement it in an
unobtrusive way? Any help would be appreciated.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: $(dialog_1) is null by firebug
Wow, it works fine now, thanks very much.
On Apr 15, 3:48 pm, Szymon Wilkołazki wilkola...@gmail.com wrote:
SamuelXiao wrote:
I am writing an application using prototype.js and dialog.2.0.js
(http://roland.devarea.nl/dialog/#e6) the iframe effect. But I
encountered a problem when I try to fitting it into my application.
What I want to do is that when a user click a href=#
id=dialog_1Show Iframe/a , a dialog box will be shown. Thus, I
use the following code,
//showiframe.js
var modal = new Dialog({
handle: '#dialog_1',
title: 'Google.com',
width: 'max',
height: 'max',
padding:0,
margin: 75,
iframe:'http://www.google.com'
});
$('dialog_1').observe('click',function(){
modal.open();
});
then in my page, i have,
head
[...]
script type=text/javascript src=js/showiframe.js/script
/head
and embeding the javascript in the main page,
[...]
It works fine. Does anyone know how can I implement it in an
unobtrusive way? Any help would be appreciated.
Hey,
The problem you encountered is the fact that you execute the
$('dialog_1') function as soon as the script file loads, and not after
the DOM tree is ready. At the point that script is loaded not all the
html might be loaded and parsed by the browser.
What you need to do is to defer executing all the DOM related code to
the moment when the page is completely parsed and the Document Object
Model tree is ready in browser.
Prototype.js gives you a simple way to do that all. You just need to
wrap the code in a function and make that function execute when DOM is
ready:
Event.observe(document, 'dom:loaded', //the prototype.js magic event
function () {
$('dialog_1').observe('click',function(){
modal.open();
});
});
You can read more on this on unofficial
wiki:http://proto-scripty.wikidot.com/prototype:element-has-no-properties
--
Best Regards,
SWilk
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: How to correct the following code?
Hi, ColinFine, in my javascript code. The prev.js is to do links with
URL preview. It is expected to show a preview box with linked
content. However, in my testing, prev.js can work on its own, when it
comes to using both script01.js and prev.js together, it doesn't
work. My question is how can I correct the code to make the preview
effect work under the script01.js. I have tried a few days. Any help
would be appreciated!
On Mar 10, 6:05 pm, ColinFine colin.f...@pace.com wrote:
On Mar 9, 1:15 pm,SamuelXiaofoolsmart2...@gmail.com wrote:
Sorry for my unclear explanation, the following is all my JavaScript
code,
// script01.js //
obj = new Object();
obj.f1 = eventHandler;
window.onload = obj.f1;
window.onunload = function(){};
function eventHandler(){
postUpdater();
dynamicEdit();
deleteAlert();
var loc = document.getElementById(newLocation);
loc.selectedIndex = 0;
loc.onchange = jumpPage;
Purpose: What I want to do is making prev.js compatible with
script01.js, and make it work.
My problem now is that when I include script01.js or prev.js
separately, it works well. But if I include both of them, prev.js
will not work.
My code maybe tedious,ugly and not user-friendly, sorry about that. I
am new to Ajax and could some one give me reference How to write a
clear program?
And How to solve the above problem. Thanks.
Quoting all your code may or may not be helpful. The problem is, that
you still haven't told us what problem you are seeing.
Doesn't work might mean anything from Produces output which looks a
little different from what I expect to Crashes my browser.
What are you expecting to happen, and what actually happens?
Colin
On Mar 9, 5:39 pm, ColinFine colin.f...@pace.com wrote:
On Mar 6,
...
read more »
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: How to correct the following code?
')));
#time
$upT = strpos($up,'T');
$upDot = strripos($up,'.');
$uptime =
substr($up,$upT+1,($upDot-1)-$upT);
echo 'updated on'.$upfinal.' '.$uptime;
echo 'p/p';
}
if(preg_match(/Id:/,$var[$i])){
$idpos = strpos($var[$i],'Id:')+9;
$idlast = strpos($var[$i],'Updated')-10;
$idis =
substr($var[$i],$idpos,($idlast-$idpos));
}
echo 'label for=idinput type=hidden
id=postid'.$i.'
value='.$idis.''.' //label'.\n\t;
echo 'a
href=http://www.myschool.edu/deletePost.py?id='.$idis.'
name=deleteidDelete/a'.\n\t;
echo '/fieldset'.\n\t;
echo 'hr width=100% size=1 /'.\n\t;
echo 'p/p'.\n\t;
#yahoo yui div end
echo '/div'.\n\t;
if($counter%3 == 0){
$yuij++;
}
$counter++;
}
echo '/div'.\n\t;
?
/div
pnbsp;/p
!-- rounded corners - bottom --
div class=rbottom/div
/div
/div
div id=footer My teammate and i...@my school Computer Science
Department/div
/div
/body
/html
---End of my index.php
code.--
Purpose: What I want to do is making prev.js compatible with
script01.js, and make it work.
My problem now is that when I include script01.js or prev.js
separately, it works well. But if I include both of them, prev.js
will not work.
My code maybe tedious,ugly and not user-friendly, sorry about that. I
am new to Ajax and could some one give me reference How to write a
clear program?
And How to solve the above problem. Thanks.
On Mar 9, 5:39 pm, ColinFine colin.f...@pace.com wrote:
On Mar 6, 5:30 pm, SamuelXiao foolsmart2...@gmail.com wrote: Hi, David, it
seems that periodicalupdater send request first,
breaking down the preview code
setting new Ajax.Request. And the object is no longer refering to the
gotopreview function.
Because the firebug console returns the link that the
periodicalupdater request sever to update something,
just after that I move over any of the four elements (toplink), it
doesn't work.
I'm sorry, I don't understand what you say is happening. There should
be no relationship between the PeriodicalUpdater and the other
Request. What do you mean when you say it 'breaks down' the preview
code - what actually happens?
You say 'the object is no longer referring to the gotopreview
function', but I don't know which object you mean.
Colin
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] How to correct the following code?
My code is to preview webpages when user move mouse over a/a. At
the same time, my code has other parts using Prototype
periodicalupdater.
The following code can work well independently:
// javascript preview program start
var ci;
var xPos,yPos;
Event.observe(window,'load',function(){
var elms = document.getElementsByClassName(toplink);
Event.observe(elms[0],'mouseover',function(ev){gotopreview(ev,
0);});
Event.observe(elms[1],'mouseover',function(ev){gotopreview(ev,1);});
Event.observe(elms[2],'mouseover',function(ev){gotopreview(ev,2);});
Event.observe(elms[3],'mouseover',function(ev){gotopreview(ev,3);});
});
function gotopreview(event,ci){
alert(ci);
xPos = Event.pointerX(event);
yPos = Event.pointerY(event);
var getpostid=document.getElementsByName(targetpid);
var getsid = document.getElementsByName(stdid);
var url = getOnePost.php;
var pars = stdid=+getsid[ci].value + targetpid= + getpostid
[ci].value;
var myajax = new Ajax.Request(url,{
method:'get',
parameters: pars,
asynchronous: true,
onSuccess: function(transport){
$('previewWin').update(transport.responseText);
$('previewWin').style.top = parseInt(yPos) + 2 + px;
$('previewWin').style.left = parseInt(xPos) + 2 + px;
$('previewWin').style.visibility = visible;
$('previewWin').onmouseout =function(){ $
('previewWin').style.visibility = hidden;}
}
});
}
// javascript preview program end
// The above code can work well independently.
And my html page is link:
html
head
/head
body
a class=toplink value=XX/a
a class=toplink value=XX/a
a class=toplink value=XX/a
a class=toplink value=XX/a
div id=previewWin/div
/body
/html
But when it comes to work with the periodical updater, it seems that
periodicalupdater send request first, breaking down the preview code
setting new Ajax.Request. And the object is no longer refering to the
gotopreview function.
The following is my periodical code,
obj = new Object();
obj.f1 = eventHandler;
window.onload = obj.f1;
window.onunload = function(){};
function eventHandler(){
postUpdater();
}
function postUpdater() {
var myAjax = new Ajax.PeriodicalUpdater(
recentPost,
recentPost.php,
{
method: 'get',
frequency: 50
});
}
I use firebug to check the program and found that before I move mouse
over the toplink anchor, the postUpdater() function will send
request to the Sever thus, my preview code is no longer work. I know
that there is bind and bindAsListener function to bind the gotopreview
function. I tried but it's not work also, could some one help me or
tell me how to modify the code to make it work? Is there any way stop
the periodicalUpdater when it is loaded? Or if I must to use bind or
bindAsListener, how to write it correctly in the above code? Any help
would be appreciated!
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: problem of preview a website using Prototype
Could someone please help me? What I want to is to bind the variable
i to gotopreview(event,i) function, thus everytime the toplink
[i].onmouseover, there is a preview web page shown, I modify the code
to use listeners in the following fun, but firebug tells me getsid
[i].value is not defined, how can i pass the i value to gotopreview?
At the same time, it would not conflict other functions?
Event.observe(window,'load',function(){
var temp = document.getElementById('newtoplink');
var ntlink = temp.getElementsByTagName(a);
this.i = 0;
var temp = this;
for(var i =0;intlink.length;i++){
Event.observe(ntlink[i],mouseover,gotopreview.bindAsEventListener
(this));
}
});
function gotopreview(event,i){
var xPos, yPos;
xPos = Event.pointerX(event);
yPos = Event.pointerY(event);
var getpostid=document.getElementsByName(postid);
var getsid = document.getElementsByName(stdid);
var url = getOnePost.php;
var pars = stdid=+getsid[i].value + postid= + getpostid
[i].value;
new Ajax.Request(url,{
method:'get',
parameters: pars,
asynchronous: true,
onSuccess: function(transport){
$('previewWin').update(transport.responseText);
$('previewWin').style.top = parseInt(yPos) + 2 + px;
$('previewWin').style.left = parseInt(xPos) + 2 + px;
$('previewWin').style.visibility = visible;
$('previewWin').onmouseout = hidePreview;
}
});
}
function hidePreview(){
$('previewWin').style.visibility = hidden;
}
Any help would be appreciated.
On Feb 28, 8:43 pm, SamuelXiao foolsmart2...@gmail.com wrote:
I am writing javascript code to show web page preview. There are
links in my website (e.g. 4 links), when user move mouse over each
a/a (a class called toplink is assigned to each a tag), a
preview content box is shown , it works well in the following way:
window.onload = initAll;
var xPos, yPos;
var i;
function initAll(){
var elms = document.getElementsByClassName(toplink);
for (i=0;ielms.length;i++)
{
elms[i].onmouseover=function(v){
return
function(event){gotopreview(event,v);}
}(i)
}
}
function gotopreview(event,i){
xPos = Event.pointerX(event);
yPos = Event.pointerY(event);
var getpostid=document.getElementsByName(postid);
var getsid = document.getElementsByName(stdid);
var url = getOnePost.php;
var pars = stdid=+getsid[i].value + postid= + getpostid
[i].value;
var myajax = new Ajax.Request(url,{
method:'get',
parameters: pars,
asynchronous: true,
onSuccess: function(transport){
$('previewWin').update(transport.responseText);
$('previewWin').style.top = parseInt(yPos) + 2 + px;
$('previewWin').style.left = parseInt(xPos) + 2 +
px;
$('previewWin').style.visibility = visible;
$('previewWin').onmouseout = hidePreview;
}
});
}
function hidePreview() {
$('previewWin').style.visibility = hidden;
}
In my html page, is like:
html
head
/head
body
a class=toplink value=XX/a
a class=toplink value=XX/a
a class=toplink value=XX/a
a class=toplink value=XX/a
/body
/html
For Server side, I check the code and it is ok.
/* Above code works well */
However, when it comes to make use of it with other Ajax code, it
doesn't work. The following code is not work:
obj = new Object;
obj.f1= eventHandler;
var xPos,yPos;
var i;
// I am required to do Javascript in a OO way.
window.onload =obj.f1;
window.onunload = function(){};
function eventHandler(){
callPreview();
deleteelse(); // ohter function;
}
function callPreview(){
var elms = document.getElementsByClassName(toplink);
for (i=0;ielms.length;i++)
{
elms[i].onmouseover=function(v){
return
function(event){gotopreview(event,v);}
}(i)
}
}
function gotopreview(event,i){
xPos = Event.pointerX(event);
yPos = Event.pointerY(event);
var getpostid=document.getElementsByName(postid);
var getsid = document.getElementsByName(stdid);
var url = getOnePost.php;
var pars = stdid
[Proto-Scripty] problem of preview a website using Prototype
I am writing javascript code to show web page preview. There are
links in my website (e.g. 4 links), when user move mouse over each
a/a (a class called toplink is assigned to each a tag), a
preview content box is shown , it works well in the following way:
window.onload = initAll;
var xPos, yPos;
var i;
function initAll(){
var elms = document.getElementsByClassName(toplink);
for (i=0;ielms.length;i++)
{
elms[i].onmouseover=function(v){
return
function(event){gotopreview(event,v);}
}(i)
}
}
function gotopreview(event,i){
xPos = Event.pointerX(event);
yPos = Event.pointerY(event);
var getpostid=document.getElementsByName(postid);
var getsid = document.getElementsByName(stdid);
var url = getOnePost.php;
var pars = stdid=+getsid[i].value + postid= + getpostid
[i].value;
var myajax = new Ajax.Request(url,{
method:'get',
parameters: pars,
asynchronous: true,
onSuccess: function(transport){
$('previewWin').update(transport.responseText);
$('previewWin').style.top = parseInt(yPos) + 2 + px;
$('previewWin').style.left = parseInt(xPos) + 2 + px;
$('previewWin').style.visibility = visible;
$('previewWin').onmouseout = hidePreview;
}
});
}
function hidePreview() {
$('previewWin').style.visibility = hidden;
}
In my html page, is like:
html
head
/head
body
a class=toplink value=XX/a
a class=toplink value=XX/a
a class=toplink value=XX/a
a class=toplink value=XX/a
/body
/html
For Server side, I check the code and it is ok.
/* Above code works well */
However, when it comes to make use of it with other Ajax code, it
doesn't work. The following code is not work:
obj = new Object;
obj.f1= eventHandler;
var xPos,yPos;
var i;
// I am required to do Javascript in a OO way.
window.onload =obj.f1;
window.onunload = function(){};
function eventHandler(){
callPreview();
deleteelse(); // ohter function;
}
function callPreview(){
var elms = document.getElementsByClassName(toplink);
for (i=0;ielms.length;i++)
{
elms[i].onmouseover=function(v){
return
function(event){gotopreview(event,v);}
}(i)
}
}
function gotopreview(event,i){
xPos = Event.pointerX(event);
yPos = Event.pointerY(event);
var getpostid=document.getElementsByName(postid);
var getsid = document.getElementsByName(stdid);
var url = getOnePost.php;
var pars = stdid=+getsid[i].value + postid= + getpostid
[i].value;
var myajax = new Ajax.Request(url,{
method:'get',
parameters: pars,
asynchronous: true,
onSuccess: function(transport){
$('previewWin').update(transport.responseText);
$('previewWin').style.top = parseInt(yPos) + 2 + px;
$('previewWin').style.left = parseInt(xPos) + 2 + px;
$('previewWin').style.visibility = visible;
$('previewWin').onmouseout = hidePreview;
}
});
}
function hidePreview() {
$('previewWin').style.visibility = hidden;
}
// The above code is not work.
it seems that the problem is relating the window.onload and the object
obj. But, I am required to keep it in OO way. Thus, are there any
method that I can do it? Any help would be appreciated!
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: How to solve the following In-Place Editing problem?
Not found'); } The only requirement for this to work would be that you follow a naming convention with your elements that matches your DB schema (or provide some sort of concordance in the server code). Walter On Feb 18, 2009, at 11:29 AM, SamuelXiao wrote: My question is, how can I check whether the user click the title or the content? If he clicks the content, modify it, the new content will be sent and updated. And if he clicks the title, modify it, the new title will be sent and updated. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
