jquery not proceeding to next page

Question

i have jquery, but it is not going to next page, it always display images and waits, never proceed to next page.

HTML code:

<div id="toHide" class="pb-text-align-center">
    <img style="display: inline" src="img/load.gif" />
    <form wicket:id="safeForm" class="clearfix">
        <input type="hidden" wicket:id="submitted" value="false" />
    </form>
</div>

HTML view source:

<SCRIPT type="text/javascript">  
   var $ = jQuery.noConflict();  
   $('.toHide').show().doTimeout(100,function() { 
   $('.toHide').find('safeForma3').submit();});
</SCRIPT>

wicket code:

static private class SafeSubmitBehaviour extends AbstractBehavior{
      public void onRendered( Component component ) {
          super.onRendered( component );      
          StringBuffer buffer = new StringBuffer(200);
          buffer.append("<script type=\"text/javascript\" >\n");
          buffer.append("var $ = jQuery.noConflict();\n "); 
          buffer.append(" $('.toHide').show().doTimeout(100,function() {  $('.toHide').find('");
          buffer.append(component.getMarkupId()).append("').submit();});\n</script>");
          component.getResponse().write(buffer);
        }  
  } 
      buffer.append(component.getMarkupId()).append("').submit();});\n</script>");

i have tried with: $('.toHide').find('form').submit();});. But still no use.

After chaging $('.toHide') to $('#toHide'), page is going ot next page, but animation is not happening in IE6/7, it works fine in FF.

I doubt the problem is setTimeout. It works fine in IE. A library providing the same type of functionality will be using jQuery. Also, if you provide minimal code reproducing the issue that's only HTML/JS you are more likely to get an answer. — Adam Bergmark, May 26 '11 at 11:36
I think that has nothing to do with jquery. It seems to be an issue with css. Advice: Save this part of the page on your local hard disk (from browser) and try to display the image. — Reporter, May 26 '11 at 15:31
Confirm that the rendered wicket:id and the script are the same. I've found there are indeed scenarios when `component.getMarkupId()` returns different values during its construction. For example, `getMarkupId()` in the constructor is different from `getMarkupId()` in `onBeforeRender()`. Also, I presume you've done `component.setOutputMarkupId(true)` ? — jbrookover, May 27 '11 at 17:58

score 4 · Answer 1 · answered May 26 '11 at 14:13

4

The "toHide" <div> has that string as it's id value, not it's class, so you need:

 $('#toHide')

The selector ".toHide" looks for an element with "toHide" as part of the class, so that wouldn't find your <div> at all.

To find the form, you'd use

 $('#toHide form').submit();

answered May 26 '11 at 14:13

Pointy

405,095
59
585
614

You're right, the selector '#toHide form' is better than using a selector of '#toHide' followed by find(). – Peter May 26 '11 at 14:15
$('#toHide').show().doTimeout(5000,function() { $('#toHide').find('safeform11').submit();});. it works in IE and FF. bu the issue is dynamic animation is not happening in IE6/7. – AKB May 26 '11 at 14:27
What "dynamic animation" are you talking about? – Pointy May 26 '11 at 14:34
https://admit.belgacom.be/WCE/ESW/selectBundle/productId/hbs_pstn_int_comf click new customer-> street as rue maes, no as 20 and postcode as 1000. an image will be displayed with animation in FF. but same image will be shown, but it is not animating in IE. – AKB May 26 '11 at 14:40
Well that sounds like a fine subject for a separate question :-) You should post the code that tries to perform the animation. (I don't see any "animation" in Chrome, for whatever that's worth.) – Pointy May 26 '11 at 14:48

John Green · Answer 2 · 2011-05-26T12:11:04.060

1

There is no id named 'safeForm15' in your HTML, which is what your setTimeout is trying to select. In fact, the form has ID namespaced, which I believe is illegal to begin with.

Regardless, the quick fix is to cue off of 'toHide', and get rid of the component.getMarkupId bit.

$('#toHide').find('form').submit();

Added:

You need to change this:

  buffer.append("  setTimeout(function(){ $(\"#").append(component.getMarkupId()).append("\").submit()}, 100);\n");

to this:

  buffer.append("  setTimeout(function(){$('#toHide').find('form').submit();}, 100);\n");

edited May 26 '11 at 12:11

answered May 26 '11 at 11:35

