I see uploaded files in my UploadCollection-Control when I Start the app.
I want to delete files, after pressing the 'X' button next to the file.
But after pressing the button, it doesn't call the DELETE_STREAM method in the backend.
Do I have to trigger DELETE_STREAM myself in the frontend?
And can I send parameters like documentid or custom parameters to DELETE_STREAM when I call it?
<UploadCollection
id="UploadCollection"
mode="SingleSelectMaster"
beforeUploadStarts="onBeforeUploadStarts"
multiple="false"
instantUpload="false"
uploadUrl="/sap/opu/odata/sap/xyz"
uploadComplete="onUploadComplete">
<items>
<UploadCollectionItem
documentId="{Documentid}"
fileName="{Filename}" url="/sap/opu/odata/sap/xyz/$value"
mimeType="{Mimetype}">
</UploadCollectionItem>
</items>
</UploadCollection>
You have to implement the event fileDeleted of your UploadCollection.
<UploadCollection
...
fileDeleted="onFileDeleted">
In this method you can get the binding context of the deleted item. Then with this information you do not trigger DELETE_STREAM but the DELETE method of your entity:
onFileDeleted: function(oEvent) {
const sPath = oEvent.getParameter("item").getBindingContext().getPath();
this.getModel().remove(sPath, {
success: (oData) => {},
error: (oError) => {}
});
}
Related
I have an editor page. When I add any content and click the "Save" button my URL will change, adding a random id in the URL. I want to check if my ID's are changing every time when I click the "Save button".
I save the URL result in variable and want to check it, I do it like this:
const currentURL = cy.url();
cy.get('.editor-toolbar-actions-save').click();
cy.url().should('not.eq', currentURL);
But my currentURL variable's type is not string:
expected http://localhost:8080/editor/37b44d4d-48b7-4d19-b3de-56b38fc9f951 to not equal { Object (chainerId, firstCall) }
How I can use my variable?
tl;dr
Cypress commands are asynchronous, you have to use then to work with their yields.
cy.url().then(url => {
cy.get('.editor-toolbar-actions-save').click();
cy.url().should('not.eq', url);
});
Explanation
A similar question was asked on GitHub, and the official document on aliases explains this phenomenon in great detail:
You cannot assign or work with the return values of any Cypress command. Commands are enqueued and run asynchronously.
The solution is shown too:
To access what each Cypress command yields you use .then().
cy.get('button').then(($btn) => {
// $btn is the object that the previous
// command yielded us
})
It is also a good idea to check out the core concepts docs's section on asynchronicity.
These commands return a chainable type, not primitive values like strings, so assigning them to variables will require further action to 'extract' the string.
In order to get the url string, you need to do
cy.url().then(urlString => //do whatever)
I have been having the same issue and so far most consistent method has been to save the URL to file and read it from file when you need to access it again:
//store the url into a file so that we can read it again elsewhere
cy.url().then(url => {
const saveLocation = `cypress/results/data/${Cypress.spec.name}.location.txt`
cy.writeFile(saveLocation, getUrl)
})
//elsewhere read the file and do thing with it
cy.readFile(`cypress/results/data/${Cypress.spec.name}.location.txt`).then((url) => {
cy.log(`returning back to editor ${url}`)
cy.visit(url)
})
Try this:
describe("Test Suite", () => {
let savedUrl;
beforeEach(() => {
cy.visit("https://duckduckgo.com/");
cy.url().then(($url) => {
savedUrl = $url;
});
});
it("Assert that theURL after the search doens't equal the URL before.", () => {
cy.get("#search_form_input_homepage").type("duck");
cy.get("#search_button_homepage").click();
// Check if this URL "https://duckduckgo.com/?q=duck&t=h_&ia=web"
// doesn't equal the saved URL "https://duckduckgo.com/"
cy.url().should("not.eq", savedUrl);
});
});
Refer below code snippet, Here you can get the current URL and store it in a variable, do print via cy.log()
context('Get Current URL', () => {
it('Get current url and print', () => {
cy.visit('https://docs.cypress.io/api/commands/url')
cy.url().then(url => {
const getUrl = url
cy.log('Current URL is : '+getUrl)
})
})
})
#Max thanks this helped to get some ideas on different versions.
The way I did it is:
Create a .json file in your fixtures folder (name it whatever you want).
On the new .json file, only add: { } brackets and leave the rest blank. The function will self populate that .json file.
Create a new function on the commands page to easily call it on your test.
It would probably be best to create two functions, 1 function to write url or the sliced piece of the url, and the another function to call it so you can use it.
A. Example of 1st method, this method cuts the id off of the URL and stores it on the .json file:
Cypress.Commands.add('writeToJSON', (nameOfJSONSlicedSection) =>
{
cy.url().then(urlID =>
{
let urlBit = urlID.slice(urlID.indexOf('s/') + 2, urlID.indexOf('/edit'))
cy.writeFile('cypress/fixtures/XYZ.json', {name: nameOfJSONSlicedSection, id: urlBit}) /*{ }<-- these will populate the json file with name: xxxxx and id:xxxxx, you can changes those to whatever meets your requirements. using .slice() to take a section of the url. I needed the id that is on the url, so I cut only that section out and put it on the json file.*/
})
})
B. 2nd example function of calling it to be used.
This function is to type in the id that is on the url into a search box, to find the item I require on a different it() block.
Cypress.Commands.add('readJSONFile', (storedJSONFile) =>
{
cy.readFile('cypress/fixtures/XYZ.json').its('id').then((urlSetter) => {
cy.log(storedJSONFile, 'returning ID: ' + urlSetter)
//Search for Story
cy.get('Search text box').should('be.visible').type(urlSetter, {delay: 75})
})
})
/*here I use a .then() and hold the "id" with "urlSetter", then I type it in the search box to find it by the id that is in the URL. Also note that using ".its()" you can call any part section you require, example: .its('name') or .its('id') */
I hope this helps!
I'm doing a simple AJAX call to append an album's tracks in an unordered list. It will append the tracks on the second click with this code:
window.app.views.AlbumView = Backbone.View.extend({...
events: {
'click .queue-add' : 'selectAlbum',
'click .show-tracks' : 'showTracks',
'click .hide-tracks' : 'hideTracks',
},
showTracks: function(){
_this = this
this.model.getTracks().forEach(function(track){
_this.$el.find('.tracks').append("<li>"+track.attributes.title+"</li>");
});
},
Clearly the tracks hadn't been fetched in time for the first click so I added a callback function to the showTracks method like so:
showTracks: function(){
_this = this
this.model.getTracks({
success: function(tracks){
console.log(tracks);
tracks.forEach(function(track){
_this.$el.find('.tracks').append("<li>"+track.attributes.title+"</li>");
});
}
});
},
Yet it won't enter the block and the console.log(tracks); puts nothing to the console.
Any tips would be really awesome here, thanks!!
app.models.Album = Backbone.Model.extend({
....
getTracks: function() {
this.tracks.fetch();
return this.tracks
},
....
});
I couldn't find where did you invoke that callback. you may need modify "getTracks" method like this:
getTracks: function(callback) {
this.tracks.fetch();
callback(this.tracks); //you need to invoke the callback before return
return this.tracks;
}
This is called "callback pattern", google it will find more.
and the backbone model's fetch method accept option argument, It is a object with two keys -- success and error -- both are function. If you provide this argument, backbone will call them automatically.
hope this help.
Using the custom bootstrap plugin for typeahead functionality
https://gist.github.com/1891669
How to attach a callback for 'select' event?
The following code doesn't work.
var selectedFn = $('.typeahead dropdown-menu').on('select', function( ev ){
console.log(ev);
});
Can someone explain how this works?
A new way of doing this is:
$('.input').typeahead({
// snip
}).on('typeahead:selected', function() {
// on selected
});
$('#myselector').typeahead({
itemSelected:function(data,value,text){
console.log(data)
alert('value is'+value);
alert('text is'+text);
},
//your other stuffs
});
You have to just pass itemSelected in the callback function and it will give you the selected item.
Hope this will work for you.
You can just listen to your inputs change event like this:
$('input.typeahead').on('change', function () { ... })
Specify the arguments in the function that handles the event in order to get the value selected as suggested in the documentation at https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events
.on('typeahead:select', function(ev,value) {
//value = the selected object
//e.g.: {State: "South Dakota", Capital: "Pierre"}
})
It gives exactly the same result with typeahead:select instead of typeahead:selected. I'd rather go with the one which is documented.
$('.typeaheadGroupSelect').typeahead({
// snip
}).on('typeahead:selected', function(data, value, text) {
// on selected
console.log(data);
console.log(value.idPublic); // here you can access all json object by using value.key
console.log(value.name);
});
I used above code snippet to access data from the selection and assign certain hidden values to another input.
Prior I added an object to the data source typeahead is using to query data, see below:
var jsonData = [
{"id":"1","idPublic":"978343HFJ","name":"Volkswagen Group Sales International"},
{"id":"2","idPublic":"8343JJR98","name":"BMW Group Sales APAC"},
{"id":"3","idPublic":"935723JFF","name":"Jaguar Group Sales Asia"},
{"id":"4","idPublic":"3243JFUFF","name":"Mercedes Benz Group Sales Europe"}
];
I have this site that i am working on that i need to figure out when the last ajax call is finished...I am using this jQuery plugin and all works great but the problem is the client uploads 2 files at a time... and i need to redirect to another page after the last ajax call. If you look the it in firebug while uploading files it run http://dev.posnation.com/test/j/example/upload.php twice and i need to have the page redirect after and only after the second run..is there a way in javascript or jQuery to tell if the ajax calls are complete.
Here is the code that instantiates it
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload();
and there is a onDone function in the jQuery.fileupload.js
_onDone: function (result, textStatus, jqXHR, options) {
but its running after the first run not after both files are uploaded....any ideas on how i can redirect to another page after both files are uploaded....thanks in advance
the short answer is to decrement a counter in the onDone callback. one possible implementation would be to use a global variable as illustrated below:
var numberFilesToUpload = 2;
// code to upload file
onDone: function() {
// this is the upload plug-ins callback function
numberFilesToUpload--;
if (numberFileToUpload == 0) {
windows.location.href = "/uploading-finished";
}
}
there are more elegant solutions, but they will all involve decrementing a counter.
You could use closure to produce the function which has a local records for files have uploaded.
var fileUploads = function (filesNum, callback) {
var numberFilesToUpload = filesNum;
// code to upload file
return function() {
// this is the upload plug-ins callback function
numberFilesToUpload--;
if (numberFileToUpload == 0) {
callback();
}
};
}(2, function () {
//what you want to do when files are all uploaded.
});
fileUploads will fire the callback function after 2 files are uploaded. The callback and filelimits are specified in this line
var fileUploads = function () {
//...
} (2, function () {});
Im trying to create an ajax (post) event that will populate a table in a div on button click.
I have a list of groups, when you click on a group, I would like the table to "disappear" and the members that belong to that group to "appear".
My problem comes up when using jQuery's .ajax...
When I click on the button, it is looking for a controller that doesnt exist, and a controller that is NOT referenced. I am, however, using AREAS (MVC2), and the area is named Member_Select where the controller is named MemberSelect. When I click on the button, I get a 404 stating it cannot find the controller Member_Select. I have examined the link button and it is set to Member_Select when clicked on, but here's the ajax call:
$.ajax({
type: "POST",
url: '/MemberSelect/GetMembersFromGroup',
success: function(html) { $("#groupResults").html(html); }
});
I havent been able to find any examples/help online.
Any thoughts/suggestions/hints would be greatly appreciated.
Thanks!
Have you tried navigating to /MemberSelect/GetMembersFromGroup to see what you get? - if it's 404'ing it's because the route can't be matched to a controller/ action.
I've not used the new areas functionality, but I'm not sure that the URL you've got is correct...I would have thought it would have been /AREANAME/MemberSelect/GetMembersFromGroup...but I could be wrong..!
When I did this, it worked fine. I didn't use POST and I don't know what AREAS means.
$("#item").autocomplete({
source: function(req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>", true);
$.ajax({
url : ajaxUrlBase1 + "GetMatchedCities/" + req.term,
cache : false,
type : "GET", // http method
success : function(msg){
// ajax call has returned
var result = msg;
var a = [];
if (result !== null){
for(var i=0; i < result.length; i++) {
a.push({label: result[i].prop1, id: result[i].prop2});
}
}
responseFn(a);
}
});
}
});
Use:
area_name/controller_name/action_name
Instead of doing $.ajax I would use jQuery Form Plugin.
and have my form set as:
Html.BeginForm("Index","AdminArea/Admin",FormMethod.Post,
new { id="form-user", name="form-user"})
To use jQuery Form Plugin have a look here:
http://arturito.net/2010/12/02/asp-net-mvc2-jquery-form-post-tutorial/
You cold save your url in a Hidden Form element in (Html.HiddenForm()) and use the #id javascript operator to retrieve it. Just found this out today.