I want to create/save a .json file locally in Extjs with information from the DOM. Usually to POST, DELETE, GET or PUT .json query packets, the following method is used;
Ext.Ajax.request({
url: GlobalInfo.apiURL + 'api/grades/postsub',
method: 'POST',
params: {
SubjectName: newSubjectName,
SkillID: newSubjSkill
},
success: function(){
Ext.MessageBox.alert('Status', 'Success');
},
failure: function() {
Ext.Msg.alert('Status', 'You failed me! :o');
}
});
Is there a similar method I can use to create a local .json file on the hard drive of the user when they click a 'Save' button for example?
Create a store/model which uses a client proxy. Ext has a few built in client proxies.
Local storage
In memory
Session
If none of these work for your target browsers, then you will likely need to write your own.
The Sencha docs on proxies should help
Related
I am developing confluence blueprint where a user can choose between jira projects and use them for specific jira issues report.
Both instances are connected correctly with each other and I get results but only if I am logged as an admin. With normal user I am getting this:
<status>
<status-code>401</status-code>
<message>This resource requires WebSudo.</message>
</status>
Unfortunately I have to get the information from the jira server as AJAX post request with JavaScript and here is my code:
function pickDate(e, state) {
AJS.$('#spLebenStart').datePicker({
overrideBrowserDefault: true
});
getJiraUrl();
}
function getJiraUrl(){
var appUrl = AJS.contextPath() + "/rest/applinks/1.0/applicationlink/type/jira";
$.ajax({
type: 'GET',
url: appUrl,
data: {
key: "value"
},
dataType: "xml",
success: function (xml){
jiraID = $(xml).find("id").text();
},
complete: function(){
getJiraProjects(jiraID);
},
error: function() {
alert("ERROR # getJiraUrl");
}
});
}
function getJiraProjects(applicationId){
var restUrl = AJS.contextPath() + "/rest/applinks/1.0/entities/"+applicationId+"?os_authType=any";
$.ajax({
type: 'GET',
url: restUrl,
data: {
key: "value"
},
dataType: "xml",
success: function (xml){
jiraProjectKeys = [];
$(xml).find("entity").each(function(){
jiraProjectKeys.push({id: $(this).attr("key"), text: $(this).attr("name")});
});
},
crossDomain: true,
xhrFields: {
withCredentials: true
},
error: function() {
alert("ERROR # getJiraProjects");
},
complete: function(){
AJS.$('#spSelect').auiSelect2({
placeholder: 'Projekt auswählen...',
data:jiraProjectKeys,
multiple: false
});
}
});
}
I have tried to use login information with basic authentication in AJAX but it didn't help. Of course I can hardcode the id in the code but what if it get changed? Its not the best solution imo. How can I manage the websudo problem?
I'm new here (as a contributor) so pardon my newbie bloopers.
Looks like accessing /rest/applinks/1.0/applicationlink/type/jira indeed requires admin permissions. But there's an undocumented (AFAIK) workaround and this is how I do it.
There's an Atlassian plugin called Confluence JIRA Plugin. It's bundled with Confluence (hence it should be available in your installation). It provides you with a few cool features allowing JIRA integration (e.g. JIRA and JIRA Chart macros). To provide the integration it also adds a few useful endpoints to your Confluence REST API (which don't require admin access):
/rest/jiraanywhere/1.0/servers or /rest/jira-integration/1.0/servers to list the linked JIRA servers (inlcuding applink id)
/jira-integration/1.0/servers/{INSERT APPLINK ID HERE}/projects to list JIRA projects available to the logged-in user
Now, per your requirements, I'd hit 1. to get the applink id and then 2. to get the list of the projects. Hope it works with your product versions.
BONUS - JIRA Proxy
Another nice endpoint is /plugins/servlet/applinks/proxy. It allows forwarding simple REST requests to the linked JIRA instances. For example /plugins/servlet/applinks/proxy?appId={INSERT APPLINK ID HERE}&path=%2Frest%2Fapi%2F2%2Fsearch will call JIRA's issue search REST endpoint and list issues available to the user (as in JIRA search). By "simple request" I mean that only GET and POST HTTP methods are supported in the current version (with POST limited to application/xml and multipart/form-data content types). The servlet supports both query-string and HTTP-header parameters. Check out the source of the servlet in plugin's source to get more info as I haven't found any online documentation for it.
Using this servlet you can get the projects list as well by requesting /plugins/servlet/applinks/proxy?appId={INSERT APPLINK ID HERE}&path=%2Frest%2Fapi%2F2%2Fproject
Servlets's path in the repo is confluence-jira-plugin/src/main/java/com/atlassian/confluence/plugins/jira/AppLinksProxyRequestServlet.java, but most of the important stuff is in its base class confluence-jira-plugin/src/main/java/com/atlassian/confluence/plugins/jira/AbstractProxyServlet.java
I just want to access ALM via local written javascript js in the browser (IE11, Firefox) via the REST API but I can not login. Here is my code for requesting the LWSSO cookie via jquery:
var auth = btoa(USER+":"+PASSWORD);
$.ajax({
type: "POST",
url: https://alm.xxx.net/qcbin/authentication-point/j_spring_security_check,
headers: {
"Authorization": "Basic " + auth
},
success : function(data) { },
});
The response header contains:
https://alm.xxx.net/qcbin/authentication-point/login.jsp;jsessionid=1gfsdk4pn525f1ur55e2x2zzte?login_error
With OTA/directX object everything works fine but I want to use the REST API via javascript. Can anyone help me?
First of all; which version of ALM are you using? Second, I think you are using the wrong URL for the authentication point. According to the documentation (for ALM 12.01) it should be https://alm.xxx.net/qcbin/authentication-point/authenticate.
Also, the HTTP method you use should be GET, not POST.
I noticed that you are using https in the URL, so I assume your instance of ALM is set up with that?
I'm using Laravel 3, and I am AJAXing in a user comment. We are adding images to this comment and I can't seem to get the File Data to go through. When I set processData to false, I am also unable to access the other data such as the comment and privacy. Any insight?
var commentforms = $('form.compose');
commentforms.on('submit', function(e){
e.preventDefault();
var file = document.getElementById('file_input').files[0];
$.ajax({
type: 'POST',
url: '/issue/comment/' + issue_id,
processData: false,
data: {
side: side,
comment: comment,
privacy: privacy,
file: file,
},
success: function(response){
console.log(response);
new_comment = comment_template(response);
updateSide(new_comment);
},
});
Going off of what Kevin B commented, there are a couple ways to do this.
First, the reason it is not working is that, by default, you cannot send files with an AJAX request. That is it, and that is why it isn't working. No matter what you do to your form and your AJAX request, you are stuck. (AJAX here meaning NOT XMLHttpRequest2)
SOLUTION 1
Kevin B recommended the Javascript formData object which is part of the XMLHttpRequest Level 2. Information on how to use it can be found: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
In relation to your code, you code do something along the lines of:
commentforms.on('submit', function(e){
e.preventDefault();
var oData = new FormData(document.forms.namedItem("composeForm"));
var oReq = new XMLHttpRequest();
oReq.open("POST", '/issue/comment/' + issue_id, true);
//on a side note, issue_id isn't declared anywhere...
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
console.log("Uploaded!");
} else {
console.log("Error " + oReq.status + " occurred uploading your file.");
}
};
oReq.send(oData);
});
PROBLEM
Again, as Kevin B said, it isn't widely supported. Checking here: http://caniuse.com/xhr2 you can see that IE9 and below isn't supported, which is XP, Vista, and non-upgraded Windows 7. If your app is on your own controlled network, and you can ensure everyone is using Firefox/Chrome/IE10+, you are good to go. If you are going to be using this feature with the public, then you need another solution.
OTHER SOLUTIONS
Many sites currently use AJAX to upload files, or trick you into thinking it is AJAX. What other websites do is one of two things: hidden iFrames or Flash.
The hidden iFrame trick is to create an iframe that populates the data of your current form, and then sends it off like it normally would, meaning a page reload. Because it is in an iFrame and hidden, the user never sees the page reload and the content is uploaded like you would expect.
The Flash trick is to use a little Flash app/plugin that finds the file and then sends it to your server. It is fairly easy to use, and since Flash is widely supported, it can do the trick on most browsers. You just have to include the plugin and you are good to go.
Plugins
I prefer to use plugins, as they do all the hard work for me. The one I am fond of right now for it's simplicity is Fine Uploader. It is easy to configure, looks great, can be Bootstrapped, or used with jQuery. Plugins may use one or both methods to upload the files, or they may even try the XMLHttpRequest2 first, then fall back on one of the other methods to upload the files. Ultimately, most of the popular plugins are easy to configure and provide fairly decent documentation to get it to do what you want.
Other popular plugins:
Uploadify
BlueImp
Plupload
read this:
With XHR2, File upload through AJAX is supported. E.g. through
FormData object, but unfortunately it is not supported by all/old
browsers.
Try with this:
Tutorial
And see this code:
var data= new FormData();
data.append( 'file', $('#file') );
$.ajax({
url: 'file.php',
data: data,
processData: false,
contentType: false,
type: 'POST',
success: function(response){
console.log(response);
}
});
Suerte!
I want to do the offline web application.
So I'm changing the Ajax to JSON in using JQuery offline.
Ajax code:
$.ajax({
url: contentpage,
data: contentpagedata,
cache: false
}).done(function( html ) {
contentf=''+html;
$("#ajaxcontent").empty().append(contentf).fadeIn(500);
$("#submenu-content").empty().append(topf).fadeIn(500);
alert(contentpage);
}
});
Try to replace by JSON:
var updateArticles = function(callback) {
alert(contentpage);
$.retrieveJSON(contentpage, {data: contentpagedata}, function(json, status) {
alert("123");
var contentf = $("#ajaxcontentTemplate").render( json );
$("#ajaxcontent").empty().append(contentf).fadeIn(500);
});
};
Anyone has idea on this? Besides, should I create a .json or .rb files...etc? Also, is the Manifest file able to cache the dynamic files like .PHP??
Manifest cache can be used only for caching static resources. For dynamic resources,
use WEBSQL. Although WEBSQL is phased out, if you are targeting your app for mobile then i would suggest you to use WEBSQL as well as IndexDB.
I've got the following ajax call:
var blind = Ext.create('MyApp.view.blind.Progress', {});
blind.show();
Ext.Ajax.request({
url: config.url,
params: {
nodeId: config.data[0].value,
fileName: config.data[1].value,
startDateTime: config.data[2].value,
endDateTime: config.data[3].value,
reportFormat: config.data[4].value
},
success: function (response) {
console.log(response);
blind.close();
}
});
I want to display a blind with a loading graphic, and close it upon completion. Is there any way to use this ajax callback to download the file from the response? Am I on the right track? I would like to avoid using iframes or opening new tabs if possible. I'm open to using other libraries like jquery if it's easier.
Don't think its possible to respond with a file to an ajax request. a simple form submit should do the trick.
Well I don't like being told what I can't do so I kept researching and found this jquery plugin. It works by polling a cookie made by the server when the file is delivered, and the typical iframe method for downloading files. No bloat, no flash, exactly what I was looking for:
Jquery File Download
Download the plugin, link it somewhere in your site, and add this cookie generation code to wherever your file request is going (there are more examples at the link, I'm using ASP.NET):
HttpContext.Current.Response.SetCookie(new HttpCookie("fileDownload", "true") { Path = "/" });
Sample code from my app, using the success and fail callbacks of the plugin to control my extjs blind:
$.fileDownload(config.url, {
successCallback: function (url) {
//Show a message here or perform some task
blind.close();
},
failCallback: function (html, url) {
blind.close();
alert("The report generation failed.");
},
httpMethod: "POST",
data: {
nodeId: config.data[0].value,
fileName: config.data[1].value,
startDateTime: config.data[2].value,
endDateTime: config.data[3].value,
reportFormat: config.data[4].value
}
});