ajax changes target attribute on multipart/form-data form - ajax

When I try to render a component with f:ajax inside a multipart/form-data form, the target attribute of the form gets changed to JSFFrameId. Is this a bug?
Here is a sample code when this occur:
<h:form enctype="multipart/form-data">
<h:inputText>
<f:ajax event="change" render="#this" execute="#this"/>
</h:inputText>
<h:inputFile />
</h:form>
In my real code this is not what I'm trying to do but the same issue occurs with the sample code.
When visiting this page I get the following HTML output:
<form id="form" name="form" method="post" action="/AdApp/faces/test.xhtml" enctype="multipart/form-data">
<input type="hidden" name="form" value="form">
<input id="form-textfield" type="text" name="form-textfield" onchange="mojarra.ab(this,event,'change','#this','#this')">
<input id="form-filefield" type="file" name="form-filefield">
<input type="hidden" name="javax.faces.ViewState" id="j_id1-javax.faces.ViewState-0" value="-1920816151200438245:-3719618601043085373" autocomplete="off">
</form>
Nothing wrong here. But when the ajax event triggers, this is what happends with the HTML output(My issue? target attribute of the form):
<form id="form" name="form" target="JSFFrameId" method="POST" action="http://DOMAIN_PATH/AdApp/faces/test.xhtml" enctype="multipart/form-data">
<input type="hidden" name="form" value="form">
<input id="form-textfield" type="text" name="form-textfield" onchange="mojarra.ab(this,event,'change','#this','#this')">
<input id="form-filefield" type="file" name="form-filefield">
<input type="hidden" name="javax.faces.ViewState" id="j_id1-javax.faces.ViewState-0" value="-1920816151200438245:-3719618601043085373" autocomplete="off">
</form>
<iframe src="about:blank" id="JSFFrameId" name="JSFFrameId" width="0" height="0" frameborder="0">
<partial-response id="j_id1">
<changes>
<update id="form-textfield">
<![CDATA[<input id="form-textfield" type="text" name="form-textfield" value="das" onchange="mojarra.ab(this,event,'change','#this','#this')" />]]>
</update>
<update id="j_id1-javax.faces.ViewState-0">
<![CDATA[-1920816151200438245:-3719618601043085373]]>
</update>
</changes>
</partial-response>
</iframe>
I don't care about the iframe keeping a record of the changes. My issue is that the target of the form has been changed. So after the ajax event triggers, a submit will target a hidden iframe and not the window itself.
If I remove the enctype attribute or set ajax to render #form instead, it doesn't change the target attribute. I need the enctype="multipart/form-data" to upload files, and I dont want to use render="#form" because some of the content in my real form might have been modified by javascript code. Am I missing something? Or just bug? I will add some javascript to remove the target attribute but if I'm doing something wrong, I should use another approach.
I'm using the following tools:
Netbeans IDE 8
Glassfish 4 with Mojarra 2.2.7

There appear to be a couple (2843, 3018, 3048) of bugs related to fileuploads and ajax-reloads. They all are marked as resolved in various versions (JSF 2.2.1 and 2.2.5). I am on 2.2.3 and I am not in charge of the JSF versioning so i'm stuck with that. I tried 2.2.8 on my development machine, but could still reproduce the problem.
Like you, i also found out that using render="#form" leads to a problem with disappearing changes. However, if I also add execute="#form" the changes are stored in the bean and are remain visible after the render.

Related

How do I emulate a button press in web scraping?

Hello I am using colly to scrape my university's classes. The web page is simple enough
<form id="rngID" method="post" action="../../../SOME_REALLY_LONG_PATH">
<input type="hidden" name="rngID_hf_0" id="rngID_hf_0">
<label for="user">User:</label>
<input type="text" maxlength="20" value="" name="user" class="required valid">
<label for="password">Password:</label>
<input type="password" maxlength="20" value="" name="password" class="required valid">
<input type="hidden" id="js" value="1" name="js" class="valid">
<script>
/*<![CDATA[*/
document.getElementById("js").value = "1"
/*]]>*/
</script>
<input type="submit" class="btn-blue valid" name="login" id="rngID+2" value="Ingresar">
</form>
I find myself needing to interact with the website's contents. I understand I have the underlying objects associated to the HTML file recieved, but I am struggling to find how to trigger the submit action. Moreover I am unsure how to set the html input values with colly (username and password).
Can this not be done in colly? It seems to have good cookie management which fits in what I'm looking fo
Colly doesn't resolve/render the HTML DOM to the same degree as a web browser in a few ways, but the most notable is that it doesn't interpret and run JavaScript. So there is no direct way to emulate button presses with it.
However, forms can be submitted through post requests and goColly supports this with the Post method for a collector.

