SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot sonic_2k_uk's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with ajax request from a window

    Hi,

    I have a problem trying to call a method in the parent window from a popup.

    The problem isn't that the parent method cannot be called, but the method is either not managing to find an attribute or the ajax request it is executing is not being dealt with correctly.

    The situation -

    I have an object called "Event" with a method called "updateSessionDate", which runs as it should. The method uses an ajax object to execute an ajax request.

    A date input field has an onchange event so that it calls the updateSessionDate method when the field is updated.

    There is also an option to open up a popup with a calendar, which lists a bunch of dates, and when clicked updates the date input field.

    When the date field is changed in this fashion the onchange event is not triggered. This could cause a few problems, so i have been attempting to call the updateSessionDate method from the popup window when a date is clicked.

    Code JavaScript:
    /*
    * Event.updateSessionDate Function
    * Update the session date
    * @param integer sessionID Breakout Session ID
    */
     
    Event.prototype.updateSessionDate = function (sessionID)
    {
     
    	// Get details
     
    	var arrDetails	= new Array (
    		new Array ("action",						'update'),
    		new Array ("section",						'sessions'),
    		new Array ("type",							'session'),
    		new Array ("value",							'date'),
    		new Array ("event_id",						this.intEventID),
    		new Array ("session_id",					sessionID),
    		new Array ("session_date",					document.getElementById ('breakoutsessions-' + sessionID + '-date').value)
    	);
     
    	// Set query
     
    	this.objAjax.setQuery (arrDetails);
     
    	// Set Return
     
    	this.objAjax.setReturn (new Array ('returnUpdate', this));
     
    	// Post
     
    	this.objAjax.Post ();
     
    }

    Code JavaScript:
    /*
    * Ajax.Post Function
    * Send a post ajax request
    */
     
    Ajax.prototype.Post = function ()
    {
     
    	// Set HTTP request
     
    	this.setRequest ();
     
    	// Set the current object
     
    	var _this			= this;
     
    	// Set the state change function for the request object
     
    	this.objRequest.onreadystatechange	= function () { _this.requestChange () };
     
    	// Open request
     
    	this.objRequest.open ('POST', this.strURL, true);
     
    	// Set request header
     
    	this.objRequest.setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
     
    	// Send the request
     
    	this.objRequest.send (this.strQuery);
    }
     
     
    /*
    * Ajax.requestChange Function
    * Ran when the ajax object state changes
    * readyState Codes:
    * 0 = uninitialized
    * 1 = loading
    * 2 = loaded
    * 3 = interactive
    * 4 = complete
    */
     
    Ajax.prototype.requestChange = function ()
    {
     
    	// If the request is complete
     
    	if (this.objRequest.readyState == 4)
    	{
     
    		// Run the return function and pass the returned text
     
    		if (this.objParent)
    		{
     
    			eval ('this.objParent.' + this.strReturn + '.call(this.objParent, this.objRequest.responseText);');
     
    		}
    		else
    		{
     
    			eval (this.strReturn + '(this.objRequest.responseText);');
     
    		}
     
    	}
     
    }

    And onto the problem...

    The following code is called when a date is clicked in the calendar popup:

    Code JavaScript:
    opener.objEvent.updateSessionDate (id);

    Now i'd expected this to work, but it does not return any data from the ajax request.

    The request is still executed and the query string is sent (tried alerting the string, and it works fine), and the requestChange method is called, but no response is returned UNLESS i add the alert after the this.objRequest.send () call in the ajax post method, and everything works fine!!!

    I had also tried using something along the lines of:

    Code JavaScript:
    opener.objEvent.updateSessionDate.call (opener.document.getElementById('elementID'), id);

    But an error saying that "this.objAjax has no properties" referencing the ajax setQuery method call in the updateSessionDate method is returned.

    If anyone is still reading this, any help is much appreciated!

    Many thanks,

    Andy

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try window.opener rather then just opener. Also, make sure your window is being opened using window.open.


  3. #3
    SitePoint Zealot sonic_2k_uk's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for your reply.

    Have used window.opener.objEvent.updateSessionDate (id); instead, and still same problem with no response.

    Cheers,

    Andy

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does the updateSessionDate work on the parent page? what is objEvent?


  5. #5
    SitePoint Zealot sonic_2k_uk's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes updateSessionDate works correctly on the parent page, just not when called from the popup.

    objEvent is an object that contains the updateSessionDate method. It also contains other methods to deal with other event details as, apposed to an event session, and attrbitures such as the event ID and the ajax object, which are set in the object constructor.

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use

    Code:
    alert(typeof(window.opener) + '\n' + typeof(window.opener.objEvent) + '\n' + typeof(window.opener.objEvent.updateSessionDate));
    What does the above return?


  7. #7
    SitePoint Zealot sonic_2k_uk's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Run in the popup in window:

    object
    object
    function

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very strange.

    In your updateSessionDate, have you tried putting an alert to see whether it's actually being hit? Also, if your using Firefox, to install FireBug and then you can debug whats happening.

    Also, could be worth typing the following into your address bar whilst the pop-up is open:

    javascript:window.opener.objEvent.updateSessionDate('test'); and seeing whether it works?


  9. #9
    SitePoint Zealot sonic_2k_uk's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yes the updateSessionDate and the ajax methods, and ajax return method are all being called. The problem seems to be that unless i put something like an alert after the post in the ajax post method nothing is returned.

    The javascript:window.opener.objEvent.updateSessionDate('test'); in the address bar works.

  10. #10
    SitePoint Zealot sonic_2k_uk's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved!

    Problem was that async was enabled for every ajax request, which it didnt like on this occasion:

    http://developer.mozilla.org/en/docs...chronous_Usage

    Ajax method modified as follows:

    Code JavaScript:
    /*
    * Ajax.Post Function
    * Send a post ajax request
    */
     
    Ajax.prototype.Post = function (blnAsync)
    {
     
    	// Set HTTP request
     
    	this.setRequest ();
     
    	// Set the current object
     
    	var _this			= this;
     
    	// Set the state change function for the request object
     
    	this.objRequest.onreadystatechange	= function () { _this.requestChange () };
     
    	// Sort out request sync
     
    	if (blnAsync == undefined)
    	{
     
    		blnAsync	= true;	
     
    	}
     
    	// Open request
     
    	this.objRequest.open ('POST', this.strURL, blnAsync);
     
    	// Set request header
     
    	this.objRequest.setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
     
    	// Send the request
     
    	this.objRequest.send (this.strQuery);
     
    }

    Many thanks,

    Andy

    (Shout out for Dave @ BF - cheers for the help)
    Last edited by sonic_2k_uk; Jun 21, 2007 at 02:18. Reason: shout for dave!


Bookmarks

Posting Permissions

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