I am a newbie in AdobeCQ5. I am facing some trouble in posting form. Here is my Structure -
/apps/<myproject>/components/mytestcomponent
mytestcomopnent.jsp has following code -
<form id="myForm" action="<%=resource.getPath()+".html" %>">
<input type="text" id="t1" class="input-small" placeholder="Temprature F" />
<input type="text" id="t2" class="input-small" placeholder="Temprature C" readonly/>
<button type="button" id="cbtn" class="btn">Convert</button>
</form>
<script>
$(document).ready(function() {
$('#cbtn').click(function () {
var URL = $("#myForm").attr("action");
alert(URL);
var t1=$("#t1").val();
var t2=$("#t2").val();
$.ajax({
url: URL,
data:{'t1':t1},
type:"post",
success: function(data, status) {
$("#t2").val(data);
},
error: function( xhr, txtStat, errThrown ) {
alert("ajax error! " + txtStat + ":::" + errThrown);
}
});
});
});
</script>
This is giving my response code 200 (Success) but the output is not desired. My mycomponent.POST.jsp has following code -
<%
// TODO add you code here
String t1=request.getParameter("t1");
%>
<%= t1 %>
It gives the following output
Content modified /content/imobile/en/jcr:content/social.html
Status
200
Message
OK
Location /content/imobile/en/_jcr_content/social.html
Parent Location /content/imobile/en/_jcr_content
Path
/content/imobile/en/jcr:content/social.html
Referer http://example.comt:4502/content/imobile/en.html
ChangeLog
<pre></pre>
Go Back
Modified Resource
Parent of Modified Resource
Please help to resolve this.
The JSP file handling the POST method for your component should be named POST.jsp rather than mycomponent.POST.jsp.
Please notice that if you intercept all POST requests to your component, you won't be able to edit it on the author instance using a dialog (as the dialog simply POSTs data to the component URL). To avoid it, consider using a custom selector (like form). Your form should look be declared like this:
<form id="myForm" action="${resource.path}.form.html">
and the script handling POST request should be called form.POST.jsp.
The second important thing is that you should use Java classes rather than JSP files to store business logic. In this case it means that the form.POST.jsp script can be replaced with a Sling servlet declared as follows:
#SlingServlet(
resourceTypes="myproject/components/mytestcomponent",
methods="POST",
selectors="form")
Related
I am trying to develop a widget in NopCommerce 4.3. I need to Post data from widget public view to the controller's Action method with Ajax. The problem is that when the call is made from the view, Product page is called instead of my widget view. This is the VS output:
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request starting HTTP/2.0 POST https://localhost:44331/aliento-de-ogro application/x-www-form-urlencoded 292298. Excepción producida: 'System.ArgumentException' en System.Private.CoreLib.dll. Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executing endpoint 'Nop.Web.Controllers.ProductController.ProductDetails (Nop.Web)' Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker: Information: Route matched with {action = "ProductDetails", controller = "Product", area = ""}. Executing controller action with signature Microsoft.AspNetCore.Mvc.IActionResult ProductDetails(Int32, Int32) on controller Nop.Web.Controllers.ProductController (Nop.Web). Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor: Information: Executing ViewResult, running view ProductTemplate.Simple. Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor: Information: Executed ViewResult - view ProductTemplate.Simple executed in 411.9849ms.
This is how widget's view looks like:
<form id="AjaxForm" method="post">
<input type="hidden" id="productId" value=#ViewBag.sku />
<input type="hidden" id="input_elem" name="image" />
<div class="col-md-9">
<div id="ErrorAlert" class="alert alert-danger" style="display:none" role="alert">
Error en los datos enviados!
</div>
<div id="ExitoAlert" class="alert alert-success" style="display:none" role="alert">
Datos recibidos correctamente!
</div>
</div>
<button class="btn btn-success" id="SubmitBtn" type="submit">Save photo</button>
</form>
$.ajax({
type: "post", // Verbo HTTP
url: "#Url.Action("TakePhoto", "Photo")",
dataType: "application/json",
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken: "]').val() },
data: JSON.stringify(
{
// Datos / Parámetros
ProductId: $("#productId").val(),
Role: role, //$("#role").val(),
ExpressionName: expressionName, //$("#expressionName").val(),
Photo: $("#photo").attr('src')
}),
contentType: "application/json; charset=utf-8"
})
.done(function (result) {
alert(result.Message);
}
})
.fail(function (xhr, status, error) {
})
.always(function () {
});
return false;
});
Asp.net backend is receiving "application/x-www-form-urlencoded" instead of "application/json". Why? Is this the reason because my widget's controller is not reached? Why Nop.Web.Controllers.ProductController.ProductDetails (Nop.Web)' is invoked?
It doesn't seem you're receiving the request from the Ajax call. Instead you're receiving the request from some form in the page.
This seems clear since you're receiving the request from a different endpoint and with a different content type. Since it seems you have an image in your form the multipart request is logical in that scenario.
My suggestions are:
Check your page and look for a multipart form in it. Some problem handling events could make that form to fire instead of your code. Are there nested forms?
Enable the request history in Chrome and the preserve log option. Get a verbatim copy of the request. Check the Url.
In .NET, retrieve a verbatim copy of the received request. Check the Url.
Set a breakpoint in your Javascript code and see if it is being called at all.
I think this will help you.
I'm trying to integrate Jquery File Upload plugin in my aspx page (asp.net website). I followed the guide, including all required scripts and stylesheets, but in the index.html it's used a form tag to initialize the plugin and with the tag are also specified action and method attributes. Since I'm using asp.net, I am not allowed to insert the form tag because asp.net wrap the whole website with another form tag and it doesn't allow to insert another form tag inside it.
How can I initialize the plugin in a different way?
You don't actually have to have a form to use jQuery file upload plugin. Because the plugin is using jQuery ajax under the hood. use the bellow code inside your page, keep in mind you have to code an API on the server side.
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'your server api or handler';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
and your html as follows:
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
I have a page that handles some query data from the url, as in localhost/home?foo=bar.
It then sends a JSON to some server somewhere. That much works.
With iron-router, I handle a form submission like so: Router.go('home', {}, {query: queryObjectVar}), which also works.
So when you submit the form with foo="somethingelse" you end up in localhost/home?foo=somethingelse, the page mostly doesn't reload because of meteor magic thus looking really fast, and the JSON is sent with foo=somethingelse, and all is well.
However if you're in localhost/home?foo=var and then you go to the same exact route with Router.go(...), query included, the url doesn't change, and the page does not send the JSON thing. Which in most cases is fine, since technically nothing changed so nothing should need to be done. However, I want it to behave as if the url changed.
How do I do that?
Currently I have the template hooked up to the query like so:
Router.route('home', {
data: function() { return this.params.query }
})
I'm not sure if this is what you want, but you could change the route by making an extra navigation.
Often, after submitting the form, you want the user to know that the form was received or processed somehow.
I would suggest to make an extra route that only handles the processing, something like /home/process. Have the event handler on form submit navigate to the process route. The action for the route sends the json file based on this.params.query.
After the json was sent (I used console.log but better approach would be Meteor.call('here_I_will_sent_json', this.param.query), render a template that let's the user know that the data was sent. And now the trick: have a link or button in the template that navigates to /home or whatever you want the user to direct to.
Templates.
<template name="main">
<div>Sample application</div>
{{> yield}}
</template>
<template name="mainPage">
<div>Main page</div>
Home
</template>
<template name="home">
<div>Home page</div>
{{> form}}
</template>
<template name="form">
<form id="myForm" method="get">
<input type="text" name="foo">
<input type="submit" value="Save">
</form>
</template>
<template name="finishedSending">
<div>finishedSending!</div>
go to main page
</template>
Javascript:
Router.configure({
layoutTemplate: 'main'
});
Router.route('mainPage', {path: '/'});
Router.route('home', {path: '/home'});
// Extra route just for processing the submitted form
Router.route('process', {
path: '/home/process',
data: function() {
return this.params.query
},
action: function() {
// Here you send the json or do whatever you need to process.
// Best to have some Meteor method do the actual processing.
// You could use a callback if processing takes some time.
console.log('Send the json content based on: ', this.params.query);
this.render('finishedSending');
}
});
if (Meteor.isClient) {
Template.main.events({
'submit #myForm': function (e) {
e.preventDefault();
var fieldValue = event.target.foo.value;
Router.go('process', {} , {query: {foo: fieldValue}})
}
});
}
I have a aspx page that I need to call without going directly on that page.
I have tried to make POST from form but it opens this action url in browser.
<form method="POST" action="http://mysite/actionpage.aspx">
<input type="submit" value="Submit" />
</form>
You could use curl if you're on a *nix system.
Here is a reference on how to post data to a page. The result will be returned through the command line.
What is the curl command line syntax to do a post request?
Here is the syntax for reference:
curl -d "param1=value1¶m2=value2" http://example.com/resource.cgi
or
curl -F "fileupload=#filename.txt" http://example.com/resource.cgi
If jQuery is allowed to use in your case, You may use jQuery ajax to call that page
$("form").submit(function(e){
e.preventDefault();
$.post("yoursecondpage",function(data){
//do whatever with the response from that page
});
});
You can do it via ajax.
For example, if you add a script reference to jQuery things will get much easier, and you can do the following:
<script type="text/javascript">
function postIt()
{
$.post(
"http://mysite/actionpage.aspx"
, function(data)
{
// data was returned from the server
alert("data posted in the background");
} );
}
</script>
The processing you be done via background.
Your final HTML woul be :
<form method="POST" action="http://mysite/actionpage.aspx">
<input type="submit" value="Submit" onclick="postIt();" />
</form>
I haven't tested , but looks like you are navigating to .aspx means server page, i.e. you need to use runat="Server" in your tags like this
I am using Knockout and the Knockout Mapping plugin.
My MVC3 Action returns a View and not JSON directly as such I convert my Model into JSON.
This is a data entry form and due to the nature of the system validation is all done in the Service Layer, with warnings returned in a Response object within the ViewModel.
The initial bindings and updates work correctly its the "post-update" behavior that is causing me a problem.
My problem is after calling the AJAX POST and and receiving my JSON response knockout is not updating all of my bindings... as if the observable/mappings have dropped off
If I include an additional ko.applyBindings(viewModel); in the success things do work... however issues then arise with multiple bindings and am certain this is not the correct solution.
This is the HTML/Template/Bindings
<!-- Start Form -->
<form action="#Url.Action("Edit")" data-bind="submit: save">
<div id="editListing" data-bind="template: 'editListingTemplate'"></div>
<div id="saveListing" class="end-actions">
<button type="submit">Save Listings</button>
</div>
</form>
<!-- End Form -->
<!-- Templates -->
<script type="text/html" id="editListingTemplate">
<div class="warning message error" data-bind="visible: Response.HasWarning">
<span>Correct the Following to Save</span>
<ul>
{{each(i, warning) Response.BusinessWarnings}}
<li data-bind="text: Message"></li>
{{/each}}
</ul>
</div>
<fieldset>
<legend>Key Information</legend>
<div class="editor-label">
<label>Project Name</label>
</div>
<div class="editor-field">
<input data-bind="value: Project_Name" class="title" />
</div>
</fieldset>
</script>
<!-- End templates -->
And this is the Knockout/Script
<script type="text/javascript">
#{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model)); }
var initialData = #jsonData;
var viewModel = ko.mapping.fromJS(initialData);
viewModel.save = function ()
{
this.Response = null;
var data = ko.toJSON(this);
$.ajax({
url: '#Url.Action("Edit")',
contentType: 'application/json',
type: "POST",
data: data,
dataType: 'json',
success: function (result) {
ko.mapping.updateFromJS(viewModel, result);
}
});
}
$(function() {
ko.applyBindings(viewModel);
});
</script>
And this is the response JSON returned from the successful request including validation messages.
{
"Id": 440,
"Project_Name": "",
"Response": {
"HasWarning": true,
"BusinessWarnings": [
{
"ExceptionType": 2,
"Message": "Project is invalid."
}, {
"ExceptionType": 1,
"Message": "Project_Name may not be null"
}
]
}
}
UPDATE
Fiddler Demo Is a trimmed live example of what I am experiencing. I have the Project_Name updating with the returned JSON but the viewModel.Response object and properties are not being updated through their data bindings. Specifically Response.HasWarning().
I've changed back to ko.mapping.updateFromJS because in my controller I am specifically returning Json(viewModel).
Cleaned up my initial code/question to match the demo.
I guess Response is reserved, when I change "Response" to "resp", everything went fine. See http://jsfiddle.net/BBzVm/
Should't you use ko.mapping.updateFromJSON on your success event? Chapter Working with JSON strings on Knockout Mapping site says:
If your Ajax call returns a JSON string (and does not deserialize it into a JavaScript object), then you can use the functions ko.mapping.fromJSON and ko.mapping.updateFromJSON to create and update your view model instead.