Jstree, get_checked, pass value to div onselect event - asp.net-mvc

i'm using an MVC c# asp.net 4.0 project with Jstree, but i have a small problem i have a jstree that's populated witha a JSON array.
My problem is I need to catch the value of the checkboxes in jstree when checked to a div in my view.

OK, i finally got this working this is the solution i hope it Help's someone :)
first you must bind:
.bind('check_node.jstree', function (e, data) {
$("#listSelectedActives").html(BuildList());
})
.bind('uncheck_node.jstree', function (e, data) {
$("#listSelectedActives").html(BuildList());
then the use this function:
function BuildList() {
var checked = $("#demoTree").jstree("get_checked", null, true);
var output = "";
$(checked).each(function (i, node) {
var id = $(node).attr("ID");
var text = $(node).attr("NodeText");
output += "<p>ID: " + id + " TEXT: " + text + "</p>";
})
return output;
}
If this is too confusing please let'me know :)

Related

How to get the ID of an inserted record in HANA back to SAPUI5 application?

I got an SAPUI5-application in which I create entries and save them via OData-service. That works, the code for the create operation can be found below. What I have to do now is, I need the ID of the inserted record in HANA back in my application. So what I did I implemented a success handler and thought I would get back this ID in the response from my OData-service. But that is not the case, I get back the same value I provided, in this case 0 since this just a dummy value for the OData-service. I did some research on how to tackle this problem, but none of the approaches worked. So I hope someone of you can help me out or got a hint how to do this. Below the code for create-operation, odata-service and the create.xsjs:
Create-operation in SAPUI5:
this.getOwnerComponent().getModel("Mitarbeiter").create("/ARB", oEntry, {
success: function(oData, response){
console.log(response);
}
});
OData-service:
service {
"MITARBEITERABTEILUNG"."ABTEILUNG" as "ABT" navigates ("Mitarbeiter" as "ARB");
"MITARBEITERABTEILUNG"."Mitarbeiter" as "ARB" create using "public.MitarbeiterAbteilung:mitarbeiterMethods.xsjslib::mitarbeiterCreate";
association "Mitarbeiter"
principal "ABT"("ID")
multiplicity "1"
dependent "ARB"("Abteilung")
multiplicity "*";
}
Create.xsjs:
function mitarbeiterCreate(param) {
let aAfterTableName = param.afterTableName;
var oEntry = {};
try {
var statement = param.connection.prepareStatement("SELECT * FROM\"" + aAfterTableName + "\"");
var rs = statement.executeQuery();
var statement2 = param.connection.prepareStatement('SELECT "MITARBEITERABTEILUNG"."MASEQUENCE".NEXTVAL from dummy');
var rs2 = statement2.executeQuery();
while (rs2.next()) {
oEntry.ID = rs2.getInteger(1);
}
statement2.close();
while (rs.next()) {
oEntry.Name = rs.getString(2);
oEntry.Adresse = rs.getString(3);
oEntry.bz = rs.getString(4);
oEntry.Abteilung = rs.getInteger(5);
}
statement = param.connection.prepareStatement('INSERT INTO "MITARBEITERABTEILUNG"."Mitarbeiter" VALUES (?,?,?,?,?)');
statement.setInteger(1, oEntry.ID);
statement.setString(2, oEntry.Name);
statement.setString(3, oEntry.Adresse);
statement.setString(4, oEntry.bz);
statement.setInteger(5, oEntry.Abteilung);
statement.execute();
statement.close();
} catch (e) {
statement.close();
}
}
Answered in the SAP Community here: https://answers.sap.com/questions/566957/how-to-get-the-id-of-an-inserted-record-in-hana-ba.html
The only thing you need to do, is to update the ID value in the "afterTableName" table provided by the function parameter. Something like that:
let statement = param.connection.prepareStatement('update "' + param.afterTableName + '" set ID = ' + oEntry.ID);
statement.executeUpdate();
Of course that needs to be done after you have determined your new ID. In case your column name is not "ID", please replace it with the real column name.

Why my md-autoComplete is not displaying return values

I am using Angular Material for the first time. I am stuck with an issue with autocomplete. Below is my template:
<md-autocomplete class="flex"
md-no-cache="true"
md-selected-item="c.receipt"
md-item-text="item.name"
md-search-text="SearchText"
md-items="item in querySearch(SearchText)"
md-floating-label="search">
<md-item-template>
<span><span class="search-result-type">{{item.GEOType}}</span><span md-highlight-text="SearchText">{{item.GEOName+(item.country?' / '+item.country:'')}}</span></span>
</md-item-template>
<md-not-found>No matches found.</md-not-found>
</md-autocomplete>
And in ctrl I have:
$scope.querySearch = function (query) {
var GeoDataAPIUrl = '/api/TargetSettings/RetrieveCorridorLeverValues';
if (query.length < 5)
return;
else {
var GeoDataSearchUrl = GeoDataAPIUrl + '?' + 'strGeoName=' + query;
$http
.get(GeoDataSearchUrl)
.then(function (geoAPIResponse) {
console.log("GeoAPIResponse was ", geoAPIResponse);
return geoAPIResponse.data;
},
function (geoAPIError) {
console.log("GeoAPI call failed ", geoAPIError);
});
}
};
With above code, I am getting nothing as suggestions, only my not-found text is displayed, while my http call return an array which is printed in console too. Am I missing something??
I saw at many places, people have used some filters with autocomplete, I dont think that is something essential.
Pls advice how to make above work.
$http returns promise and md-autocomplete uses same promise to display the result. In your case you are returning result but not promise. Your code should be
$scope.querySearch = function (query) {
var GeoDataAPIUrl = '/api/TargetSettings/RetrieveCorridorLeverValues';
if (query.length < 5)
return;
else {
var GeoDataSearchUrl = GeoDataAPIUrl + '?' + 'strGeoName=' + query;
var promise = $http.get(GeoDataSearchUrl).then(function (geoAPIResponse) {
console.log("GeoAPIResponse was ", geoAPIResponse);
return geoAPIResponse.data;
},
function (geoAPIError) {
console.log("GeoAPI call failed ", geoAPIError);
});
return promise;
}
};
It will work now.

ValidationSummary hyperlink doesn't change tab

Im using devexpress Html.DevExpress().ValidationSummary in my mvc project. My form contains a devexpress page control with 3 tabs. When there are client-side validation errors validation summary shows them, and every error is hyperlink. If you click it, the field with error is focused, but if the field is on other tab nothing happens. So the field is focused if it is on active tab. I'd like it to change the active tab and focus appropriate field. Is there a way to make it work right?
My colleague solved this problem using javascript and jQuery:
var nameControlTab = "myPageControl"; //name of your pagecontrol here
$(document).ready(function () {
$("tbody").on('click', 'a[href*="javascript:_aspxVSOnErrorClick("]', function () {
var url = $(this).attr("href");
url = url.substring(url.indexOf("'") + 1);
url = url.substring(0, url.indexOf("'"));
var idTab = $("#" + url + "_ET").parents('div[id*="' + nameControlTab + '_C"]').not(nameControlTab + '_CC')[0].id;
var indexTab = idTab.substring((nameControlTab + '_C').length);
SetTab(indexTab);
return true;
});
});
function indexOf(array, value) {
if ([].indexOf)
return array.indexOf(value);
else {
for (var i = 0; i < array.length; i++)
if (array[i] == value)
return i;
return -1;
}
}
function SetTab(indexTab) {
this[nameControlTab].SetActiveTabIndex(indexTab);
}

jQuery mobile autocomplete doesn't show my websql data

$("#username").autocomplete({
target: $('#usersss'),
source: function() {
var db = decoara.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT codigo as value, fantasia as label, tabela FROM clientes WHERE fantasia LIKE '%"+$("#username").val()+"%' LIMIT 4",null,
function (tx, results) {
jsonClientes = '[';
console.log('Rows:'+results.rows.length);
for (i=0; i<results.rows.length; i++) {
row = results.rows.item(i);
jsonClientes += '{"value":'+row['value']+',"label":"'+row['label']+'"}';
if (i!=results.rows.length-1)
jsonClientes += ',';
}
jsonClientes += ']';
console.log(jsonClientes);
return $.parseJSON(jsonClientes);
},function (tx, e) {
console.log('error: ' + e.message);
}
);
});
},
link: 'xxx.html?ops=',
minLength: 1
});
The source's function return this json code:
[{"value":27,"label":"NARDIM"},{"value":38,"label":"MORO"},{"value":39,"label":"MH"},{"value":40,"label":"IRMAO SAPIENZA"}]
But the list-view just don't appear. When I change the source to a var using the same jSON data, it works fine:
var autocompleteData = $.parseJSON('[{"value":27,"label":"NARDIM"},{"value":38,"label":"MORO"},{"value":39,"label":"MH"},{"value":40,"label":"IRMAO SAPIENZA"}]');
source: autocompleteData,
Why is that?
Try declaring the jsonClientes as an array and then use .push to store values inside it.
i.e
var jsonClientes = [];
console.log('Rows:'+results.rows.length);
for (i=0; i<results.rows.length; i++) {
row = results.rows.item(i);
jsonClientes.push ('{"value:"'+row.value+'",label:"'+row.label+'"},');
}
The database stuff happens asyncronous. When the .autocomplete() gets called, the function on the "source" gets called and in there a database query is executed. But this database query tx.executeSql() will finish at any time in the future (async) and the "source" of the autocomplete will not have the result.
Unfortunately I have not found out how to solve this for those kind of jquery addons, so I went ahead to build an autocomplete around my specific database query. Basically, I start with the database query and provide a callback for the tx.executeSql() that will fill my autocomplete dropdown.

