I am really stuck on a jstree issue; I have 2 trees a “source” tree and a “destination” tree. The “source” tree is a flat tree that contains nodes that I wish to drag over to the “destination” tree to build it out. But, after the drag I need those nodes to stay so I can reuse them. Now, if I press the control key down before and during the drag it will perform a copy function and leave the source node. But, I don’t want to have the user do this; I would like the tree to always copy. Which is why I used this setting, but it’s not working on my tree. Can anyone help? Here is the code, minus data, which causes this issue.
Thanks!!
<script type="text/javascript">
$(function () {
$("#SourceTree").jstree({
"json_data": {
"ajax": {
"url": "Home/GetTree",
"type": "POST",
"contentType": "application/json; charset=utf-8",
"dataType": "json",
"data": function (n) {
var result = "{'id':'" + (n.attr ? n.attr("id").replace("node_", "") : "0") + "'}";
return (result);
}
}
},
"crrm": {
"move": {
"always_copy": "multitree",
// Do not allow a node move within this tree
"check_move": function () {
return false;
},
}
},
"plugins": ["themes", "json_data", "ui", "types", "crrm", "dnd"]
})
$("#DestinationTree").jstree({
"json_data": {
"ajax": {
"url": "Home/GetTree",
"type": "POST",
"contentType": "application/json; charset=utf-8",
"dataType": "json",
"data": function (n) {
var result = "{'id':'" + (n.attr ? n.attr("id").replace("node_", "") : "0") + "'}";
return (result);
}
}
},
"plugins": ["themes", "json_data", "ui", "types", "dnd", "crrm"]
})
});
</script>
OK, I figured it out with lots of trial and error:
The source tree must have:
1) "dnd" & "crrm" plugs ins like the example does
2) The move.check_move function must be present as well as above
3) We do NOT need the move.always_copy, delete this, not needed here.
The destination tree must have:
1) "dnd" & "crrm" plugs ins like the example does
2) Needed to add the crrm.move.always_copy:true, here.
"crrm": {
"move":
{
"always_copy": true
}
},
Related
I am having trouble updating hidden inputs using data retrieved from Select2 Ajax.
Please see my code:
var select2_town = $('.select-test select').select2({
ajax: {
url : ajax_var.url,
dataType: 'json',
type: 'post',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page,
};
},
processResults: function (data, page) {
return {
results: $.map(data, function (item) {
return {
id: item.id, //eg 1149
town: item.place_name, //eg Reading
county: item.county, //eg Berkshire
country: item.country,
data: item
};
})
};
},
cache: true;
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: function (item) { return ('<p>' + item.town + ' - ' + item.county + '</p>'); },
templateSelection: function (item) { return (item.town); },
});
This code works fine for me. My issue is what happens after a value is selected.
I would like to update my hidden input ids "#town","#county" and "#country" with town,county and country respectively through an 'change' event.
I have seen many SO examples but they all stop at $(this).select2('data')[0];but do not expand on it.
Weird thing is that the following script displays the correct value in console log. but ALWAYS only apply the object id to #country.
select2_town.on('change', function() {
var obz = $(this).select2('data')[0].country;
console.log(obz);//displays Reading in console
$("#country").attr("value",obz); //displays 1149
});
This actually works.
I had another function that was adding the ID hidden in another file. I deleted that and then the script worked as I wanted it to.
Regards
Thanks
I'm creating a simple select2 search box with a remote request to a php page.
I choosed to use "json" instead of "jsonp" and it seems correctly working.
The problem is that the results are white: no writes as element list.
In the image that I cannot post because "I need at least 10 reputation to post"... -.-
You could see the input box with the letter "d" and:
no loading icon (because the search has correctly ended)
no "Search" write (because the search has correctly ended)
the search box height is exactly for 2 results and you can select the results but the text is invisible.. you see just the blue selection..
The code follows:
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
minimumInputLength: 1,
ajax: {
url: url,
dataType: 'json',
data: function(term, page) {
return {
q: term,
page_limit: 10
};
},
results: function(data, page) {
return {
results: data
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id: item[0],
title: item[1]
});
});
//$(element).val('');
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.title + '</div>';
};
function formatSelection(data) {
return data.title;
};
MultiAjaxAutoComplete('#advertiser', '/AJAXController');
and the returned json data is the following
[{"id":"12889","title":"Donnie Darko" },
{"id":"8", "title":"Another title"}
]
PS: I got two results because, at the moment, I'm returning the json data as direct output text with "echo <<< EOF ..."
Thank you,
Mauro
var data = [
{ "id":"12889", "title":"Donnie Darko" },
{ "id":"8", "title":"Another title"}
]
$(element).select2('data', data);
I'm getting a problem with my Tree Grid, I can just expand the first level, its children come with a icon that does not allow to expand anymore, what am i doing wrong?
View
Grid Load Complete, I thing the error is here...
loadComplete: function () {
$(this).find("tr.jqgrow").each(function (tr) {
var idLinha = $(this).attr('id');
var level = this.cells[4].childNodes[0].data;
$(this).find("div.treeclick").bind("click", function (e) {
var classes = $(this).attr('class');
if (classes.indexOf('-minus') != -1) {
if (!$(this).hasClass('expanded')) {
$(this).addClass('expanded');
$.ajax({
type: 'post',
url: '#Url.Action("AddFilhos")',
data: { p_PaiID: idLinha, p_Level: level },
dataType: "json",
success: function (result) {
for(var c_Area = 0; c_Area < result.rows.length; c_Area++)
{
$('#listaRelatorioFormulario').addChildNode(result.rows[c_Area].id, result.rows[c_Area].parent, result.rows[c_Area]);
}
}
});
}
}
else if (classes.indexOf('-plus') != -1) {
}
});
});
},
To expand the nodes during loading of the TreeGrid you need just include expanded: true. See the answer for example for more information.
Be careful about another bug described in the answer (the workaround is described in the answer too).
UPDATED: You should read additionally the answer which could be probably also interesting for you.
I have searched stackoverflow, as well as the web for some insight into how to get the jQueryUI Autocomplete plugin working with my JSON data, and I'm at a loss. I had it working like a charm with a local data array. I was able to pull values and build html.
I ran into a problem when I had to pull JSON form this source:
/Search/AjaxFindPeopleProperties2
?txtSearch=ca pulls up the test data that I am trying to loop through, when I type in 'ca' to populate the autocomplete list. One of the problems is that ?term=ca is appended to the url instead of ?txtSearch=ca and I'm not sure how to change it.
This is an example of the data:
{
"MatchedProperties": [
{
"Id": 201,
"Name": "Carlyle Center",
"Description": "Comfort, convenience and style are just a few of the features you'll ...",
"ImageUrl": "/Photos/n/225/4989/PU__ThumbnailRS.jpg"
}
]
}
...and here is the ajax call I'm trying to implement:
$(document).ready(function () {
val = $("#txtSearch").val();
$.ajax({
type: "POST",
url: "/Search/AjaxFindPeopleProperties2",
dataType: "json",
data: "{}",
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#txtSearch').autocomplete({
minLength: 0,
source: data.d, //not sure what this is or if it's correct
focus: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
$.widget("custom.catcomplete", $.ui.autocomplete, {
//customize menu item html here
_renderItem: function (ul, item) {
return $("<li class='suggested-search-item" + " " + currentCategory + "'></li>")
.data("item.autocomplete", item)
.append($("<a><img src='" + item.MatchedProperties.ImageUrl + "' /><span class='name'>" + item.MatchedProperties.Name + "</span><span class='location'>" + "item.location" + "</span><span class='description'>" + item.MatchedProperties.Description + "</span></a>"))
.appendTo(ul);
},
_renderMenu: function (ul, items) {
var self = this,
currentCategory = "Properties Static Test Category";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='suggested-search-category ui-autocomplete-category'>" + currentCategory + "</li>");
//currentCategory = item.category;
}
self._renderItem(ul, item);
});
}
}//END: widget
//return false;
},
select: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
//$('#selectedValue').text("Selected value:" + ui.item.Abbreviation);
return false;
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
}); //END ajax
}); //END: doc ready
and I'm initializing here:
<script type="text/javascript">
//initialize autocomplete
$("#txtSearch").autocomplete({ //autocomplete with category support
/*basic settings*/
delay: 0,
source: "/Search/AjaxFindPeopleProperties2",
autoFocus: true,
minLength: 2 //can adjust this to determine how many characters need to be entered before autocomplete will kick in
});
//set auto fucus
$("#txtSearch").autocomplete("option", "autoFocus", true);
</script>
any help would be great...
Thanks!
Where you can pick an item from a <select> menu and then it populates a second <select> menu.
It goes by too many names and there are too many implementations. I'm looking for an up-to-date one (works well with the latest version of jQuery) that can pull the data using Ajax.
Can anyone recommend a good plugin?
// simple code but can be improved for need
function getListBoxValue(obj) {
obj = $.extend({
url: "",
bindObj: null,
emptyText: "exception",
postValues : {},
onComplete: function () { return true; },
onError: function () { return false; }
}, obj);
$.ajax({
url: obj.url,
data: obj.postValues,
type: "POST",
dataType: "JSON",
success: function (json) {
var options;
$.each(json, function (i, e) {
options += "<option value='" + e.Value + "'>" + e.Text + "</option>";
});
$(obj.bindObj).html(options);
obj.onComplete(obj);
},
error: function (e, xhr) {
$(obj.bindObj).html("<option value='-1'>" + obj.emptyText + "</option>");
obj.onError(obj);
}
});
}
// server response data json
[{ "Value": 1, "Text": "text 1 " },{ "Value": 2, "Text": "text 2"}]
getListBoxValue({
url: responseJsonDataURL, // example
bindObj: $("select#YourID"), // example
emptyText:"exception text", // example
postValues: {"id": 45}, // example
onComplete: _onCompleteFunction, // optional
onError: _onErrorFunction // optional
})