Thread

Sean, just so you know, I’ve been looking at your issues today.

- at least from the conversation you had on Max’s support, that toronto site seems to show still the extra punctuation in one of your JQuery functions:

[removed] 
// <![CDATA[
$(document).ready(function() {
    if (typeof SafeCracker == "undefined" || ! SafeCracker) };} <-- these three extra??
    $.datepicker.setDefaults();});
// ]]>
[removed]

- For a shorter test, using your short Safecracker code above, and putting Max’s Google Map above it from very simple code I’ve used successfullly before with it here, I can _seem_ to get both the map and your form successfully, on Google Chrome.

- However, the same page clearly doesn’t work on Firefox or IE9, and shows dubious errors in the Javascript console.

- Completely removing Max’s Google Map code has no effect whatever on these errors.

- The problem seems to be in Safecracker itself, and is very likely to involve some trick to make it run which I haven’t found yet myself, as many are using it.

- I’ve currently got a model for the situation in an otherwise clean 2.1.3 20110414 EE, and am trying to find out what’s going on. It’s something affecting deeply within the Javascript Safecracker tries to load, causing fundamental terms (EE for example) to be undefined there.

Sean, my thought is for the moment to be sure about that extra punctuation in your JQuery line on the Toronto site—that at least you can do, and Max was trying to tell you about it.

As far as the mod Sue is suggesting, I think it is harmless, and I’m sure it will be necessary if you want to run a site with CP Debug set to zero (0). At minimum, to use Google Maps JSON variables have to be sent, and those are clipped out if you don’t have the mod.

In this case, though, it looks like something is going on beyond the bug/feature fix there. I’ll come back with what I find; should be something simple that we’re all overlooking. There are resources if I fail 😉.

Annyoung-hi kyesipsio (for others: typical Korean greeting on leaving, says to remain calm…)

Clive

I just did a quick test locally. Leaving the debug level set to 1 in my Output and Debugging preferences as this is where it is recommended to be.

SafeCracker 2.0 and EE2.1.3 Build 20110411

Steps I took.
Installed MX Google Maps
Created an MX Google Maps field.
Created a blank template and just added the following to it and nothing else
Map displays perfectly

{exp:safecracker channel="about" return="entry/thanks" }
<label for="title">Title</label>

<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100"><br >
<label for="url_title">URL Title</label>

<input type="text" name="url_title" id="url_title" value="{url_title}" maxlength="75" size="50" /><br >
<label for="entry_date">Date</label>
<input type="text" name="entry_date" id="entry_date" value="{entry_date}" maxlength="23" size="25" /><br >

{field:about_map}

<input type="submit" value="Submit" />
{/exp:safecracker}

Note when using SC and a custom field like MX Google Maps, you don’t need to add any JavaScript to the headers as it does this automatically for you

John, late night request here, and will look for your answer in the morning.

What browser(s) did you try this on? It works fine in Chrome, but Firefox 4 and IE9 appear to get into problems with it - notably, the JavaScript variable EE is undefined, etc..

After a long day on this, I’ve got some other variations perhaps closer to what Sean was trying to do, with the map outside the form. However, IE is stubborn.

Wondering how it looks from your end?

Regards,
Clive

Clive,

I tested with Firefox4, IE 8 and IE7. Works on all.

Ok, John, and thanks. After some untangling this morning, there’s news that I think will please Sean and others. One should not work so long and late…

- number one problem was that I’d tied down IE9 tightly, being tired of security scares, and some of the invisible Javascript urls here weren’t entirely allowed. No warning given.

- number two problem is that you do have either to be logged in or to have defined a logged_out_member_id in the SafeCracker tag parameters. Otherwise, Safecracker won’t let the browser you’re on even view the entry - no form will be present in the html. It is after all intended for form entry—but I wonder if there’s a more open read-only way besides the author_only.

With these issues cleared, your short version works on all browsers I can test, John. Of course if you want to view a specific entry and map, SafeCracker needs to know the entry_id or url_name, so I added url_title=”{segment_3}” to the tag.

I tested this and what I’ll put below from EE 2.1.3 20110411, EE 2.1.3 20110201 (Feb version), and latest EE 2.1.4 20110411 installs. There was minor variation on the Feb 2.1.3, but it worked.

Now, getting the hangups out of the way, I could complete what I’d been fighting with yesterday. I’m going to show a picture of results embedded in the page the way I think Sean wants them, with independent map and form. It does work, and in the simplest way.

