Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pop up box in Ajax

    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

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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?

  • #4
    Regular Coder vw98034's Avatar
    Join Date
    Feb 2004
    Posts
    199
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ohgod View Post
    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:

    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?

  • #5
    Regular Coder vw98034's Avatar
    Join Date
    Feb 2004
    Posts
    199
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy

    Quote Originally Posted by ohgod View Post
    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.

  • #6
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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:

    Code:
    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.
    Last edited by ohgod; 02-03-2009 at 03:01 PM.

  • #7
    Regular Coder vw98034's Avatar
    Join Date
    Feb 2004
    Posts
    199
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:

    Code:
    		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:
    Code:
    	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.

  • #8
    Regular Coder vw98034's Avatar
    Join Date
    Feb 2004
    Posts
    199
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vw98034 View Post
    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:

    Code:
    		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:
    Code:
    	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.

  • #9
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    Code:
    win.getContent().update(searchReq.responseText);
    where do you see update() in the api?

    Code:
    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.

  • #10
    Regular Coder vw98034's Avatar
    Join Date
    Feb 2004
    Posts
    199
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ohgod View Post
    Code:
    win.getContent().update(searchReq.responseText);
    where do you see update() in the api?

    Code:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •