I'm trying to delete dynamically created DOM elements and for some reason I can't get it to work.
It's creating the objects fine and with the ID that I specified, but it won't delete.
The check on the if statement is working, because it prints out that console.log().
Any ideas?
function displayLive()
{
var previous = null;
var current = null;
setInterval(function()
{
$.ajax({
url: '/showLive',
dataType: 'json',
contentType: 'application/json',
success: function(response)
{
current = JSON.stringify(response);
if(previous !== current)
{
var obj = JSON.parse(response);
console.log(obj);
for(var i = 0; i < obj.active.length; i++)
{
if(obj.active[i].active === true)
{
$('.left').prepend($('<div/>', {class: 'profTemp', id: obj.active[i].userNameData}).append(
$('<img/>', {src: obj.active[i].profiler, width: 40, height: 40}),
$('<span/>', {text: " " + obj.active[i].userNameData})));
}
else if(obj.active[i].active === false)
{
$('#%s' , obj.active[i].userNameData).remove();
console.log("getting in false");
}
}
}
}
});
previous = current;
}, 2000);
}
The username has a dot in it (or other select character). Use
$(document.getElementById(obj.active[i].userNameData)).remove()
To get around that.
Try to change:
$('#%s' , obj.active[i].userNameData).remove();
To :
$('#' + obj.active[i].userNameData).remove();
Related
This JS is running on my page load and I don't want it to. I thought it should wait for change of ddlEquipment but it isn't. On top of that selectedID4 should be null at page load so it shouldn't run the if. Does anyone know how I can stop this?
$("#ddlEquipment").change(function() {
var selectedid = $('#ddlSubDepartments option:selected').val();
var selectedid2 = $('#ddlDepartments option:selected').val();
var selectedid3 = $('#ddlMachines option:selected').val();
var selectedid4 = $('#ddlEquipment option:selected').val();
alert("test");
if (selectedid4 != null) {
$.ajax({
url: "/Problem/PopulateProblemsddl",
data: {
id: selectedid,
id2: selectedid2,
id3: selectedid3,
id4: selectedid4
},
type: "Post",
dataType: "Json",
success: function(result) {
console.log(result);
var s = '<th></th>';
for (var i = 0; i < result.length; i++) {
s += '<th>'
result[i].value '</th>';
}
console.log(s);
$('#NameOfProblem').html(s);
});
}
else {
alert("this is else");
}
});
Wrap you function into
window.addEventListener('load', () => {
$("#ddlEquipment").change(function () {
// rest of your code
}
});
Here's my problem:
I load a first time my tree to display him.
I can change the value of the Session's files name "state" to enable or disable a node in my tree.
But after I change ne value in my database and return the JSON, I read again the tree to refresh my tree with the changes but it's failed and write in console :
" TypeError: Tree_view.getElementsByClassName(...)[0].children[(item.id_perso - 1)].children[1] is undefined".
That I don't understand is I pass my first time by these functions and it work well, but when I reload it failed apparently because the it undefined.
Thank's for any help.
$(document).ready(function() {
$('#Tree_view').kendoTreeView({
template: "#= item.name #",
dataSource: Parcours,
dataTextField: 'name',
loadOnDemand: true,
expand: onExpandedItem
});
});
function onExpandedItem(e) {
var id_user = #Model.id;
var item = $('#Tree_view').data('kendoTreeView').dataItem(e.node);
var treeview = $('#Tree_view').data('kendoTreeView');
var type = item.fields.type;
if (item.level() > 0) {
item.id_parcours = item.parentNode().id_parcours;
if (item.level() == 2) {
item.id_promo = item.parentNode().id;
}
}
else item.id_parcours = item.Id;
switch (type) {
case 'parcours':
item.children.transport.options.read = {
url: '#Url.Action("Get_Session", "Users")' + '?user_id=' + id_user,
dataType: "json",
};
break;
case 'session':
item.children.transport.options.read = {
url: '#Url.Action("Get_Matiere")' + '?user_id=' + id_user,
dataType: "json"
};
break;
default:
break;
}
if (item.level() == 0) {
setTimeout(function() { waitDisable(item, treeview); }, 1000);
}
}
function waitDisable(item, treeview) {
if (item.fields.type == "parcours")
{
var node = Tree_view.getElementsByClassName('k-group')[0].children[item.id_perso - 1].children[1].children;
for (i = 0; i < item.children._data.length; i ++)
{
if (item.children._data[i].state != null) {
node[i].children[0].children[1].className = "k-in k-state-disabled";
node[i].children[0].children[0].className = ".k-icon-remove";
}
else node[i].children[0].children[0].className = "k-icon k-plus";
addRow(node, item, i, treeview);
}
}
}
var cmp = 0;
var One_Time = false;
function addRow(node_Here, item, i, treeview) {
var actual_row = node_Here[i].children[0];
if (actual_row.childNodes.length < 3) {
var newSpan = document.createElement('button');
if (item.children._data[i]._childrenOptions.data.state != null) {
newSpan.appendChild(document.createTextNode("Re-Up"));
newSpan.className = "change_state btn btn-success btn-xs";
}
else {
newSpan.appendChild(document.createTextNode("Down"));
newSpan.className = "change_state btn btn-danger btn-xs";
}
actual_row.appendChild(newSpan);
}
cmp += 1;
if (cmp == item.children._data.length)
One_Time = true;
if (One_Time) {
addClickListner(item, i, treeview);
One_Time = false;
cmp = 0;
}
}
function addClickListner(item, i, treeview) {
$(".change_state").click(function (event) {
var name_Promo_Rm = event.target.parentNode.children[1].textContent;
var User_Select = event.view.Parcours.transport.read.data.user_id;
$.ajax({
url: '#Url.Action("ChangeStatutBase", "Users")',
type: 'GET',
dataType: 'json',
data: { Name_Promo: name_Promo_Rm, User_id: User_Select },
});
refreshTree(treeview);
})
}
// Refresh tree
function refreshTree(treeview) {
// Save open items
saveExpandedItems(treeview);
// Reload data source
treeview.dataSource.read();
// Load open items
console.log("OKKKKKKK");
setTimeout(loadExpandedItems(), 600);
}
I've resolved my problem, in the "setTimeout" in the bottom I've placed "()" in the first parameter and it doesn't put the pause and data don't have the time to be loaded.
Have a requirement to call the confirm box in JSP, following is my code in controller,
if(!(nesting)){
bla.add("Do you want to Load anyway?");
context.getFlowScope().put("bla", bla);
context.getFlowScope().put("uldSelector", uldSelector);
return;
}
h = uloService.processDomBatch(histInfo, dl, items);
the above will add the error to flowscope and returns, but, I wantto call a confirm box instead and then depending yes/no, I should continue through...
is there a way to do this?..any help is greatly appreciated!
Thank you!
Yes #user1609085 you can do it with AJAX and JavaScript something like this:
function question(val) {
var chk = document.forms[0].chk
var box = valBox(chk)
var resp = confirm("Do you want to Load anyway?")
if(resp) {
if(box == null) { return }
else {
$.ajax({
type: 'GET',
url: 'controllerMethod?action=controllerMethod',
data: 'uldSelector='+val,
cache: false,
success: function(data) {
alert("histInfo")
},
error: function(data) {
alert('ERROR: ' + data)
}
})
}
}
}
function valBox(b) {
var cnt = -1
for(var i = b.length-1; i > -1; i--) {
if(b[i].checked) {
cnt = i
i = -1
}
}
if(cnt > -1) return b[cnt].value
else return null
}
And you box only put onclick="question(this.value)"
I hope help you :)
function DoInsert(ind) {
var sourceIndex = $("#lstAvailableCode").val();
var targetIndex = $("#lstCodelist").val();
var success = 0;
var rightSelectedIndex = $("#lstCodelist").get(0).selectedIndex;
var functionName = "/Ajax/SaveCodeforInsert";
if (ind == "plan") {
functionName = "/Ajax/SaveCodeforInsertForPlan";
}
$.ajax({
type: "POST",
traditional: true,
url: functionName,
async: false,
data: "ControlPlanNum=" + $("#ddControlPlan").val() + "&LevelNum=" + $("#ddlLevel").val() + "&ColumnNum=" + $("#ddlColumn").val() + "&SourcbaObjectID=" + sourceIndex + "&TargetbaObjectID=" + targetIndex + "&userID=<%=Model.userID%>",
dataType: "json",
error: function (data) {
alert("Error Adding Code");
FinishAjaxLoading();
},
success: function (data) {
if (data == 0) { success = 1; } else { success = data; }
FinishAjaxLoading();
var x = $("#lstAvailableCode").val();
$("#lstCodelist").val(x);
$("#lstCodelist").val(x).css("background-color", "#ffffff");
}
});
Here I am trying to adding one item from lstAvailableCode list box to lstCodelist box. after adding into lstCodelist box I am trying to change the textcolor to yellow or some other color.
on my success message i wrote something like this. But I am not able to change the color of the text even I am not able to change the backgroud color of that list box. is that something I am doing wrong here?
here is my lstCodelist box code.
<select id="lstCodelist" size="17" name="lstCodelist" style="width:100%;height:280px;background-color:#EFEFFB;"></select>
$.fn.fillSelectDD = function (data) {
return this.clearSelectDD().each(function () {
if (this.tagName == 'SELECT') {
var dropdownList = this;
$.each(data, function (index, optionData) {
var option = new Option(optionData.Text, optionData.Value);
if ($.browser.msie) {
dropdownList.add(option);
}
else {
dropdownList.add(option, null);
}
});
}
});
}
$("#lstCodelist").val(x).css("background-color", "#ffffff");
should be
$("#lstCodelist").css("background-color", "#ffffff");
.val() returns a value, not the original jQuery object.
To change the font color, you wold use:
$("#lstCodelist").css("color", "#00ffff");
$("#lstCodelist").val(x).css("background-color", "#ffffff");
should be
$("#lstCodelist").css("background-color", "#ffffff");
Otherwise you're trying to set a css property on whatever string/number the .val() call returns, and NOT on the actual page element that the value's coming from.
Im using javascript SDK to send some invitations to friends, and i neeed to get the friends IDs. this is part of my code:
function RequestFriendship() {
FB.getLoginStatus(function (response) {
if (response.session && response.perms != null && response.perms.indexOf('user_about_me') != -1) {
Request();
}
else {
FB.ui({
method: 'auth.login',
perms: 'user_about_me,publish_stream',
display: 'iframe'
}, function (response3) {
if (response3 != null && response3.perms != null && response3.perms.indexOf('user_about_me') != -1) {
Request();
}
else {
alert('No invitations sent.');
}
});
}
});
and my Request method is:
function Request() {
FB.ui({ method: 'apprequests', message: 'Mensaje Publicidad', data: '', title: 'Titulo publicidad' },
function (response) {
if (response && response.request_ids) {
var ids = response.request_ids;
FB.api("/me/apprequests/?request_ids=" + ids[0], function (response2) {
alert(JSON.stringify(response2, replacer));
});
}
});
}
But every time run it i get an empty data in the FB.api("/me/apprequests/?request_ids=" + ids[0]. I dont know what im doing wrong, i think i worked fine for me some time ago but now it isnt. Is this a permission problem? I think user_about_me is enough to ask for apprequest but not sure anymore. Any help? Thanx
WEll i found the answer myself. Just use this:
if (response && response.request_ids) {
var ids = response.request_ids;
var _batch = [];
for (var i = 0; i < ids.length; i++) {
_batch.push({ "method": "get", "relative_url": ids[i] });
}
if (_batch.length > 0) {
FB.api('/', 'POST', { batch: _batch }, function (res) {
// var obj = eval('(' + res + ')');
for (var j = 0; j < res.length; j++) {
body = res[j].body;
var myObject = eval('(' + body + ')');
friendID = myObject.to.id;
// here you have every friendID
}
});
}
}
:)
You don't actually need to create a batch request. You can use the ids parameter on the root and give it the request_ids value returned from the dialog directly:
FB.api("/?ids=" + response.request_ids, callback);