How can I show a loading image during AJAX request? - javascript

I am loading another page in to a div with the help of this jQuery code:
$('#maildiv').load('reports/mail_report.php');
The load is taking some time. Meanwhile I want to show a loading image. When the file message is loaded the loading image should be hidden.
How can I do this?
I tried with:
function mail() {
$("#mailimg").show();
$('#maildiv').load('reports/mail_report.php') {
$("#mailimg").fadeOut("10000");
$('#maildiv').fadeOut("10000");
}
}
<input type="button" class='button green' value="Mail Report" name="" id="" Onclick='mail();return false;'/>
<img id="mailimg" style='display:none;' src='img/loading.gif' width='20' height='20'>
<div id="maildiv" style="color:red;"> </div>

Use the .load() complete callback to hide the load image.
Another point is the loaded div maildiv, why do you want to hide it using $('#maildiv').fadeOut("10000"). I think you need to use show it using $('#maildiv').fadeIn("10000")
function mail() {
$("#mailimg").show();
$('#maildiv').load('reports/mail_report.php', function() {
$("#mailimg").fadeOut("10000");
$('#maildiv').fadeOut("10000");
})
}

This is generic and should solve it for this issue.
//Do what you have to before its starts
$('#whereitstobeloads').load('filethatstobeloaded', function() {
//What you want to do when its loaded
});

It looks like you've got the right idea - using a callback function of the load - however your syntax is incorrect. Try this:
function mail() {
$('#mailimg').show();
$('#maildiv').load(
'reports/mail_report.php'),
function() {
$('#mailimg').fadeOut("10000");
$('#maildiv').fadeOut("10000");
}
}
}

Try this:
function mail() {
$("#mailimg").css('display','block');
$('#maildiv').load('reports/mail_report.php', function(){
$('#mailimg').animate({
opacity: 0.0
}, 1000, 'linear', function(){
$('#maildiv').animate({
opacity: 1.0
}, 1000, 'linear');
});
});
}

Related

Change option and reinitialize

I am using jscroll as an infinite scroll pager.
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
padding: 20,
nextSelector: 'div.next a',
contentSelector: '.latest-container',
autoTrigger: true,
autoTriggerUntil: 1
});
This is a pretty neat plugin and it uses the must-have for my project autoTriggerUntil.
Using that method you can limit the times that the content loads automatic and show the pagination's "next" button.
What I am trying to achieve is this.
Load the first set of posts (actually the 2nd page) with infinite. (DONE)
After the 2nd page, show a "Load All" button. (DONE)
Both 1 and 2 work but what I am trying to do is this: After clicking the "Load All" on page 2, I want to destroy the limiter and get back to an infinite view until the end.
I basically need to reinitialize this somehow. I have been messing with intervals and other bad practices the last couple of hours with no results.
After digging I came out with this solution:-
first, you need to add a callback function like this:-
$('.frontpage').jscroll({
//your existing settings ,
callback: function() {
if ($('div.next a').is(":visible")) {
$('.frontpage').jscroll.destroy();
$('div.next a').off('click');
}
}
});
Second Add onclick attribute to the load All a tag (only in the page where the load all a tag is visible)
onclick="loadAllClick(event);"
and the handler function should be like this:-
<script>
var loadAllClick = function(e) {
e.preventDefault();
$('.frontpage').jscroll( //your settings
);
}
</script>
and Here is a fully working plunker sample
Hope this answers your question
You can use the $(el).off() method and the plugin's callback option.
Tested on the plugin page http://jscroll.com/.
It can look something like this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j('div.next a'); //Your 'next' selector
el.off()
el.on('click',function(e){
e.preventDefault(); // we don't want the browser to go to redirect
// Add your code to show the rest of the comments here.
});
}
And then call bind the same way but add callback:
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
...
callback:scrollerCallback,
autoTriggerUntil: 1
});
In your CallBack function, try using this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j(document).find('div.next a');
el.on('click',function(e){
e.preventDefault();
console.log("This call gets executed!");
$j('.frontpage').jscroll({
autoTrigger: false,
autoTriggerUntil: false
});
});
}
What happens when you do this? I guess you have to modify the library itself for this to work, but I am not quite sure yet ...

