Control.Modal Ajax Not Updating

I am trying to get the modal to update via Ajax and for some reason I cannot get it to output the response text. Here is the function:

function showModal(uid,svsURL,id){ 
        var url = svsURL;
        var eleid = id;
        m = new Control.Modal(eleid,{ 
                method:'get',
                position: 'mouse',
                contents: function(){ 
                    new Ajax.Request(url,{ 
                        onComplete:function(request){ 
                            this.update(request.responseText);
                        }.bind(this) 
                    }); 
                    return 'Loading';
                } 
        }); 
        m.open(); 
}  

It is being called from an IMG onMouseOver event:

onMouseOver="showModal(,'/services/svs_modal_loadHoverInfo.jsp?p=','t10_User');"

"Loading" appears fine, but the response text is never return. If I replace "this.update..." with a JS alert the alert does fire. Also, I can get the modal to work if I call a seperate JS function and load another modal, but that shouldn't be necessary. Just in case you don't know what I mean here is the code:

function showModalContents(eleid, response){
    Control.Modal.close();
    m = new Control.Modal(eleid,{
        overlayDisplay: false,
        position: 'mouse',
        contents: function(){
            return response;
        }
    });
    m.open();
}
function showModal(uid,svsURL,id){ 
        var url = svsURL;
        var eleid = id;
        Control.Modal.close();
        m = new Control.Modal(eleid,{ 
                method:'get',
                position: 'mouse',
                contents: function(){ 
                    new Ajax.Request(url,{ 
                        onComplete:function(request){ 
                            showModalContents(eleid,request.responseText);
                        }.bind(this) 
                    }); 
                    return 'Loading';
                } 
        }); 
        m.open(); 
} 

This code works, but I lose all of the modal functionality, such as the tooltip.

Any help is apprecaited. Thanks.

Posted August 10th, 2007 at 6:51pm by BrodySlater

I had the same problem and still don't have a good solution to it :( All i've done is invert the calls so that the ajax request triggers the modal - the example I couldn't get to work either.

function ajaxModal(container,url,params) {
var ajax = new Ajax.Request(url,{
            method: 'post',
            parameters: params,
        onSuccess: function(request){
                                    var m = new Control.Modal(container,{
                                                            loading: 'loading',
                                                            contents: request.responseText
                                                    });
                                    m.open();
                }
            });
}

Posted August 16th, 2007 at 3:46am by gideon

I have the same problem. Your workaround fixes it but like you said that shouldn't be necessary. Everything worked well in earlier version (1.2.11).

I saw another thread with the same problem http://livepipe.net/community/control_suite/177 but no solution there either.

Could someone post a working sample with ajax if possible? Thanks.

Posted August 31st, 2007 at 8:27am by jvl

I traced the JS and found out the exception that occurs: "TypeError: this.update is not a function". I have prototype.js version 1.5.0 and the error is catched at line 946.

I have included the js files like this. Is the order

<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript" src="object.event.js" ></script>
<script type="text/javascript" src="control.modal.js" ></script>

This is my testing function

function testModal(){
  m = new Control.Modal(false,{
    contents: function(){  
      new Ajax.Request("anyurl.html",{ 
        method: 'get',   
        onComplete: function(request){  
          this.update(request.responseText);  
        }.bind(this)  
      });  
      return 'loading';  
    },
  });
  m.open();
}

And here is where it fails.

    try {
      (this.options['on' + state] || Prototype.emptyFunction)(transport, json);
      Ajax.Responders.dispatch('on' + state, this, transport, json);
    } catch (e) { /* this is where the update fails */
      this.dispatchException(e);
    }

I use firefox 1.5.0.12 more specifically:

Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.8.0.12) Gecko/20070530 Fedora/1.5.0.12-1.fc6 Firefox/1.5.0.12

I will appriciate any help regarding this matter, thank you.

Posted August 31st, 2007 at 9:01am by jvl

onComplete:function(t){
    Control.modal.container.update(t.responseText);
}

worked for me :)

Posted September 2nd, 2007 at 3:08pm by Roland

That works for me too. Many thanks :)

Posted September 3rd, 2007 at 1:34am by jvl