thr3ads.net - Rails spinoffs - [Rails-spinoffs] InPlaceEditor crash on Safari [Oct 2005]

If this information is useful, please help other people find it:
Share via:

Michael Zachariassen Krog

2005-Oct-05 13:10 UTC

[Rails-spinoffs] InPlaceEditor crash on Safari

Quick question..

I often crash my Safari when using ''Enter'' on
InPlaceEditor''s for
submitting.
Works fine on firefox(win & Mac) - no javascript errors.

Anyone else seen this behavior?
(Maybe it is just my alterings of InPlaceEditor  :-)

Best Regards
Michael Krog

Ed C.

2005-Oct-05 13:29 UTC

head link

[Rails-spinoffs] InPlaceEditor crash on Safari

Can you send us your "alterings"?

On 10/5/05, Michael Zachariassen Krog <mic@apaq.dk>
wrote:>
> Quick question..
>
> I often crash my Safari when using ''Enter'' on
InPlaceEditor''s for
> submitting.
> Works fine on firefox(win & Mac) - no javascript errors.
>
> Anyone else seen this behavior?
> (Maybe it is just my alterings of InPlaceEditor :-)
>
> Best Regards
> Michael Krog
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20051005/2576a3f7/attachment.html

Michael Zachariassen Krog

2005-Oct-05 13:47 UTC

head link

[Rails-spinoffs] InPlaceEditor crash on Safari

> Can you send us your "alterings"?
Sure..  But I really don''t expect anybody to put any effort into my  
custom InPlaceEditor.

Quick overview of what I''ve added:
- enable/disable field (this.disabled)
- submitOnBlur: If true ok/cancel-buttons wont show and field will be  
submitted on leaving/blur
- noTextValue: Text that will be shown if field is empty and not  
being edited.
- maxlength: maximum input length for a field (eg. <input maxlength=12>)

If any of my custom changes would be root for the crash I would  
believe it should
be the submitOnBlur, which consists of:

A function:
   onBlur: function(e) {
     if(this.options.submitOnBlur)
         this.onSubmit();
     else
         this.onclickCancel();
     if(this.options.onBlur) this.options.onBlur(e);
     return true;
   }

Changes in getForm():
     .......
     if(!this.options.submitOnBlur){
         ......
         <create ok/cancel buttons>
         ......
     }

New eventlistener on texfield in createTextField()
     textField.onblur = this.onBlur.bind(this);


Here is the complete InPlaceEditor:

Ajax.InPlaceEditor = Class.create();
Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
Ajax.InPlaceEditor.prototype = {
   initialize: function(element, url, options) {
     this.url = url;
     this.element = $(element);
     this.disabled = false;

     this.options = Object.extend({
       okText: "ok",
       cancelText: "cancel",
       savingText: "Saving...",
       clickToEditText: "Click to edit",
       okText: "ok",
       rows: 1,
       onComplete: function(transport, element) {
         new Effect.Highlight(element, {startcolor:  
this.options.highlightcolor});
       },
       onFailure: function(transport) {
         alert("Error communicating with the server: " +  
transport.responseText.stripTags());
       },
       callback: function(form) {
         return Form.serialize(form);
       },
       handleLineBreaks: true,
       loadingText: ''Loading...'',
       savingClassName: ''inplaceeditor-saving'',
       formClassName: ''inplaceeditor-form'',
       highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
       highlightendcolor: "#FFFFFF",
       externalControl:    null,
       submitOnBlur: false,
       noTextValue: null,
       maxlength:-1,
       ajaxOptions: {}
     }, options || {});

     this.noTextFlag=true;

     if(!this.options.formId && this.element.id) {
       this.options.formId = this.element.id + "-inplaceeditor";
       if ($(this.options.formId)) {
         // there''s already a form with that name, don''t
specify an id
         this.options.formId = null;
       }
     }

     if (this.options.externalControl) {
       this.options.externalControl = $(this.options.externalControl);
     }

     this.originalBackground = Element.getStyle(this.element,  
''background-color'');
     if (!this.originalBackground) {
       this.originalBackground = "transparent";
     }

     this.originalFontStyle=this.element.style.fontStyle;
     this.originalFontColor=this.element.style.color;

    
this.originalFontSize=Element.getStyle(this.element,''font-size'');

     this.element.title = this.options.clickToEditText;

     this.onclickListener = this.enterEditMode.bindAsEventListener 
(this);
     this.mouseoverListener = this.enterHover.bindAsEventListener(this);
     this.mouseoutListener = this.leaveHover.bindAsEventListener(this);
     Event.observe(this.element, ''click'',
this.onclickListener);
     Event.observe(this.element, ''mouseover'',
this.mouseoverListener);
     Event.observe(this.element, ''mouseout'',
this.mouseoutListener);
     if (this.options.externalControl) {
       Event.observe(this.options.externalControl, ''click'',  
this.onclickListener);
       Event.observe(this.options.externalControl,
''mouseover'',
this.mouseoverListener);
       Event.observe(this.options.externalControl, ''mouseout'',
this.mouseoutListener);
     }

     this.checkForNoText();
   },
   setTextStyle:function(style){
     switch(style){
         case "normal":
             this.element.style.fontStyle=this.originalFontStyle;
             this.element.style.color=this.originalFontColor;
             break;
         case "notext":
             this.element.style.fontStyle="italic";
             this.element.style.color="grey";
             break;
     }
   },
   checkForNoText: function(){
     this.noTextFlag=(this.element.innerHTML=="");

     if(this.noTextFlag && this.options.noTextValue!=null){
         this.element.innerHTML=this.options.noTextValue;
         this.setTextStyle("notext");
     }
     else
         this.setTextStyle("normal");
   },
   enterEditMode: function() {
     if (this.saving) return;
     if (this.editing) return;
     if (this.disabled) return;
     this.editing = true;
     this.onEnterEditMode();
     if (this.options.externalControl) {
       Element.hide(this.options.externalControl);
     }
     Element.hide(this.element);
     this.form = this.getForm();
     this.element.parentNode.insertBefore(this.form, this.element);
     Field.focus(this.editField);
     // stop the event to avoid a page refresh in Safari
     if (arguments.length > 1) {
       Event.stop(arguments[0]);
     }
   },
   getForm: function() {
     form = document.createElement("form");
     form.id = this.options.formId;
     Element.addClassName(form, this.options.formClassName)
     form.onsubmit = this.onSubmit.bind(this);

     this.createEditField(form);

     if (this.options.textarea) {
       var br = document.createElement("br");
       form.appendChild(br);
     }

     if(!this.options.submitOnBlur){
         okButton = document.createElement("input");
         okButton.type = "submit";
         okButton.value = this.options.okText;
         form.appendChild(okButton);

         cancelLink = document.createElement("a");
         cancelLink.href = "#";
         cancelLink.appendChild(document.createTextNode 
(this.options.cancelText));
         cancelLink.onclick = this.onclickCancel.bind(this);
         form.appendChild(cancelLink);
     }
     return form;
   },
   hasHTMLLineBreaks: function(string) {
     if (!this.options.handleLineBreaks) return false;
     return string.match(/<br/i) || string.match(/<p>/i);
   },
   convertHTMLLineBreaks: function(string) {
     return string.replace(/<br>/gi,
"\n").replace(/<br\/>/gi,
"\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi,
"");
   },
   createEditField: function(form) {
     if (this.options.rows == 1 && !this.hasHTMLLineBreaks 
(this.getText())) {
       this.options.textarea = false;
       var textField = document.createElement("input");
       textField.type = "text";
       textField.name = "value";
       textField.onblur = this.onBlur.bind(this);
       textField.value = this.getText();
       textField.style.backgroundColor = this.options.highlightcolor;
       textField.style.fontSize = this.originalFontSize;
       var size = this.options.size || this.options.cols || 0;
       if (size != 0)
         textField.size = size;
       if(this.options.maxlength>=0)
         textField.maxLength=this.options.maxlength;
       form.appendChild(textField);
       this.editField = textField;
     } else {
       this.options.textarea = true;
       var textArea = document.createElement("textarea");
       textArea.name = "value";
       textArea.onblur = this.onBlur.bind(this);
       textArea.value = this.convertHTMLLineBreaks(this.getText());
       textArea.style.fontSize = this.originalFontSize;
       textArea.rows = this.options.rows;
       textArea.cols = this.options.cols || 40;
       form.appendChild(textArea);
       this.editField = textArea;
     }
   },
   getText: function() {
     if (this.options.loadTextURL) {
       this.loadExternalText();
       return this.options.loadingText;
     } else {
       var text;
       text=this.element.innerHTML;
       if(this.noTextFlag && this.options.noTextValue!=null)
         text="";
       return text;
     }
   },
   setText: function(value) {
     this.element.innerHTML=value;
     this.checkForNoText();
   },
   loadExternalText: function() {
     new Ajax.Request(
       this.options.loadTextURL,
       {
         asynchronous: true,
         onComplete: this.onLoadedExternalText.bind(this)
       }
     );
   },
   onLoadedExternalText: function(transport) {
     this.form.value.value = transport.responseText.stripTags();
   },
   onclickCancel: function() {
     this.onComplete();
     this.leaveEditMode();
     return false;
   },
   onBlur: function(e) {
     if(this.options.submitOnBlur)
         this.onSubmit();
     else
         this.onclickCancel();
     if(this.options.onBlur) this.options.onBlur(e);
     return true;
   },
   onFailure: function(transport) {
     this.options.onFailure(transport);
     if (this.oldInnerHTML) {
       this.element.innerHTML = this.oldInnerHTML;
       this.oldInnerHTML = null;
     }
     return false;
   },
   onSubmit: function() {
     //alert("submit");
     this.saving = true;
     new Ajax.Updater(
       {
         success: this.element,
          // don''t update on failure (this could be an option)
         failure: null
       },
       this.url,
       Object.extend({
         parameters: this.options.callback(this.form,  
this.editField.value),
         onComplete: this.onComplete.bind(this),
         onFailure: this.onFailure.bind(this)
       }, this.options.ajaxOptions)
     );
     this.onLoading();
     // stop the event to avoid a page refresh in Safari
     if (arguments.length > 1) {
       Event.stop(arguments[0]);
     }
     return false;
   },
   onLoading: function() {
     this.saving = true;
     this.removeForm();
     this.leaveHover();
     this.showSaving();
   },
   showSaving: function() {
     this.setTextStyle("normal");
     this.oldInnerHTML = this.element.innerHTML;
     this.element.innerHTML = this.options.savingText;
     Element.addClassName(this.element, this.options.savingClassName);
     this.element.style.backgroundColor = this.originalBackground;
     Element.show(this.element);
   },
   removeForm: function() {
     if(this.form) {
       Element.remove(this.form);
       this.form = null;
     }
   },
   enterHover: function() {
     if (this.saving) return;
     this.element.style.backgroundColor = this.options.highlightcolor;
     if (this.effect) {
       this.effect.cancel();
     }
     Element.addClassName(this.element, this.options.hoverClassName)
   },
   leaveHover: function() {
     if (this.options.backgroundColor) {
       this.element.style.backgroundColor = this.oldBackground;
     }
     Element.removeClassName(this.element, this.options.hoverClassName)
     if (this.saving) return;
     this.effect = new Effect.Highlight(this.element, {
       startcolor: this.options.highlightcolor,
       endcolor: this.options.highlightendcolor,
       restorecolor: this.originalBackground
     });
   },
   leaveEditMode: function() {
     Element.removeClassName(this.element,  
this.options.savingClassName);
     this.removeForm();
     this.leaveHover();
     this.element.style.backgroundColor = this.originalBackground;
     Element.show(this.element);
     if (this.options.externalControl) {
       Element.show(this.options.externalControl);
     }
     this.editing = false;
     this.saving = false;
     this.oldInnerHTML = null;
     this.onLeaveEditMode();
   },
   onComplete: function(transport) {
     this.leaveEditMode();
     this.checkForNoText();
     this.options.onComplete.bind(this)(transport, this.element);
   },
   onEnterEditMode: function() {},
   onLeaveEditMode: function() {},
   dispose: function() {
     if (this.oldInnerHTML) {
       this.element.innerHTML = this.oldInnerHTML;
     }
     this.leaveEditMode();
     Event.stopObserving(this.element, ''click'',
this.onclickListener);
     Event.stopObserving(this.element, ''mouseover'',  
this.mouseoverListener);
     Event.stopObserving(this.element, ''mouseout'',  
this.mouseoutListener);
     if (this.options.externalControl) {
       Event.stopObserving(this.options.externalControl,
''click'',
this.onclickListener);
       Event.stopObserving(this.options.externalControl,
''mouseover'',
this.mouseoverListener);
       Event.stopObserving(this.options.externalControl,
''mouseout'',
this.mouseoutListener);
     }
   }
};
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20051005/f7ba5a20/attachment-0001.html