display and hide text using hover in jquery

I'm trying to implement a simple functionality using the hover property in jQuery. When I hover on the div, some text must be displayed in the span element. That is pretty much the concept.
<script>
$(".logo").hover(
function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") },
function() { $("#span_hover").html(""); } );
</script>
<div class="logo"><img src="images/GMU_logo" height="100" width="150" /></div>
<span id="span_hover" style="position:fixed; bottom:5px; right:150px;"></span>
This code is not working! Can someone enlighten me?
Change your code like this way:
$(document).ready(function() {
$(".logo").hover(
function() {
$("#span_hover").html("Please visit http://www.gmu.edu for more information.");
},
function() {
$("#span_hover").html("");
}
);
});
With $(document).ready(...); your javascript code will wait for DOM and if it's completely loaded it will start.
http://jsfiddle.net/8as30y06/
Your script does actually work: http://jsfiddle.net/g2n403zs/ . Are you sure you are loading jquery before you are calling it's functions? What does the error console say?
$(".logo").hover(
function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") },
function() { $("#span_hover").html(""); } );
This seems to work ( you were missing a semicolon)
Here is fiddle:
jsFiddle
$(".logo").hover(function() {
$("#span_hover").html("Please visit http://www.gmu.edu for more information."); },
function() { $("#span_hover").html(""); });

Showing Ajax loader after website fully loaded

I want to show ajax loader when my website is fully loaded. i'm using the following codes but it's not working.
<div style="display:none" id="divloader"><img src="loading.gif" /></div>
$(function() {
$(".changepass").click(function() {
$("#divloader").show();
$(".block1").load("index.php", function(){ $("#divloader").hide(); });
return false;
});
});
I've fixed all typo error/ syntax error . But It's not working yet. Is there anyone who has working example ?
syntax error in your code
at this line $("#dvloader").show(); use $("#divloader").show();
<div style="display:none" id="divloader"><img src="loading.gif" /></div>
and
$(function() {
$(".changepass").click(function() {
$("#divloader").show();
$(".block1").load("views/index.php", function(){ $("#divloader").hide(); });
return false;
});
});

Javascript to jQuery for loading page please wait [duplicate]