Custom comments template in BlogEngine

When someone wants to write a comment, It has to set Name, Email, Web Site and finally comments . How should I modify this template to use just the Comment? Because It has these info when admin registered him. I dont want to store false info.
Thanks for your help.
Since you didn't specify the version I am assuming you are running on the current latest (3.1).
The comment submission form is controlled by the CommentForm.cshtml in the siteroot/Custom/Theme/YourCurrentTheme folder. Here is a portion of the form from the Garland-Revisited theme.
<p>
<label for="txtName" class="lbl-user">#Resources.labels.name *</label>
<input type="text" class="txt-user" name="txtName" id="txtName" />
</p>
<p>
<label for="txtEmail" class="lbl-email">#Resources.labels.email *</label>
<input type="text" class="txt-email" id="txtEmail" />
</p>
<p id="commentCompose">
<textarea class="txt-content" id="txtContent" cols="50" rows="10" name="txtContent"></textarea>
</p>
The simplest path is probably to avoid changing the submission handler and convert the input type to hidden and prefill the value with their logged in credentials. A possible sample.
<input type="hidden" id="txtName" value="#SomeC#CodeToReadTheValuesFromTheLoggedInInformation" />
<input type="hidden" id="txtEmail" value="#SomeC#CodeToReadTheValuesFromTheLoggedInInformation" />
<p id="commentCompose">
<textarea class="txt-content" id="txtContent" cols="50" rows="10" name="txtContent"></textarea>
</p>
This does have security implications. You are trusting your users not to mess with the hidden values in the form. On an open website this probably isn't safe enough and you will have to look at changing the submit handler.
Changing the submit handler does have its own maintenance issues since you will be running a custom version of the software that won't upgrade cleanly when the next version comes out. It's up to you to decide what is the better path in your situation.

Hidden inputs are missing from Request in Asp.net mvc3

I'm using asp.net mvc3 ajax.beginform, and recently I've encountered a very strange problem.
It seems that some of the hidden input's I've placed inside the form do not exist in the request object.
I am not changing these values in any way after the post.
Any idea what is the reason?
Here's an example of a form that's giving me some trouble.
<form action="/PriceListItems/PriceUpdate" data-ajax="true" data-ajax-method="Post" id="form0" method="post">
<input id="item_Id" name="item.Id" type="hidden" value="3">
<input id="price_TariffId" name="price.TariffId" type="hidden" value="1">
<input class="input-mini"
data-val="true"
data-val-number="The field Price must be a number."
data-val-regex="incorrect number"
data-val-regex-pattern="(^N/A$)|(^[-]?(\d+)(\.\d{0,3})?$)|(^[-]?(\d{1,3},(\d{3},)*\d{3}(\.\d{1,3})?|\d{1,3}(\.\d{1,3})?)$)"
data-val-required="שדה זה הינו חובה"
id="itemTariff_3_1"
name="price.Price"
onchange="postThis(this);"
type="text"
value="300.00">
<span class="help-block">
<span class="field-validation-valid"
data-valmsg-for="itemTariff_3_1"
data-valmsg-replace="true"></span>
</span>
</form>
Thanks!
solved it, but it was quite a disappointing solution..:
i've replaced every jquery related script in my site so that it'll arrive from a CDN rather from my local files, but in the original versions.
and that was it.
everything suddenly started to click together.
frustrating, but works.
thanks,
Nir

Uploading an image in dojo

How to upload an image in Dojo with its ajax call? The url of the image must get stored to the database.Is there anyway to do it?
Dojo's xhr methods don't support binary data. You might want to use dojox.form.Uploader
you could try an aproach using a hidden iframe
<form enctype="multipart/form-data" target="magicFrame" action="uploader.php">
<input type="file" name="image" />
<input type="submit" />
</form>
<iframe name="magicFrame" id="magicFrame" style="display: none" ></iframe>
this will achieve the same result as uploading the image by AJAX (is not currently posible)

Can you mix and match Spring form tags and regular HTML form tags in a single HTML form?

I have a legacy HTML form that I want to make into a Spring form. Do I need to switch all of the form tags to Spring form tags or could I mix and match them as I please?
In other words, something like this:
<form:form modelAttribute="mymodel" action="/somecontroller/someaction" method="post">
<input type="text" name="something" value="">
</form:form>
instead of this (using only Spring form tags):
<form:form modelAttribute="mymodel" action="/somecontroller/someaction" method="post">
<form:input path="something" />
</form:form>
You can use regular <input /> elements within a <form:form /> without any problems. This is the conventional way to add submit buttons to a Spring form.
See here for more information.

Resources