Thread

Hello,

I was wondering if anyone has any experience of using Safecracker in a Fancybox modal popup as I’ve encountered a javascript error when trying to do this. I’ve tested my Safecracker form within a Fancybox (called from a page href click) and without and the javascript error only appears when the form is within a fancybox (and only after the fancybox is opened on click).

The javascript error is:

Internet Explorer version:

Message: Object doesn't support this property or method
Line: 385337608
Char: 120
Code: 0
URI: <a href="http://ourdevsiteurl.net">http://ourdevsiteurl.net</a>

Or Chrome version:

Uncaught TypeError: Object #<t> has no method 'navigator'         <a href="http://ourdevsiteurl.net/:176">http://ourdevsiteurl.net/:176</a>
    u                                                               <a href="http://ourdevsiteurl.net/:176">http://ourdevsiteurl.net/:176</a>
    a.ee_filebrowser                                                     <a href="http://ourdevsiteurl.net/:177">http://ourdevsiteurl.net/:177</a>
    b                                                               jquery.min.js:121
    c.extend.ajax.g.w.onreadystatechange                        jquery.min.js:127

I’m taking a guess it’s got something to do with initialising the form in the DOM, timings etc.

Anyone suggestions very welcome. Thanks.

Mods: If this is deemed not a technical support query please feel free to move.

It does appear to be the EE JS filebrowser that’s conflicting here. As a temporary measure I’ve disabled the filebrowser in mod.channel_standalone.php;

{exp:safecracker channel="channel_name" preserve_checkboxes="yes" json="yes" logged_out_member_id="1" datepicker="no" id="inv_reg_form" use_live_url="no" disable_filebrowser = "true"}

function _setup_js($endpoint, $markItUp, $markItUp_writemode, $addt_js)
    {
        $include_jquery = ($this->EE->TMPL->fetch_param('include_jquery') == 'no') ? FALSE : TRUE;
        
        $disable_filebrowser  = ($this->EE->TMPL->fetch_param('disable_filebrowser') ? TRUE : FALSE); #MOD
        
        if (!$disable_filebrowser) {  # MOD
            $this->EE->load->library('filemanager');
            
            $js = $this->EE->filemanager->frontend_filebrowser($endpoint, $include_jquery);
    
            $json = array_merge_recursive($js['json'], $addt_js);
    
            $this->output_js['json'] = array(
                        'EE'                    => $json,
                        'mySettings'            => $markItUp,
                        'myWritemodeSettings'    => $markItUp_writemode
                );
    
            $this->output_js['str'] = $js['str'];
        }  #MOD
    }

Because of the way I’m using Safecracker in this particular instance, this works. It’s a hack though so would be interested in a better solution.

Oskar,

You could also try the safecracker_head=“no” parameter if you dont’t don’t require the Javascript functionality.

What version of EE and SC are you using?

Thanks for the suggestion John - didn’t work though I’m afraid.

Safecracker 1.0.2 + EE 2.1.3

Ah, hold on - I’ve just upgraded from SC 1.0.2 to 2.0 and it looks like it might have fixed it. Interestingly Rob’s put a changelog note for 1.0.3 stating “Added automagic JS combo loading”. While I don’t exactly know what that means, it does sound like it might possibly be addressing this very issue. 😉

Great stuff, I’ll continue to test, but looks like this might have sorted it.

Let us know if that fixes it, We’ll be here.

I am getting this same error while attempting the same thing.

EE => v2.1.3 Build:  20101220
Safecracker => v2.0

John,

I tried the following in my Safecracker tag:

{exp:channel:entry_form channel="email" return="site/index" include_jquery="no" safecracker_head="no"}

This didn’t change anything though. Has anyone found a resolve for this?

Thanks,

Oskar,

I don’t know if this would help you or not, but I worked out a way to achieve what I am doing without a “hack” to any of the EE or EE included code. The workaround uses an ajax call to a template which builds the modal when it’s needed dynamically.

So I created a template group named “SAEF”. In this, I created a simple template which I named “create”. (Very basic for this example) That template looks like this:

Note: I’m also using Solspace SAEF Redirect so I can push the newly created entry back to an application for what I need.

{exp:channel:entry_form channel="email" return="site/index" include_jquery="no"}
    <input type="hidden" name="entry_id_return" value="site/index/%%entry_id%%" />
    Name your e-mail
<input type="text" name="title" id="title" value="" size="50" maxlength="100"></p>
    <input type="submit" id="submit" name="submit" value="Submit" />
{/exp:channel:entry_form}

Now to call/create the modal from the parent page.

In the parent, I am calling the “create” from within another template. (The user makes a series of selections which determines which options to provide them with.)

That looks like this:

Note: You can ignore everything up to the “New” button. This is where the modal is being created. I just left the block in for clarification.

//
//    Page Opener
//
$("#modal_pageOption").dialog({
    title: "E-mail Builder",
    autoOpen: false,
    height: 150,
    width: 350,
    modal: true,
    open: function(event, ui){
        $("button.ui-state-focus").removeClass("ui-state-focus");
    },
    buttons: {
        "New": function(){
            //
            //    New
            //
            $.ajax({
                type: "POST",
                url: "/SAEF/create",
                success: function(data){
                    $("#modal_name").html(data).dialog({
                        title: "New E-mail",
                        autoOpen: false,
                        height: 225,
                        width: 450,
                        modal: true,
                        open: function(event, ui){
                            $("button.ui-state-focus").removeClass("ui-state-focus");                                    
                            },
                            buttons:{
                                "Close": function(){
                                    $(this).dialog("close");
                                }
                            }
                        });
                        $("#modal_name").dialog("open");
                        $(this).dialog("close");
                    }
                });
                //
                //    New - END
                //
            },
                        ...more stuff for other options here…

I have a place holder for the modal in the body like this:

<!-- New -->
<div id="modal_name" class="modal"></div>
<!-- /New -->

I added a class “modal” so that I could hide it on page load via CSS since the modal won’t be created until needed.

I know this may seem like a lot for what you are after, but it doesn’t create the error I was receiving with the in page usage.

John,

I would still be curious as to why this is happening and how to avoid it in the future.

Thanks all.

Hi Brian,

Hey, thanks for posting. Actually, upgrading my version of Safecracker sorted the problem for me which meant I could remove my hack. But I see you’re on the same versions and build that I’m using and yet you’ve run into this problem too. I wonder if it’s being caused by something else in this case.

Oskar,

It could be. I was just drawn to this post because I saw a few jQuery errors similar to this one, but only one other that was syntactically the same:

Uncaught TypeError: Object #<t> has no method 'navigator'

You were also performing similar functionality. I’m glad yours is fixed.  😊

I still get the same errors though.  :long:

Oh dear, commiserations! Yes, that nice dynamic modal box stuff looks great when it works, but can be a mess of code behind the scenes! Whenever I’m doing that kinda stuff it always makes me think of these two articles!

If I think of anything else I’ll post back here.

Hi Brian,

It sounds like this is an issue with custom scripting. Is everything working properly outside of your modal?

Brandon,

Yes everything works outside of the modal. I would tend to agree with you, except that I use the same process with several other pages and modal dialogs, even on this page. All of which work fine. It only seems to be an issue when using Safecracker. This is why the thread caught my attention.

Perhaps an issue between SC and jQ??

Brian,

I just noticed in your code samples that you’re still calling the deprecated SAEF:

{exp:channel:entry_form ...}

You want to be calling SafeCracker:

{exp:safecracker ...}

Does that help?