Jon Tirsen

2005-Oct-05 17:30 UTC

head link

[Rails-spinoffs] InPlaceEditor crash on Safari

I''ve experienced intermittent crashes from Safari using Ajax stuff.
Especially when multiple requests happen at the same time. I think
there could be a potential complication because both onblur and
onsubmit would run at the same time when you hit enter. I think you
should put in a flag so that whatever happens first will do the
submit.

HTH

Cheers,
Jon

On 10/6/05, Michael Zachariassen Krog <mic@apaq.dk>
wrote:> Quick question..
>
> I often crash my Safari when using ''Enter'' on
InPlaceEditor''s for
> submitting.
> Works fine on firefox(win & Mac) - no javascript errors.
>
> Anyone else seen this behavior?
> (Maybe it is just my alterings of InPlaceEditor  :-)
>
> Best Regards
> Michael Krog
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

Faust

2005-Oct-05 23:25 UTC

head link

[Rails-spinoffs] Ajax.Request: responseText = null in Safari 1.3?

Hi,

I am using Ajax.Request to grab an HTML table from 
http://luther.edu/myxa/ssi.php and display it. Something like:

var myAjax = new Ajax.Request(http://luther.edu/myxa/ssi.php,
                              {method:''get'',
                               parameters:
''cur_month=2005-11'',
                               onSuccess: function(t) 
{$(''calwrap'').innerHTML = t.responseText;},
                               onFailure: function(t) { 
alert(''onFailure: '' + t.statusText);}
                              }
                             );