This should give confidence, in Max’s nice Google Maps and with Safecracker, on more than just the lastest version of EE, and after some level of forum action on these matters.

Code is below, and the picture.

Regards,
Clive

As this is a site page, I’ve already loaded JQuery and JQueryUI core via EE JQuery in the .header embed, and so use params to prevent SafeCracker from doubling up on this.

Also note the dynamic=“no” for the MX Map tag, necessary so that other elements on the page don’t interfere with the map channel selection, default first entry here.

The X’s in the script tags are so they won’t be removed from the posting. I changed the first two form elements to use title and url_title, but otherwise it’s Sean’s test code posted earlier, so you can see that this will work.

{embed="{my_template_group}/.header" }

<scrXipt type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scXript>
<scrXipt type="text/javascript" src="{path='/themes/third_party/mx_google_map/mxgooglemap.js'}"></scrXipt>

<style type="text/css">
#amap {
    width: 500px;
}
</style>

{embed="{my_template_group}/.navintro" nav_point="articles" }

<div id="content">
<div id="blog">

{exp:channel:entries channel="trys" dynamic="no" limit="1"}
<h2>Map thing - {title}</h2>
<p><div id="amap"><br />
{map:map maptype="ROADMAP" mt_control_style = "DROPDOWN_MENU" scrollwheel = "false" doubleclickzoomoff="true"}<br />
</div> <!-- amap --><br />
{/exp:channel:entries} </p>

<h2>CSean thing {segment_3}</h2>
<p><div class="entry"><br />
        {exp:safecracker channel="tempo" logged_out_member_id="1" return="/sp/csean" entry_id="{segment_3}"<br />
               include_jquery="no" datepicker="no" safecracker_head="no" }<br />
                <input name="title" type="text" value="{title}" /> <br />
                <input name="url_title" type="text" value="{url_title}" /> <br />
                <input name="attendee-email" type="text" value="email" /> <br />
                <select name="dropdown"><br />
                    <option value="relationship field">Relationship Field</option><br />
                    <option value="relationship field">related to current event</option><br />
                </select><br />
                <input type="submit" value="Submit" /><br />
            {/exp:safecracker} </p>

<p></div><br />
</div></p>

<p>{embed="{my_template_group}/.sidebar"}<br />
{embed="{my_template_group}/.footer"}</p>

<p><br />
</body><br />
</html>

Thanks for the confirmation, narration. Where are we all on this? Is anyone still having this specific issue?

Will try this code out in a few hours - off to parents day at my sons kindergarten, hopefully later this afternoon.

Sean, good ho, and hope John’s or my version puts you on a path.

Brandon, I should probably say it was more than a confirmation. Using SafeCracker in ways other than as a single form page can be very tricky. Reasons:

  - handling the various possibilities with SafeCrackers’s own or page head or other package JQuery can get complicated.

  - If you don’t hit a working pattern, which is not necessarily by making an evident mistake, you get very obscure errors. Like the ‘EE is undefined’ one, or worse. Much worse.

  - How would you know what a right pattern is? Even what I did that worked, won’t, if all the features of SafeCracker are deployed.

  - You’d have to inspect what SC does on its own, then match it. I did this, and had at least one part not happy even so (ThickBox). The long list of potential JQuery parts and plugins has deep order dependency also.

  - I had a particularly bad experience trying to use SafeCracker’s JS calls to operate the rest of the page, since they’re efficent. Many details, and not going there again.

For me, this experience (and the reason I did it besides posters still in trouble on this thread, that there are quite a few other ‘JS errors’ SC threads) suggests two things:

1. SafeCracker needs very good documentation, including patterns that will work in this case and others off the primary road. As soon as possible—just as Ellis realized a SAEF is crucial, so is getting the information to people so it can work.

2. A strong design created in the present time, which unifies local and external JavaScript handling for ExpressionEngine, including but not limited to JQuery, carousel, xxxBox presenters.

This is not the only kind of thinking behind my pitching in here, but it is part of it.

Keeping my cool and still hopeful you guys are going to pick up the depth Search fixes, which are easy.

Regards,
Clive

Edit: Feature Request logged.

Thanks for the FR Clive and the work you put into this thread. Let us know how you got on Sean

