i Have an use case
<html>
<head>
<s:head />
<sj:head jqueryui="true" />
<script type="text/javascript">
$.subscribe('hideTarget', function(event, data) {
$('#'+event.originalEvent.targets).hide("blind");
});
</script>
</head>
<body>
<div align="left" >
<div class="demo" align="center">Run Effect</div>
<div id="effect" style="display:none;">
Upload Photos Here
<s:form action="AjaxTest" method="post" theme="xhtml" enctype="multipart/form-data" >
<s:file name="userImage" label="User Image" />
<sj:submit targets="result" effect="blind" effectMode="show" onEffectCompleteTopics="hideTarget" value="Upload" button="true" />
</s:form>
<br/>
<img id="indicator" src="progressbar.gif" style="display:none" alt="loading"/>
</div>
<sj:div effect="pulsate" effectDuration="1500" onEffectCompleteTopics="hideTarget" cssClass="welcome" id="result"></sj:div>
</div>
<!-- End demo -->
</body>
as u can see i am uploading an single file using ajax call. when u click Run Effect link a div will toggle down in that file tag willbe their, select the file, upload it and it will display successfully uploaded message with effect and after it hide that success message.
up to that it work fine but my problem is when u want to upload another file it will display file tag u can select also but when u submit the form it is not displaying an successful message but file is uploaded in server and also in file tag previous uploaded file name is their
NOTE: my requirement is it should show successfully uploaded message for each and every time user submits form using ajax call
my success.jsp is
<body>
<s:if test="hasActionMessages()">
<s:actionmessage/>
</s:if>
<s:if test="hasActionErrors()">
<s:actionerror/>
</s:if>
</body>
Struts.xml
<action name="AjaxTest" class="AjaxCallAction">
<result name="success">/success.jsp</result>
</action>
just like the link below this
http://www.weinfreund.de/struts2-jquery-showcase/index.action
Dont use id="result" in , use name="result" and use formIds in
Related
Currently I'm working on two different systems (deploy jBoss) but they both have a same JSP file.
System 1 : Spring 5 (not SpringBoot)
System 2 : Java Servlet
I had a JSP file that required in both system, however in System 2, it can display correctly, but not in System 1.
This is sample code of the JSP :
<%#page import="com.captcha.botdetect.web.servlet.Captcha"%>
<%
// Adding BotDetect Captcha to the page
Captcha captcha = Captcha.load(request, "exampleCaptcha");
captcha.setUserInputID("captchaCode");
String captchaHtml = captcha.getHtml();
out.write(captchaHtml);
%>
<input id="captchaCode" type="text" name="captchaCode" />
System 2 able display the content correctly , while System 1 show the output as below
System 1 Output
System 1 console error
Compiled JSP
<html lang="en">
<head>
</head>
<!-- JS -->
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<body style="padding-top: 0px;">
<div>
<link type="text/css" rel="stylesheet" href="/xxx/botdetectcaptcha?get=layout-stylesheet&t=1676386800" />
<div class="BDC_CaptchaDiv " id="xxx_CaptchaDiv" style="width: 280px !important; height: 50px !important; "><!--
--><div class="BDC_CaptchaImageDiv" id="xxx_CaptchaImageDiv" style="width: 250px !important; height: 50px !important;"><!--
--><div class="BDC_CaptchaImageDiv" style="width:250px; height:40px;"><img class="BDC_CaptchaImage" id="webrf_CaptchaImage" src="/xxx/botdetectcaptcha?get=image&c=xxx&t=29c62e67e7cd426a947e50715ca9b172" alt="Retype the CAPTCHA code from the image" style="" /></div><!--
-->What is BotDetect Java CAPTCHA Library?<!--
--></div><!--
--><div class="BDC_CaptchaIconsDiv" id="webrf_CaptchaIconsDiv" style="width: 24px !important;"><!--
--><a class="BDC_ReloadLink" id="webrf_ReloadLink" href="#" title="Change the CAPTCHA code"><img class="BDC_ReloadIcon" id="webrf_ReloadIcon" src="/xxx/botdetectcaptcha?get=reload-icon" alt="Change the CAPTCHA code" /></a><!--
--><a rel="nofollow" class="BDC_SoundLink" id="xxx_SoundLink" href="/xxx/botdetectcaptcha?get=sound&c=xxx&t=29c62e67e7cd426a947e50715ca9b172" title="Speak the CAPTCHA code"><img class="BDC_SoundIcon" id="xxx_SoundIcon" src="/xxx/botdetectcaptcha?get=sound-icon" alt="Speak the CAPTCHA code" /></a><!--
--><div class="BDC_Placeholder" id="webrf_AudioPlaceholder"> </div><!-- --></div>
<script src="/xxx/botdetectcaptcha?get=script-include&c=xxx&t=29c62e67e7cd426a947e50715ca9b172" type="text/javascript"></script>
<input type="hidden" id="BDC_VCID_webrf" name="BDC_VCID_webrf" value="29c62e67e7cd426a947e50715ca9b172" />
<input type="hidden" id="BDC_BackWorkaround_webrf" name="BDC_BackWorkaround_xxx" value="0" />
<input type="hidden" id="BDC_Hs_xxx" name="BDC_Hs_xxx" value="0fa7d8412e64206ef6b3c1612ed99e7086b1b59c" />
<input type="hidden" id="BDC_SP_xxx" name="BDC_SP_xxx" value="1436062766" />
</div>
<input id="captchaCode" type="text" name="captchaCode" />
</div>
</html>
I had try to print the JSP and Servlet version, both system return the same value
Server Version: WildFly Full 19.1.0.Final (WildFly Core 11.1.1.Final) - 2.1.0.Final
Servlet Version: 4.0 JSP Version: 2.3
I also try with different browser but still no hope .
So I wonder is there anything I can check or any master can help on this ?
I am currently working on an ePubv3 book and have run into a problem. I'm using Sigil as the IDE. My goal is to allow the reader to type in the page number that they would like to jump to. Here is my code:
<head>
<title>testing</title>
<script>
function goToPage() {
var pageNumber = document.getElementById('page-number').value;
</script>
</head>
<body>
<p> </p>
<form method="post" onsubmit="goToPage" action="#">
<label for="page-number">Enter page number:</label>
<input type="text" id="page-number" name="page-number"><BR>
<p class="submit">
<input type="submit" value="Go to page"></input>
</p>
</form>
</body>
</html>
I have tried a few different ways. With and without the "class" option, changing the javascript. But haven't been able to get it to work.
Would someone please tell me what I am doing wrong?
Thank you
The goal is to allow the reader to type in a number to go to that page. An example being that they want to go to page 33 (from say page 2). They would just type in 33 in the input box and go to that page.
1,
2,
Question:When do we change images dynamically ?
Answer: When user asynchronously upload images, such as using ajaxfileupload.js.
when a user upload one image, and want to upload another one.
If he uses Jcrop, the later images are all shown in size of the first image.
even though he uses following jQuery code to change the size of the new image, it`s still in wrong size.
$("#target").attr("width","400");
$("#target").attr("height","250");
Does anyone know how to use Jcrop and show each images in its real size? I mean when the images is dynamically changed.
Thanks a lot!
The souce code is compressed into a zip file, they are all font-end code, so you may open it once it`s unzipped, please open "crop.html"
you may download the zip file (214KB) here:
download
the content of "crop.html" is:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($) {
var jcrop_api;
initJcrop();
$('#coords').on('change', 'input', function(e) {
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1, y1, x2, y2]);
});
function initJcrop() {
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
}, function() {
jcrop_api = this;
});
};
$('#changeToWiderPicture').click(function(e) {
jcrop_api.destroy();
$("#target").attr("src", "img/2.jpg");
$("#target").attr("width", "400");
$("#target").attr("height", "250");
$("#normalPicture").attr("src", "img/2.jpg");
$("#normanPicureIntroduction").html("Original picure:400X250");
$('#changeToWiderPicture').hide();
$('#changeBack').show();
initJcrop();
return false;
});
$('#changeBack').click(function(e) {
jcrop_api.destroy();
$("#target").attr("src", "img/1.jpg");
$("#normalPicture").attr("src", "img/1.jpg");
$("#normanPicureIntroduction").html("Original picure:250X400");
$('#changeBack').hide();
$('#changeToWiderPicture').show();
initJcrop();
return false;
});
});
function showCoords(c) {
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords() {
$('#coords input').val('');
};
</script>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
</head>
<body>
<table>
<tr>
<td>
<img src="img/1.jpg" id="target" />
<br>Picture with Jcrop attached
</td>
<td width=40%></td>
<td>
<img src="img/1.jpg" id="normalPicture" />
<br>
<span id='normanPicureIntroduction'>Original picure:250X400</span>
</td>
</tr>
</table>
<form id="coords" class="coords">
<div class="inline-labels">
<label>X1
<input type="text" size="4" id="x1" name="x1" />
</label>
<label>Y1
<input type="text" size="4" id="y1" name="y1" />
</label>
<label>X2
<input type="text" size="4" id="x2" name="x2" />
</label>
<label>Y2
<input type="text" size="4" id="y2" name="y2" />
</label>
<label>W
<input type="text" size="4" id="w" name="w" />
</label>
<label>H
<input type="text" size="4" id="h" name="h" />
</label>
</div>
</form>
<div style="padding-top:20px;">
<button id="changeToWiderPicture" class="btn btn-mini">changeToWiderPicture</button>
<button id="changeBack" class="btn btn-mini" style="display:none;">changeBack</button>
</div>
</body>
</html>
I find a solution from another answer on another question:
use -
$('#image').removeAttr('style');
Or simply overwrite the corresponding CSS style, for example -
$("#target").css({"width":"400px" ,"height":"250px"});
please be aware:
CSS style has a higher priority than the attribute, so sometimes, you find your change does not apply, for example -
$("#target").attr("width","400");
$("#target").attr("height","250");
So, for safer, user CSS style instead of an attribute.
Is there a way to upload file using pure prototype and ajax. I've searched for it on google but did't got any satisfactory result. Can anyone please help me out??
The easiest way to get an "Ajax" file upload to work is to use a keyhole iframe as the target for your form:
<form action="handler/url" enctype="multipart/form-data" target="keyhole" method="post">
<input type="file" multiple name="user_file[]" />
<input type="submit" id="upload" value="Upload">
</form>
<!-- style the following to be tiny/hidden -->
<iframe id="keyhole" src="about:blank"></iframe>
The trick with this is to show a waiting indicator, and hide it after the upload is complete.
<div id="waiting" style="display:none"></div>
<script type="text/javascript">
$('upload').observe('click', function(evt){
$('waiting').show();
});
</script>
In your file upload handler, return a text/javascript header and the following script after a successful upload:
var waiting = top.document.getElementById('waiting');
if(waiting) waiting.style.display = 'none';
Naturally, this will only work if both endpoints are on the same server, owing to Same Origin Policy.
I have the below code that is being used in cms page pop up
the problem im having is if you leave email address input field blank and hit the submit (in the case "Get Code" button, you briefly see the red validation message but then hides the form, shows the hidden div.
why or how can I prevent this process, i want it to validate but proceed to show the hidden div content. Below is the code.
<div id="pop-confirm" style="display: none;">
<h1 style="color: #000000; font-weight: bold;">THANKS!</h1>
<p> </p>
<h2>Use code: <strong>extra15</strong><br /> for 15% off your purchase.</h2>
</div>
<form id="newsletter-validate-detail" action="home/send" method="post" onSubmit="new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); return false;">
<div class="block-content">
<h2>ENTER YOUR EMAIL<br /> AND GET</h2>
<div class="form-subscribe-header">
<h1>15% OFF</h1>
<br />
<h1>EVERYTHING!</h1>
</div>
<div class="input-box"><input id="newsletter" class="input-text required-entry validate-email" title="Sign up for our newsletter" type="text" name="email" /></div>
<br />
<div class="actions"><button class="button" title="Get Code" type="submit"><span><span>Get Code</span></span></button></div>
<br />
<p><em>* Promotion ends April 6th</em></p>
</div>
</form>
<script type="text/javascript">// <![CDATA[
var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
// ]]></script>
Im very new to ajax so maybe ive done something wrong.
any ideas or suggestion would be greatly appreciated.
Thanks
Try changing your onSubmit to the following:
onSubmit="if(newsletterSubscriberFormDetail.validator.validate()){ new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); } return false;"`
This wil trigger the validator before submitting the form with AJAX. Works perfect for me :)