How to replace an AJAX post with Coldfusion within a cfc - jquery-ui

I have been trying to find a way to do something that seems to be pretty simple but can't seem to find a solution out there. I have a post that is made with some HTML in it and would like to dynamically change portions of it. I am using Coldfusion 9 for server side, AJAX, and jQuery UI 1.10.1 & jQuery 1.9.1.
What I would like to do is post in AJAX and replace the data server side within the cfc. Here is the code I have on the Client side.
var ipost = '<li> <h2>Persons Name</h2> </li>';
var message_a = $('#message_a').attr('value');
$.ajax({
type: "POST",
url: "cfc/cfc_Forum.cfc?method=func_AddNew&returnformat=json",
data: { message:"message_a=" + wall_post },
success: function () {
$('ul#posts').prepend(ipost);
}
});
I would like to replace the "PersonsID" with a "Session.Variable1" and "Persons Name" with "Session.Variable2". The cfc would be standard protocol for CF. Here is what the component would look like.
<cfcomponent>
<cffunction name="func_AddNew" access="remote" returntype="struct">
<cfargument name="message" type="string" required="true" />
<--- ********** replace "Persons ID" and "Persons Name" ************** --->
<!--- ********* INSERT INTO DATA BASE ************ --->
<cfreturn return />
</cffunction>
</cfcomponent>
Any recommendations would be great!

The code below will work but it does expose the person's personID if they were to look at the source code so there is a bit of a risk doing this. The other thing you could do is pass the cftolken and try to find the correct variables in the cfc which takes a bit more effort.
$.ajax({
type: "POST",
url: "cfc/cfc_Forum.cfc?method=func_AddNew&returnformat=json",
data: { message:"message_a=" + wall_post
, personID: <cfoutput>#Session.Variable1#</cfoutput>
, personName: <cfoutput>#Session.Variable2#</cfoutput>
},
success: function () {
$('ul#posts').prepend(ipost);
}
});

Related

How to display all projects and all issues inside each project

First off, I am new to Jira development, with that said I am trying to build a simple Jira plugin to display all projects and all issues inside each project. I am able to successfully display all projects directly from a velocity template like this:
<div class="aui-group">
#foreach ( $project in $projectManager.getProjectObjects() )
<div class="aui-item">
<h4>$project.getName() - $project.getId() <span>$projectManager.getCurrentCounterForProject($project.getId())</span></h4>
</div>
#end
</div>
However, I don't see anything in the documentation to get all issues inside a given project from the ProjectManager interface.
ProjectManager Docs
I would expect something like
$project.getIsses()
I do see under IssueManager interface documentation getIssueIdsForProject() So does this means that there is no easy way to get all issues on a given project from a velocity template, that I would have to create an endpoint to retrieve this using IssueManager interface by passing each project id as I loop? Please help. Code samples are welcome, as I mentioned I am new to Jira development and my Java is really rusty.
You will need to run a JQL query to get issues related to a known project. You can get JSON output which will allow you to do some post-processing, but there does not appear to be a simple way of getting this information without using the API or JQL.
I was not aware there is Rest API which I can leverage from the javascript :)
https://docs.atlassian.com/jira-software/REST/cloud/
So I did this:
AJS.$.ajax({
url: "/jira/rest/api/2/project",
type: "GET",
dataType: "json",
success: function (projects) {
AJS.$.each(projects, function (index, project) {
getProjectIssues(project);
});
}
});
var getProjectIssues = function (project) {
var pKey = project.key;
AJS.$.ajax({
url: "/jira/rest/api/2/search?jql=project=" + pKey,
type: "GET",
dataType: "json",
success: function (results) {
console.log('results ', results);
}
});
};

How can I do a multipart Post in Dart / AngularDart

I've got a REST api which assumes a multipartfile in the a post method.
Is there any way to do this kind of posts in Dart / AngularDart because all the solutions I've found so far are not working.
I've tried to use the http://dart-gde.github.io/dart-google-oauth2-library/multipart_file/MultipartFile.html solution, but it is not working in the browser because dart.io is not supported there.
My question is about the client side part directly from the browser. The serverside, which is written in Java can handle the post.
If you need multipart for file upload, all you have to do is send a FormData object using the HttpRequest class. Example:
import "dart:html";
...
var fileData; //file data to be uploaded
var formData = new FormData();
formData.append("field", "value"); //normal form field
formData.appendBlob("data", fileData); //binary data
HttpRequest.request("/service-url", method: "POST", sendData: formData).then((req) {
...
});
Furthermore, if you need to allow the user to upload a file from his hard disk, you have to use a html form with an <input type="file"> tag. Example:
Html file:
<form id="myForm" action="/service-url" method="POST" enctype="multipart/form-data">
<input type="text" name="field"> <!-- normal field -->
<input type="file" name="fileData"> <!-- file field -->
</form>
dart file:
var formData = new FormData(querySelector("#myForm"));
HttpRequest.request("/service-url", method: "POST", sendData: formData).then((req) {
...
});
I know this was asked a long time ago, but I've just had the same problem and the fix for me is the following (based on luizmineo's answer):
Use formData.appendBlob("data", fileData);
Don't set an explicit Content-Type header. This will get Dart to calculate the boundary section of the form-data which is crucial.
I finally found a way to post it as a multi-part form:
void uploadFiles() {
var formData = new FormData(querySelector("#fileForm"));
HttpRequest.request("/sp/file", method: "POST", sendData: formData).then((req) {
print("OK");
});
}
is used in conjunction with
<form id="fileForm" action="/sp/file" method="POST">
<input type="file" #upload (change)="uploadFiles(upload.files)"
(dragenter)="upload.style.setProperty('border', '3px solid green')"
(drop)="upload.style.setProperty('border', '2px dotted gray')" class="uploadDropZone" name="toUpload"/>