John Green

13,241
3
29
51

Is that what your rendered HTML code looks like? Are you just posting the template instead of the output? Doesn't really matter, anyway. As long as 'toHide' is unique, my suggested code will work regardless. – John Green May 26 '11 at 11:42
i changed, now dynamic page loading is working IE, but not working in FF? changed code is: buffer.append(" $('#toHide').find(\"#").append(component.getMarkupId()).append("\").submit();\n"); – AKB May 26 '11 at 12:05
No, you don't need the component.getMarkupID. Just buffer.append my line verbatim. – John Green May 26 '11 at 12:06
err... not verbatim. You still need to wrap it in a setTimeout. I'll update my response with some hand-holding. – John Green May 26 '11 at 12:10
No, it works in IE not in FF. code: buffer.append(" $('#toHide').find('form').submit();\n"); – AKB May 26 '11 at 12:15
My first & foremost recommendation... is probably to simplify your code by removing what appears to be a wholly unnecessary code-behind. Nothing good ever came from trying to mix & match client/server coding like that. – John Green May 26 '11 at 20:36

score 1 · Accepted Answer · answered May 26 '11 at 14:12

1

I think you should try this:

$('#toHide').find('form').submit();

Or if the form has an ID on it (I'm not familiar with Wicket) you can just use:

$('#safeForm').submit();

The ID selector uses a '#' charactor, not a '.', which is the class selector prefix.

answered May 26 '11 at 14:12

Peter

6,354
1
31
29

When the page is rendered in the browser, does the form have an id of 'safeForm'? As I mentioned, I don't know if Wicket actually creates the form with the ID attribute. – Peter May 26 '11 at 14:24
it works, but animation is not happening in IE. but works fine in FF. there is nothing to do with wicket here. – AKB May 26 '11 at 14:27
Make sure you are using @Dancrumb's suggestion below, and then check out this link: http://stackoverflow.com/questions/445850/jquery-form-submit-is-not-working-in-ie6 – Peter May 26 '11 at 15:27

Dancrumb · Answer 4 · 2011-05-26T16:14:42.527

1

Others have mentioned the problem with your selector.

However, this code also appears naked between two script tags. This means that they will be executed as soon as they are parsed. This means that they could be executed before the whole DOM is loaded, rendering them ineffective.

You need to use something like this:

<SCRIPT type="text/javascript">  
   var $ = jQuery.noConflict();  
   $(document).ready(function(){
       $('#toHide').show().doTimeout(100,function() { 
           $('#safeForma3').submit();
       });
   });
</SCRIPT>

edited May 26 '11 at 16:14

answered May 26 '11 at 14:30

Dancrumb

26,597
10
74
130

i modified but getting javascript error: #toHide".show is not a function. I used $('#toHide') intead of $('.toHide'). is ready should close at the end? ie something in ur above code is })); or modify ur code. – AKB May 26 '11 at 14:48
good catch. A much better idea to use .ready() rather than relying on a timeout/delay. – Peter May 26 '11 at 15:16

jcvandan · Answer 5 · 2011-05-26T15:46:05.437

This is a problem with IE, if you have a GIF that is not visible and then set it to visible the animation doesn't work.

Best thing to do is just used an empty image tag like this <img src='' /> and then when you want it to become visible set the src to the correct path i.e. <img src='AnimatingImg.gif' />.

It should work if you do it this way.

EDIT

You can do it like this:

<SCRIPT type="text/javascript">  
   var $ = jQuery.noConflict();       
   $('#toHide').show();
   $('#loadingImg').attr('src', 'img/load.gif');
   setTimeout(function() {
       $('#toHide').find('safeForma3').submit();
   }, 100);
</SCRIPT>

html code:

<div id="toHide" class="pb-text-align-center">
    <img id="loadingImg" style="display:inline" src="" />
    <form wicket:id="safeForm" class="clearfix">
        <input type="hidden" wicket:id="submitted" value="false" />
    </form>
</div>

Try that, might want a bit of fiddling though.

i tried this, page never goes to next page and image is not displaying. — AKB, May 26 '11 at 16:06
well it should, you will have to play around with it, I looked at the html on your site but couldn't make any sense of it - every single element seems to be wrapped in a div! — jcvandan, May 26 '11 at 16:13

jquery not proceeding to next page

5 Answers5

Linked

Related