Firefox always loads dynamic images, but IE it just shows images without any dynamic action. what changes I need to do?
JavaScript code from IE view source code:
<script type=”text/javascript”
<!--/*--><![CDATA[/*><!--*/
if (document.getElementById("safeForm1d3").submitted.value == "false") {
document.getElementById("safeForm1d3").submitted.value = "true";
setTimeout('document.getElementById("safeForm1d3").submit()', 100);
}else{
document.getElementById("toHide").style.display="none";
}/*-->]]>*/
</script>
I am using Wicket framework, so real java code is:
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\" ><!--/*--><![CDATA[/*><!--*/\n");
buffer.append("if (document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value == \"false\") {\n");
buffer.append("document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value = \"true\";\n");
buffer.append("setTimeout('document.getElementById(\"").append(component.getMarkupId()).append("\").submit()', 100);\n}else{\n");
buffer.append("document.getElementById(\"toHide\").style.display=\"none\";\n}/*-->]]>*/</script>");
component.getResponse().write(buffer);
}
}
html page which loads my dynamic image is:
<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>
Because setTimeout() requires your function to be passed as a string or as an anonymous function:
setTimeout(function() { document.getElementById("safeFormec").submit(); }, 100);
Take away the quotes from around your action:
setTimeout(function() {
document.getElementById("safeForm4d").submit();
}, 3000);
Have you tried removing the function call brackets from the end of this line?
document.getElementById("safeForm9c").submit()
i.e. do this instead:
setTimeout(document.getElementById("safeForm9c").submit, 100)
You’re telling IE to call the results of submit() in 100 milliseconds time, rather than call submit.
Try wrapping them inside a function:
setTimeout(function(){ document.getElementById("safeForm4d").submit(); }, 100);
Try something like this
setTimeout(function(){document.getElementById("safeForm9c").submit();}, 100);
In the old days a setTimeout complete function was in a string format, but these days we use it this way. Also this way makes is possible to do more things when the timeout is complete.
function setsubmit()
{
document.getElementById("safeFormec").submit();
}
setTimeout('setsubmit()',100);
change this
setTimeout(function() {
'document.getElementById("safeForm4d").submit()'
}, 3000);
to...
setTimeout(function() {
document.getElementById("safeForm4d").submit()
}, 3000);
Can you try doing something like
setTimeout('document.getElementById("safeForm9c").submit()', 100);
Probably setTimeout accepts the things you want to call as a string, so that it can do an eval after the timeout and run the script as it encouters in the string.
Include this in the head
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
and have
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 input = $(\"input[name='submitted']\");\n");
buffer.append("if (input.val() == \"false\") {\n");
buffer.append(" input.val(\"true\");\n");
buffer.append(" setTimeout(function(){ $(\"#").append(component.getMarkupId()).append("\").submit()}, 100);\n");
buffer.append("}\n");
buffer.append("else {\n $(\"#toHide\").hide();\n}");
component.getResponse().write(buffer);
}
}
which should render
var input = $("input[name='submitted']");
if (input.val() == "false") {
input.val("true");
setTimeout(function(){ $("#safeForm1d3").submit()}, 100);
}else{
$("#toHide").hide();
}
Where would you do the $("#toHide").show(); ?
solved my problem. may be useful for others:
Answer:
HTML source code:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
document.getElementById('toHide').style.display ="";
$('#toHide').doTimeout(1000, function() {
$('#toHide').find('#safeForm34').submit();
document.getElementById('myAnimatedImage').src = "../../img/load.gif";
});
</SCRIPT>
html:
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>
You can try:
img style="display: inline" src="img/load.gif?salt=xxxx"
xxx: means - a random of an integer.
Maybe, the browser cache the image so it will not repaint. Or you must set the GIF image with loop.
I have tried with adding function call, now images are loading and dynamic, but it never goes to next page or never clear timeout.
code:
buffer.append("setTimeout(function(){'document.getElementById(\"").append(component.getMarkupId()).append("\").submit()'}, 100);\n}else{\n");
var safeForm4d = document.getElementById("safeForm4d");
if ( safeForm4d.submitted.value == "false" ){
safeForm4d.submitted.value = "true";
setTimeout(function(){ safeForm4d.submit(); }, 100);
}else{
document.getElementById("toHide").style.display="none";
}
This:
setTimeout(function(){'document.getElementById("safeForm4d").submit()'}, 100);
is incorrect. The function you pass there to ".setTimeout()" will do nothing. Instead of that, try:
setTimeout(function(){ document.getElementById("safeForm4d").submit(); }, 100);
The difference is that the actual guts of the function should not have been quoted. In that state, what you've got is a function with a single statement, that statement being a simple string-valued expression. It would run, but have no effect.
two things:
The correct usage of setTiemout() is:
setTimeout(function(){
document.getElementById("safeForm4d").submit();
}, 100);
Your using wicket. The wicket:id is nothing the DOM knows. You have to assign an ID and use this one like you did it with the form itself.
Hope that helps.
setTimeout(function (){ document.getElementById("safeForm").submit() } , 100);
check working example at JSFIDDLE.
CAUTION:: alert may be irritating.
The setTimeout function throws invalid arguments because whatever the call
document.getElementById("safeFormec").submit()
returns (some error message maybe) is not a valid argument to setTimeout i.e. it can not
be resolved to a function or expression.
The call to .submit() fails because there is no action attribute specified for the form (<form action="somePage.php">).
Your intention was probably not to do a submit in the setTimeout call, but to send the submit function as a value parameter to setTimeout to be executed after a while. Like this:
setTimeout(document.getElementById("safeFormec").submit, 100);
Note the missing paranthesises.
Issue was with time 100 ie 1/10 of second. IE will load images with dynamic action only for for 100 millisecond ie1/10 second and stop. increased time to 3000 and now it is working fine.
setTimeout(function(){'document.getElementById("safeForm4d").submit()'},
100);
No issues with FF or other browser.
After formatting your initial post I think maybe I found some sources to the problem.
The function in your timeout is a string.
You should try and submit the form, not the actual button.
Try this:
if (!document.getElementById("safeForm4d").submitted.value) {
document.getElementById("safeForm4d").submitted.value = "true";
setTimeout(function() {
document.forms[0].submit(); // Alt: document.forms['MyFormName'].submit()
}, 3000);
} else {
document.getElementById("toHide").style.display="none";
}
This will never give you the desired effect because your changing from page to page -- this will cause the aninmation to disappear once the new page starts to load. This will depend on many factors, such as how long the server takes to response, to how fast the user's computer is to re-render the new page.
If you really want this kind of effect to work you should use ajax to send the form data using .serialize(), overwrite the current page with the response which should hide the animation.
Update:
To create the desired effect you'll have to post the form using ajax, then push the new HTML to the DOM.
var $form = $('#formId');
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
success: function(response) {
$('#loading').fadeOut(function() {
// Get only text from the body of the result
$('body').html($(response).find('body'));
});
}
});
This is really hacky though and I felt dirty writing that. Seriously. You should really make sure that the response returned isn't go to:
Reload CSS styles, scripts, etc.
Any specific title, scripts, styles, etc relevant to that page and search will not appear or be changed.
More than likely you just want to return the result to the query i.e. the search results of the form submitted. In which case just wrap the results in a container and .find('#container') instead of .find('body')
Try this:
<script type="text/javascript">
if (document.getElementById("safeForm4d").submitted.value == "false") {
document.getElementById("safeForm4d").submitted.value = "true";
setTimeout('document.getElementById("safeForm4d").submit()', 100);
} else {
document.getElementById("toHide").style.display="none";
}
</script>
You have quotes in the setTimeout event:
setTimeout('document.getElementById("safeForm4d").submit()', 100);
Change your script as follows:
<script type="text/javascript">
if (document.getElementById("safeForm4d").submitted.value == "false") {
document.getElementById("safeForm4d").submitted.value = "true";
if(Wicket.Browser.isIE()) {
setTimeout(document.getElementById("safeForm4d").submit(), 100);
} else {
setTimeout(document.getElementById("safeForm4d").submit(), 100);
}
} else {
document.getElementById("toHide").style.display="none";
}
</script>
Finally solved my question, may be useful for others:
Answer:
HTML source code:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
document.getElementById('toHide').style.display ="";
$('#toHide').doTimeout(1000, function() {
$('#toHide').find('#safeForm34').submit();
document.getElementById('myAnimatedImage').src = "../../img/load.gif";
});
</SCRIPT>
html:
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>