Slick grid is not working for more than 8 rows

In our MVC application ,we are using slick grid for displaying a data for Update,We are passing a json string to grid and display the rows for update .But until 8 rows it's working fine.but more than 8 rows Update is not working.While Update we are passing the json string to the controller and save the changes in the table. but When i checked in Firefox firbug the following error is coming .
TypeError: grid.base is undefined
My sample code: (for Displaying)
grid = new Slick.Grid($("#grid-dplistitem"), data, columns, options);
grid.base.render();
For update
grid.getEditController().commitCurrentEdit();
var data = grid.getData();
var griddata = JSON.stringify(data);
$.ajax({
url: '/Project/UpdateProjectMessage?gridData=' + griddata,
//data: "gridData=" + JSON.stringify(data),
type: 'POST',
contentType: 'application/json;',
dataType: 'json',
may be this could help you
add the following code in your web config file
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000"/>
</webServices>
</scripting>
</system.web.extensions>

MVC Web Api not getting called from javascript ajax

I have a Durandal/Hot Towel test app I'm trying to wire up. I have the below ajax call but I'm getting a 404 error.
GET http/.../api/Pizza/GetPizzasByOrderId?%22a8926610-a713-494c-bb15-46f6487a01c7%22 404 (Not Found)
I can manually change the url to:
http/.../api/GetPizzasByOrderId?orderId=a8926610-a713-494c-bb15-46f6487a01c7
It works. But I would like to know why the other call isn't working or more so, why is the ajax messing the parameter up in the URL and not as data like it does with complex objects. I have a get and a save that is working just fine. The get has zero params and the save is passing a complex object in.
C# Web Api Controller:
public class PizzaController : ApiController
{
[HttpGet]
public IEnumerable<Pizza> GetPizzasByOrderId(Guid orderId)
{
return DATA.GetPizzasByOrderId(orderId);
}
}
JAVASCRIPT:
var dataCall = $.ajax(config.getPizzasByOrderIdUrl, {
data: ko.toJSON(orderId),
type: "get",
contentType: "application/json"
});
Should I just change my JavaScript code to the below and be done with it or is there a better way to talk to the Api?
var getPizzasByOrderId = function (orderId) {
return Q.when($.getJSON(config.getPizzasByOrderIdUrl + "?orderId=" + orderId));
};
You could either use the code as you have it in that last code block, or you could pass in an object in place of your orderId as in the code block below. Either way, the difference is that the orderId parameter is being named.
var dataCall = $.ajax({
url: config.getPizzasByOrderIdUrl,
type: "GET",
data: {orderId : orderId},
});
In regard to why $.ajax() works fine for your POST, you can check this out pretty easily by running these two bits of code and viewing the requests that go across the wire. I recommend using google chrome.
Load a page that has jQuery loaded
Open the developer tools and go to the console
Enter the following code snippet
$.ajax("", {
data: {orderId: 123},
type: "get",
contentType: "application/json"
});
Switch to the network tab and click on the one that ends in ?orderId=123
Notice that it does have the data appended as query string parameters
In the snippet above, replace the "get" with "post"
After you hit enter, you should see another request on the network tab of the developer tools.
Notice that when changing nothing but the request type, the data is moved from the query string to the body. As noted in the comments, WebApi will pull from the body of the request and use the model binder to populate the complex object.

how to submit a php/html form loaded into a dialod using .load()

Am trying to understand jquery. Am a bit slow, maybe cause I come from a COBOL background.
I learn as i do, instead of just reading. php, jquery are all just hobbies for me
I used to have these update form pages. I wanted to try and put them in dialogs.
I trying using Dialog with an I frame, I did not like it, The iframes were very slow to load, of of the pages being loaded contained jquery tabs, which where even slower to load. And several other problems.
So I trying moving away from iframes. I stripped the pages and kept the meat(the body of my php/html file)(minus the body tag), So now I load a short version of my Form onto the dialog, It loads beautifully and looks good.
So next I wanna submit my for data, this is where I am a bit lost....
I am guesting I have to use Ajax, but on returning from Ajax with a OK/Fail message I am lost again.
My submit buttons were not jquery dialog buttons, Must they be so?
Must I use buttons:
{
"Save" : function () {
.....
"Close" : function () {
$(this).dialog("close");
.....
}
These are ugly and I have less control on where to place them and how the look.
All you need to do is make sure you have a form in your dialog box.
The, add a listener on your form. Let's say you have
<form id="myForm">
<input id="myInput" name="myName" type="text" />
</form>
Then you would add a listener :
$("#myForm").die().live('submit',function(e) {
e.preventDefault();
$.ajax({
type : POST,
url : localhost:8080/myUrl,
dataType : 'json',
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data : $("#myForm").serialize(),
success : function(){ //do what you want here, like displaying validation errors...},
error:function (xhr, ajaxOptions, thrownError){ //manage ajax errors}
});
return false;
});
So your Save button is just a plain input type="submit"
Have fun !

Resources