jQuery UI portlets - toggle portlets to save to a cookie (half way there!)

I'm a bit of a jQuery n00b so please excuse me if this seems like a stupid question. I am creating a site using the jQuery UI more specifically the sortable portlets. I have been able store whether or not a portlet is has been open or closed to a cookie. This is done using the following code. The slider ID is currently where the controls are stored to turn each portlet on and off.
var cookie = $.cookie("hidden");
var hidden = cookie ? cookie.split("|").getUnique() : [];
var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date
// Remember content that was hidden
$.each( hidden, function(){
var pid = this; //parseInt(this,10);
$('#' + pid).hide();
$("#slider div[name='" + pid + "']").addClass('add');
})
// Add Click functionality
$("#slider div").click(function(){
$(this).toggleClass('add');
var el = $("div#" + $(this).attr('name'));
el.toggle();
updateCookie(el);
});
$('a.toggle').click(function(){
$(this).parents(".portlet").hide();
// *** Below line just needs to select the correct 'id' and insert as selector i.e ('#slider div#block-1') and then update cookie! ***
$('#slider div').addClass('add');
});
// Update the Cookie
function updateCookie(el){
var indx = el.attr('id');
var tmp = hidden.getUnique();
if (el.is(':hidden')) {
// add index of widget to hidden list
tmp.push(indx);
} else {
// remove element id from the list
tmp.splice( tmp.indexOf(indx) , 1);
}
hidden = tmp.getUnique();
$.cookie("hidden", hidden.join('|'), { expires: cookieExpires } );
}
})
// Return a unique array.
Array.prototype.getUnique = function() {
var o = new Object();
var i, e;
for (i = 0; e = this[i]; i++) {o[e] = 1};
var a = new Array();
for (e in o) {a.push (e)};
return a;
}
What I would like to do is also add a [x] into the corner of each portlet to give the user another way of hiding it but I'm unable to currently get this to store within the Cookie using the code above.
Can anyone give me a pointer of how I would do this?
Thanks in advance!
Gareth
Have you tried adding another selector to the click function?
$("#slider div, #slider div > span.ui-icon-x").click(function(){
$(this).toggleClass('add');
var el = $("div#" + $(this).attr('name'));
el.toggle();
updateCookie(el);
});

Resources