Sorry for the long delay - events conspired to keep me away from this for a long time. Anyhow I looked over the thread and clive’s code is essentially the same as mine - I added on thing I was missing safecracker_head=“no” but no difference.

I can see the google map now, but safecracker doesn’t show up. when I remove the google map code, safecracker still doesn’t show up. I’m really puzzled here and can’t figure out why this isn’t working at all.

I’ve removed a lot from my template and this is what I’m left with

<!doctype html>
 
<!-- CSS --> 
<link rel="stylesheet" type="text/css" media="screen,projection" href="/interface/css/reset.css" /> 
<link rel="stylesheet" type="text/css" media="screen,projection" href="/interface/css/text.css" /> 
<link rel="stylesheet" type="text/css" media="screen,projection" href="/interface/css/960.css" /> 


<!-- JS --> 
< script src="/interface/js/libs/modernizr-1.7.min.js"></ script>

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></ script>
< script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></ script>
< script type="text/javascript" src="http://caffeinecreations.ca/themes/third_party/mx_google_map/mxgooglemap.js"></ script>
<link rel="stylesheet" href="/interface/css/style.css?v=2">
</head> 
 
<body id="home"> 

    <div id="header-container">
        <header class="wrapper">
            <h1 id="title">Toronto ExpressionEngine Meetup</h1>
        </header>
    </div>
    <div id="main" class="wrapper">
        <section>
            <article>
                before safecracker opening tag
                {exp:safecracker channel="gta-attendee" logged_out_member_id="2" return="home" entry_id="1" include_jquery="no" safecracker_head="no"}
                    <input name="attendee-name" type="text" value="Your Name" /> 
                    <input name="attendee-twitter" type="text" value="Twitter Id" /> 
                    <input name="attendee-email" type="text" value="email" /> 
                    <select name="dropdown">
                        <option value="relationship field">Relationship Field</option>
                        <option value="relationship field">related to current event</option>
                    </select>
                    <input type="submit" value="Submit" />
                    this text is inside the safecracker tags
                {/exp:safecracker}
                after safecracker closing tag
            </article>
        
        
        <section id="map">
            {exp:channel:entries channel="gta-meetup" limit="1" dynamic="no"}
                {gmap:map maptype="ROADMAP" mt_control_style = "DROPDOWN_MENU" scrollwheel = "false" doubleclickzoomoff="true" width="670"}
            {/exp:channel:entries} 
        </section>
        
        </section>
    </div>

    [removed]</ script>
    <!--[if lt IE 7 ]>
    [removed]</ script>
    [removed] DD_belatedPNG.fix('img, .png_bg');</ script>
    <![endif]-->
 
</body> 
</html>

Hmm. Sean, I just plugged your script in on my server, and doing only the following:

- took out the protective spaces in your script tags
- set the channel in the SafeCracker tag to a really existing channel
- set the entry_id to {segment_3} so I could plug in really existing posts
- set the logged_out_member_id to 1, so it was permitted as administrator
- set the first two of your form elements to have value {title} and {url_title} respectively.

At this point, your form came up and worked entirely, showing proper title and url_title for existing records. I didn’t mess with the MX Google Map part as I know that works fine.

And so does your form here, reasons for which I’ll try to explain next.

Here are some thoughts:

- you set “2” for the logged_out_member_id. However, are you sure that member has rights to write in the channel?

Are you also certain that “2” has the right to edit what other members have written. since you are probably looking at an admin-published entry for your test? The second condition just turned up recently, and I think will also cause your form not to appear.

- To understand this, remember that SafeCracker is very careful about who can use its form on an entry—and as I’ve put up as a bug, completely does not show the form if it doesn’t feel the user is so privileged, as well as scrambling up its own JavaScript in the process. 

- I’d try what you have, just as you have it, with the logged_out_member_id set to 1. I suspect then you will be on the air, and gain some confidence. Then you can hunt down why 2 doesn’t work, as above.

- Now, I have a bit more information on safecracker_head et al, since writing last here.

1. if you don’t set safecracker_head to no, you will get SafeCracker’s idea of all the JQuery and so forth that it needs, silently inserted within the form.

2. if you also don’t set include_jquery to no, you will _also_ get SafeCracker adding JQuery core itself, also within the form.

3. In the example I previously gave you, I already had both JQuery and JQueryUI cores loaded in the main site header, as structure of the template. I also had enough JQuery plugins and components loaded to cover this so-far extremely simple form. Note in contrast that you aren’t even adding JQueryUI core, though I think that’s ok for this simple form, and it _appears_ ok for what Max is doing.