The actual code is available at http://luther.edu/new.php and 
http://luther.edu/js/myxaAjax.js.  It works great in IE/Win and Firefox, 
but not in Safari 1.3.  In Safari, the responseText is null.  Here is 
what I get with Safari:

readyState: 4
responseText: null
responseXML: object Document
status: Numeric undefined
statusText: undefined

Any tips?  Does my PHP script need to return certain headers for this to 
work in Safari?


Thanks in advance,

Faust


-- 
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.11.10/120 - Release Date: 10/5/2005

Michael Zachariassen Krog

2005-Oct-06 12:09 UTC

head link

[Rails-spinoffs] InPlaceEditor crash on Safari

Thx Jon.

That might just be it.

Best Regards
Michae Krog

Den 05/10/2005 kl. 22.39 skrev Jon Tirsen:
> I''ve experienced intermittent crashes from Safari using Ajax
stuff.
> Especially when multiple requests happen at the same time. I think
> there could be a potential complication because both onblur and
> onsubmit would run at the same time when you hit enter. I think you
> should put in a flag so that whatever happens first will do the
> submit.
>
> HTH
>
> Cheers,
> Jon
>
>
> On 10/6/05, Michael Zachariassen Krog <mic@apaq.dk> wrote:
>
>> Quick question..
>>
>> I often crash my Safari when using ''Enter'' on
InPlaceEditor''s for
>> submitting.
>> Works fine on firefox(win & Mac) - no javascript errors.
>>
>> Anyone else seen this behavior?
>> (Maybe it is just my alterings of InPlaceEditor  :-)
>>
>> Best Regards
>> Michael Krog
>>
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

Maybe Matching Threads

Search for more seemingly similar threads

Rails spinoffs - Oct 2005 - InPlaceEditor crash on Safari

[Rails-spinoffs] InPlaceEditor crash on Safari

[Rails-spinoffs] InPlaceEditor crash on Safari

[Rails-spinoffs] InPlaceEditor crash on Safari

[Rails-spinoffs] InPlaceEditor crash on Safari

[Rails-spinoffs] Ajax.Request: responseText = null in Safari 1.3?

[Rails-spinoffs] InPlaceEditor crash on Safari

Maybe Matching Threads