Thread

Hi all,

Just fiddling with my safecracker form, and I am trying to add a bit of jQuery to display a hidden div once the submit button is pressed, letting the user know that the form is processing.

My div works fine, and is hidden via css, I then have this jQuery

$(document).ready(function() {
                $('#form1').submit(function() {
                    $('#loading').show();
                });
            });

Where form1 should be the form ID. However this is not working for me and I was wondering whether or not the ID parameter is actually the form ID, as the user guide states its the CSS id.

Any thoughts?

Hi shorn,

Yes the id parameter you add to the safecracker tag is the id used for CSS/jquery etc. Can you post your code so we can have a look?

Thank you,

Mike

Sure thing.

This is what I have (I removed some form elements to save characters!)

{if logged_out}<div id="warning">You must be registered & logged in before you can submit</div>{/if}
      {exp:safecracker class="form1" id="form1"  channel="news" include_jquery="no" return="forms/thanks" status="Pending" logged_out_member_id="1" >}
<!-- then a load of form fields -->
<input class="btn-submit" type="submit" value="SUBMIT THIS ITEM" />
      {/exp:safecracker}
      <div id="loading">Working…</div>

Together with the jQuery i posted before.

Thanks

Hi shorn,

Is your jQuery not working?

You might try placing the script at the bottom of your html, just before the closing body tag.

I also see you are using the parameter:

logged_out_member_id="1"

ID 1 is generally the Super Admin, so I would suggest making a user specifically for this purpose.

One other thing, and this could merely be a typo on the forums, but there is an errant > character in your opening SafeCracker tag:

{exp:safecracker class="form1" id="form1"  channel="news" include_jquery="no" return="forms/thanks" status="Pending" logged_out_member_id="1" >}

should be…
{exp:safecracker class="form1" id="form1" channel="news" include_jquery="no" return="forms/thanks" status="Pending" logged_out_member_id="1"}

Cheers,

Hey there,

Thats right the jQuery doesn’t seem to be working, i.e. its not showing my div upon clicking the submit button.
The rest of my jQuery for that page still works fine. (Google maps, modals etc)

I have tried placing me script at the bottom of the HTML before the closing body tag, again still not showing the div.

I’ll change the logged out member, its still in development so haven’t got round to tweaking all the particulars yet.
Changed the opening tag, its wasn’t a typo, it was in there! Didn’t make a difference to it though! :(

Anymore thoughts?

I was following some posts from here Stack Overflow

And when I followed the post about Ajaxifying the form (i.e used that code in my site), it does show the hidden div for a second or two and then hides it again, but the form does not submit.

All I want to achieve, is some feedback to let the user know that the form is processing (uploading photos) by means of displaying a message inbetween clicking the submit button, and being redirected to the thank you page.

Any help or ideas about the bets way to achieve that would be great fully received!

OK, just to make this a bit stranger.
Ive tested this out in Chrome and FF and it seems to work in these browsers. Still not playing ball in Safari though. Going to have a try out on IE a bit later when I dust off and fire up an old laptop.

Any thoughts on why this might be? Whats the best way to “debug” this?

Well tested on a PC. IE9 shows the div, although the animated gif i put in it does not spin. (Although thats a separate IE issue)
Chrome on PC works fine. Just leaves Safari on mac. Ive tried it a fair few times now, and once or twice it has popped up, but only after 5-10secs, certainly not when the submit is clicked.

Hi shorn,

Is the site publicly available? Is there a URL I can visit to look at this behavior? I’d be happy to give it a go on my end and comb the debugger.

Cheers,

The site is live actually, it just went live fully today! Yeah!
You won’t be able to debit it at the moment, as I changed it slightly, so it now fires an alert dialog when submit button is clicked, which also seems to display the div, the dialog warns the user that it might take a while for the photos to upload, and then when they click OK, they are left with the “processing” div telling them that its going through. An extra step, but to be honest, its not a bad idea to explicitly warn users again that the uploading of photos might take a while!

Anyhow, if you want to check out the site, you can visit it now at:

walkiees.co.uk

As I mentioned previously in another post. Its the first site I’ve built, so its got a lot of work todo, but I’m pleased (and somewhat proud) of how it is already. EE was a big part of making it happen! 😊

Hello shorn,

Nice looking site man. I like it. Good work!

Is this your first website or first ExpressionEngine site? Either way, awesome job.

Is there anything else I can do for you? Seems like you are good to go from your latest update.

Cheers,

Thanks! First full site ever. I’m still a bit unsure as to why I was getting the probs in Safari but ill come to that later. What I have is working at the moment.

Awesome Shorn!

Be sure to get it in the next FRUP!

Please reference this thread when you decide to come back to the troubleshooting of the Safari issue.

Cheers,