But I would have had to have added the other JQuery parts as needed, and in the right order so that they could work, if I was using more abilities within SafeCracker, like datepicker etc., with this safecracker_header no scheme.

Just a word to the wise, and I think the only way to get this right if you need it is to try with safecracker_head not turned off as a preparatory step, and note down the packages and their order so you can replicate this in your page header. Not at all an easy thing.

4. I hope that clears up the need or not need for safecracker_head being set no. I’m still thinking about alternative ways to get around the basic discomfort here, for which I’ve raised a feature request.

5. A very careful point, at this moment in the discussion. When SafeCracker chooses not to show its form, over something like the permission layers issue, then it _also_ doesn’t place some JavaScript and JSON data that it needs itself, for the safecracker_head to be valid. The resulting JavaScript errors on some browsers will also prevent other JavaScript on the page from working. That’s what clobbered poor Max’s very nice MX Google Map add-on, and would no doubt clobber other add-ons.

So I think you have to get things very solid with SafeCracker and member permissions, logged in or not logged in, to get the rest of your page to be solid here.

Let’s see if that gets you on the air, Sean.

Best fortune, and regards, and no Korean since it doesn’t seem whatsoever appreciated, and I don’t remember so much now anyway, though once I did.

Clive

- you set “2” for the logged_out_member_id. However, are you sure that member has rights to write in the channel?

As soon as I got here, I realized that was the problem. I feel so stupid. The answer was right there in front of my face and yet I couldn’t see it. This has been 100% user (re: mine) error.

My apologies for taking up so much of your time.

Hey, Sean.  It really could happen to any of us, with all the dependencies here, so don’t concern.

You’ve helped bring to light all the issues surrounding use of SafeCracker in any but a completely stand-alone situation—and they really do need solutions.

I keep coming up with ideas on the side, but not ones I really like yet.

Note anyway on the links, another gentleman in very much your situation last week.

Take care, and now you can go ahead.

Best,
Clive

No problems Sean. Thanks for your help on this thread Clive.

How are you Christian ? Do you still require assistance?

Hi guys,

I have read this post with great interest.

I’m using JQuery 1.4.4 and EE v2.1.3.

I also had the “EE is undefined” error in IE7 and Firefox 3.6 for my SafeCracker form.  In Chrome my form was shown ok!

I followed the advice in this posting BUT still my form does not display in IE7 or Firefox and I get no errors in the console either.  Chrome shows my form ok.

In the EE console I defined my channel “competition-response” and allocated some custom fields to it.

Here’s my template code:

{exp:safecracker include_jquery="no" logged_out_member_id="1" datepicker="no" safecracker_head="no" channel="competition-response" return="community/thanks" error_handling=""}
               <div>
                <center>
                 <input type="hidden" name="title" id="title" value="Question on {current_time format="%d-%M-%Y %H:%i:%s"}" size="50" maxlength="100"/>
                 <input type="hidden" name="url_title"  id='url_title' value="Question-on-{current_time format="%d-%M-%Y-%H-%i-%s"}" maxlength="75" size="50" />
                 <table border="0" cellpadding="3" cellspacing="3" width="400"> 
                  <tr>
                   <td align="left">
                    <label for="competition-response-user-name"><b>First Name</b></label>
                   </td>
                   <td align="left">
                    <label for="competition-response-user-email"><b>E-mail</b></label>
                   </td>
                  </tr>
                  <tr>
                   <td>
                    <input type="text" name="competition-response-user-name" id="competition-response-user-name" value="" maxlength="60" size="32">br>
                   </td>
                   <td>
                    <input type="text" name="competition-response-user-email" id="competition-response-user-email" value="" maxlength="60" size="32">br>
                   </td>
                  </tr>
                

                  <input type="hidden" name="status" value="Pending" /> 
                  <input type="hidden" name="entry_date" value="{entry_date}" maxlength="23" size="25" />
                  
                  {if captcha}
                   <tr><td><label for="captcha">Please enter the word you see in the image below:</label></td><td>
                   {captcha}
                   <input type="text" name="captcha" value="{captcha_word}" maxlength="20" /></td></tr>
                  {/if}
                  
                 </table>
                </center>
               </div>
                
               {/exp:safecracker}

Any ideas?

Many thanks
Jeremy