dynamic images are not loading in IE [duplicate]

Firefox always loads dynamic images, but IE it just shows images without any dynamic action. what changes I need to do?
JavaScript code from IE view source code:
<script type=”text/javascript”
<!--/*--><![CDATA[/*><!--*/
if (document.getElementById("safeForm1d3").submitted.value == "false") {
document.getElementById("safeForm1d3").submitted.value = "true";
setTimeout('document.getElementById("safeForm1d3").submit()', 100);
}else{
document.getElementById("toHide").style.display="none";
}/*-->]]>*/
</script>
I am using Wicket framework, so real java code is:
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\" ><!--/*--><![CDATA[/*><!--*/\n");
buffer.append("if (document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value == \"false\") {\n");
buffer.append("document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value = \"true\";\n");
buffer.append("setTimeout('document.getElementById(\"").append(component.getMarkupId()).append("\").submit()', 100);\n}else{\n");
buffer.append("document.getElementById(\"toHide\").style.display=\"none\";\n}/*-->]]>*/</script>");
component.getResponse().write(buffer);
}
}
html page which loads my dynamic image is:
<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>
Because setTimeout() requires your function to be passed as a string or as an anonymous function:
setTimeout(function() { document.getElementById("safeFormec").submit(); }, 100);
Take away the quotes from around your action:
setTimeout(function() {
document.getElementById("safeForm4d").submit();
}, 3000);
Have you tried removing the function call brackets from the end of this line?
document.getElementById("safeForm9c").submit()
i.e. do this instead:
setTimeout(document.getElementById("safeForm9c").submit, 100)
You’re telling IE to call the results of submit() in 100 milliseconds time, rather than call submit.
Try wrapping them inside a function:
setTimeout(function(){ document.getElementById("safeForm4d").submit(); }, 100);
Try something like this
setTimeout(function(){document.getElementById("safeForm9c").submit();}, 100);
In the old days a setTimeout complete function was in a string format, but these days we use it this way. Also this way makes is possible to do more things when the timeout is complete.
function setsubmit()
{
document.getElementById("safeFormec").submit();
}
setTimeout('setsubmit()',100);
change this
setTimeout(function() {
'document.getElementById("safeForm4d").submit()'
}, 3000);
to...
setTimeout(function() {
document.getElementById("safeForm4d").submit()
}, 3000);
Can you try doing something like
setTimeout('document.getElementById("safeForm9c").submit()', 100);
Probably setTimeout accepts the things you want to call as a string, so that it can do an eval after the timeout and run the script as it encouters in the string.
Include this in the head
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
and have
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 input = $(\"input[name='submitted']\");\n");
buffer.append("if (input.val() == \"false\") {\n");
buffer.append(" input.val(\"true\");\n");
buffer.append(" setTimeout(function(){ $(\"#").append(component.getMarkupId()).append("\").submit()}, 100);\n");
buffer.append("}\n");
buffer.append("else {\n $(\"#toHide\").hide();\n}");
component.getResponse().write(buffer);
}
}
which should render
var input = $("input[name='submitted']");
if (input.val() == "false") {
input.val("true");
setTimeout(function(){ $("#safeForm1d3").submit()}, 100);
}else{
$("#toHide").hide();
}
Where would you do the $("#toHide").show(); ?
solved my problem. may be useful for others:
Answer:
HTML source code:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
document.getElementById('toHide').style.display ="";
$('#toHide').doTimeout(1000, function() {
$('#toHide').find('#safeForm34').submit();
document.getElementById('myAnimatedImage').src = "../../img/load.gif";
});
</SCRIPT>
html:
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>
You can try:
img style="display: inline" src="img/load.gif?salt=xxxx"
xxx: means - a random of an integer.
Maybe, the browser cache the image so it will not repaint. Or you must set the GIF image with loop.
I have tried with adding function call, now images are loading and dynamic, but it never goes to next page or never clear timeout.
code:
buffer.append("setTimeout(function(){'document.getElementById(\"").append(component.getMarkupId()).append("\").submit()'}, 100);\n}else{\n");
var safeForm4d = document.getElementById("safeForm4d");
if ( safeForm4d.submitted.value == "false" ){
safeForm4d.submitted.value = "true";
setTimeout(function(){ safeForm4d.submit(); }, 100);
}else{
document.getElementById("toHide").style.display="none";
}
This:
setTimeout(function(){'document.getElementById("safeForm4d").submit()'}, 100);
is incorrect. The function you pass there to ".setTimeout()" will do nothing. Instead of that, try:
setTimeout(function(){ document.getElementById("safeForm4d").submit(); }, 100);
The difference is that the actual guts of the function should not have been quoted. In that state, what you've got is a function with a single statement, that statement being a simple string-valued expression. It would run, but have no effect.
two things:
The correct usage of setTiemout() is:
setTimeout(function(){
document.getElementById("safeForm4d").submit();
}, 100);
Your using wicket. The wicket:id is nothing the DOM knows. You have to assign an ID and use this one like you did it with the form itself.
Hope that helps.
setTimeout(function (){ document.getElementById("safeForm").submit() } , 100);
check working example at JSFIDDLE.
CAUTION:: alert may be irritating.
The setTimeout function throws invalid arguments because whatever the call
document.getElementById("safeFormec").submit()
returns (some error message maybe) is not a valid argument to setTimeout i.e. it can not
be resolved to a function or expression.
The call to .submit() fails because there is no action attribute specified for the form (<form action="somePage.php">).
Your intention was probably not to do a submit in the setTimeout call, but to send the submit function as a value parameter to setTimeout to be executed after a while. Like this:
setTimeout(document.getElementById("safeFormec").submit, 100);
Note the missing paranthesises.
Issue was with time 100 ie 1/10 of second. IE will load images with dynamic action only for for 100 millisecond ie1/10 second and stop. increased time to 3000 and now it is working fine.
setTimeout(function(){'document.getElementById("safeForm4d").submit()'},
100);
No issues with FF or other browser.
After formatting your initial post I think maybe I found some sources to the problem.
The function in your timeout is a string.
You should try and submit the form, not the actual button.
Try this:
if (!document.getElementById("safeForm4d").submitted.value) {
document.getElementById("safeForm4d").submitted.value = "true";
setTimeout(function() {
document.forms[0].submit(); // Alt: document.forms['MyFormName'].submit()
}, 3000);
} else {
document.getElementById("toHide").style.display="none";
}
This will never give you the desired effect because your changing from page to page -- this will cause the aninmation to disappear once the new page starts to load. This will depend on many factors, such as how long the server takes to response, to how fast the user's computer is to re-render the new page.
If you really want this kind of effect to work you should use ajax to send the form data using .serialize(), overwrite the current page with the response which should hide the animation.
Update:
To create the desired effect you'll have to post the form using ajax, then push the new HTML to the DOM.
var $form = $('#formId');
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
success: function(response) {
$('#loading').fadeOut(function() {
// Get only text from the body of the result
$('body').html($(response).find('body'));
});
}
});
This is really hacky though and I felt dirty writing that. Seriously. You should really make sure that the response returned isn't go to:
Reload CSS styles, scripts, etc.
Any specific title, scripts, styles, etc relevant to that page and search will not appear or be changed.
More than likely you just want to return the result to the query i.e. the search results of the form submitted. In which case just wrap the results in a container and .find('#container') instead of .find('body')
Try this:
<script type="text/javascript">
if (document.getElementById("safeForm4d").submitted.value == "false") {
document.getElementById("safeForm4d").submitted.value = "true";
setTimeout('document.getElementById("safeForm4d").submit()', 100);
} else {
document.getElementById("toHide").style.display="none";
}
</script>
You have quotes in the setTimeout event:
setTimeout('document.getElementById("safeForm4d").submit()', 100);
Change your script as follows:
<script type="text/javascript">
if (document.getElementById("safeForm4d").submitted.value == "false") {
document.getElementById("safeForm4d").submitted.value = "true";
if(Wicket.Browser.isIE()) {
setTimeout(document.getElementById("safeForm4d").submit(), 100);
} else {
setTimeout(document.getElementById("safeForm4d").submit(), 100);
}
} else {
document.getElementById("toHide").style.display="none";
}
</script>
Finally solved my question, may be useful for others:
Answer:
HTML source code:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
document.getElementById('toHide').style.display ="";
$('#toHide').doTimeout(1000, function() {
$('#toHide').find('#safeForm34').submit();
document.getElementById('myAnimatedImage').src = "../../img/load.gif";
});
</SCRIPT>
html:
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>

Categories