Pop up box in Ajax

[maverick83]

Hi

I want to design a pop up in ajax but i am not able to do it

i adopted the following approach first :-
i will post some code below :- it is in HTML ,we can also use mouse over event for this portion<div id="more">
<p>Click for pop up</p>
</div>
what i am currently doing in JS is given below:-// YUE.on("more" , 'click', popupDialog) ; i am decalring this first and then below i am defining the function popupDialpog function popupDialog( e)
Click: {
onClick: {
Popup: {
id: 'static-content' ,
width: '300px',
effect: {effect:YAHOO. widget.Container Effect.FADE, duration: 0.2},
hd: 'Static Content',
bd: '<p>This is a paragraph of text. It starts in the previous sentence. It finishes at this period.</p><p>This is some <strong>bold text</strong> and some <em>italic text</em>.</p>',
ft: ''
}
}
}
}); but when i see the webpage it says "expect string,identifier or number" from the line where the funtion popupDialog is getting started

is this the right way ,looking forward for a favorable response form ur side

regards,
rahul

[A1ien51]

When you post code in forums, please use code tags so it looks nice.

Have you tried to use Firefox with the Firebug extension? That should give you a better error message.

Eric

[ohgod]

if you want some simple, sexy popups:

http://prototype-window.xilinus.com/index.html


some really nice stuff there, VERY easy to use. anymore i figure, why reinvent the wheel?

[vw98034]

Originally Posted by ohgod

if you want some simple, sexy popups:

http://prototype-window.xilinus.com/index.html


some really nice stuff there, VERY easy to use. anymore i figure, why reinvent the wheel?

I used the library with the following code:

			win = new Window({className: "default", title: "Comments", width:400, height:350, destroyOnClose: true, recenterAuto:false}); 
			win.getContent().update(searchReq.responseText); 
			win.showCenter();

And I have /js/window.js, /js/prototype.js, and default.css in the path. The content is shown up, but not the window itself. I believe that is something wrong with the CSS. I, however, can't find any causes.

What I miss here?

[vw98034]

Originally Posted by ohgod

if you want some simple, sexy popups:

http://prototype-window.xilinus.com/index.html


some really nice stuff there, VERY easy to use. anymore i figure, why reinvent the wheel?

Based on my test, this library don't work for Ajax at all with IE 7.

[ohgod]

yes it does. i use it all the time. it actually has like 3 ways to work with ajax.... read the documentation.

for easy ajax content try something like:

win = new Window({title: "Comments", width:400, height:350, destroyOnClose: true, recenterAuto:false });
win.setAjaxContent('./mypage.php');
win.show();

and if you're using default.... you don't need to specify it. that's why it's default :P


if the images\styling still don't show up, your path is probably wrong.

[vw98034]

Thanks "Oh God" for your follow-up.

I have tried more than one ways to get the content up on the popup window. The first try is with Dialog as the following:

		Dialog.alert({url: '../webSiteEntry/getComments.htm?wid=' + wid, options: {method: 'get'}}, {className: "alphacube", width:540, okLabel: "Close"});

The content doesn't show up with IE 7, but FireFox and Safari. And I try the following:

	function retrieveComments(n){

		if ((searchReq.readyState == 4 || searchReq.readyState == 0) ) {
			searchReq.open("GET", '../webSiteEntry/getComments.htm?wid=' + n, /*async*/true);
			searchReq.onreadystatechange = handleCommentRetrieve; 
			searchReq.send(/*no params*/null);
		}
	}

	//Called when the AJAX response is returned.
	function handleCommentRetrieve() {
		if (searchReq.readyState == 4) {
			win = new Window({className: "dialog", title: "Comments", width:400, height:350, destroyOnClose: true, recenterAuto:false}); 
			win.getContent().update(searchReq.responseText); 
//			win.getContent().innerHTML= "<h3>Hello, my darling!</h3>";//searchReq.responseText;
			win.showCenter();	

		}
	}

I get the same result as the previous one. And I try your approach without any luck.

When I replace the Ajax response section with a static text, the content is shown.

[vw98034]

Originally Posted by vw98034

Thanks "Oh God" for your follow-up.

I have tried more than one ways to get the content up on the popup window. The first try is with Dialog as the following:

		Dialog.alert({url: '../webSiteEntry/getComments.htm?wid=' + wid, options: {method: 'get'}}, {className: "alphacube", width:540, okLabel: "Close"});

The content doesn't show up with IE 7, but FireFox and Safari. And I try the following:

	function retrieveComments(n){

		if ((searchReq.readyState == 4 || searchReq.readyState == 0) ) {
			searchReq.open("GET", '../webSiteEntry/getComments.htm?wid=' + n, /*async*/true);
			searchReq.onreadystatechange = handleCommentRetrieve; 
			searchReq.send(/*no params*/null);
		}
	}

	//Called when the AJAX response is returned.
	function handleCommentRetrieve() {
		if (searchReq.readyState == 4) {
			win = new Window({className: "dialog", title: "Comments", width:400, height:350, destroyOnClose: true, recenterAuto:false}); 
			win.getContent().update(searchReq.responseText); 
//			win.getContent().innerHTML= "<h3>Hello, my darling!</h3>";//searchReq.responseText;
			win.showCenter();	

		}
	}

I get the same result as the previous one. And I try your approach without any luck.

When I replace the Ajax response section with a static text, the content is shown.

Ok, it seems to be some problems on the data retrieval with IE 7, but not the library itself.

[ohgod]

win.getContent().update(searchReq.responseText);

where do you see update() in the api?

win.getContent().innerHTML

why aren't you using setHTMLContent(html) ?



where is wid set prior to your attempt at an alert?

most likely is that you're battling an incompatibility in ie7. there is usually a workaround, we just have to identify the problem first.

[vw98034]

Originally Posted by ohgod

win.getContent().update(searchReq.responseText);

where do you see update() in the api?

win.getContent().innerHTML

why aren't you using setHTMLContent(html) ?



where is wid set prior to your attempt at an alert?

most likely is that you're battling an incompatibility in ie7. there is usually a workaround, we just have to identify the problem first.

Thanks for your information.

I am still battling with this problem. The root problem is that the request is not sent with IE 7, but does with Firefox and Safari. I haven't figured out the cause yet.