When I edit panels name I want to update div content, that will have tab-pane name.
I tried to get the value and change it "onchange", but
I think I did something incorrectly.
http://jsfiddle.net/agata666/5zLmtqby/139/
var $foo = $(".tab-pane");
var $newPanelDefault = $foo.clone();
var hash = 1;
$(".add").on("click", function() {
var $newPanel = $newPanelDefault.clone();
var hashClass = 'zone-panel-' + generateHash();
$newPanel.find(".panel").data('hash', hashClass).attr("href", "#" + (++hash)).text("Zone " + hash);
$newPanel.attr("id", "tab" + hashClass);
var nextTab = $('.tabs li').size()+1;
$('<li class="' + hashClass + '">Zone ' + hash + ' <i class="fas fa-pencil-alt pencil"></i></li>').appendTo('.tabs');
$($newPanel).appendTo('.tab-content');
$(".pencil").click(function() {
$(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
});
});
var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');
function generateHash() {
return Math.random().toString(16).substr(-5);
}
addZoneButton.addEventListener('click', function () {
var randomNumber = generateHash();
panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});
$(".pencil").click(function() {
$(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
});
Could you help me?
I am trying to use dynamically created IDs in javascript function, but it's not working. I thought that prepending # to string id should work, but it's not.
Code:
var IterateCheckedDatesAndUncheckWithSameValue = function (elementNumber) {
idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber.toString();
if ($("'#" + idCheckBoxToCompare + "'").prop('checked') === false) {
return;
}
textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber.toString();
textBoxValue = $("'#" + textBoxID + "'").val();
for (i = 1; i < 8; i++) {
if (i !== elementNumber) {
idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i.toString();
idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i.toString();
inputBoxValue = $("'#" + idInputBox + "'").val();
if ($("'#" + idCheckBox + "'").prop('checked') === true) {
if (inputBoxValue === textBoxValue) {
$("'#" + idCheckBox + "'").prop('checked', false);
}
}
}
}
}
I've tried to build same id as this is:
'#testid'
so usage would be:
$('#testid')
But it's not working. How to use properly dynamically created IDs?
Your code is look complicated with too many " and '. Also Javascript can concat string and number by just use +. No need to convert it to string first. So, I updated it to make it more readable.
Try this
var IterateCheckedDatesAndUncheckWithSameValue = function(elementNumber) {
idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber;
if ($('#' + idCheckBoxToCompare).prop('checked') === false) {
return;
}
textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber;
textBoxValue = $('#' + textBoxID).val();
for (i = 1; i < 8; i++) {
if (i !== elementNumber) {
idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i;
idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i;
inputBoxValue = $('#' + idInputBox).val();
if ($('#' + idCheckBox).prop('checked') === true) {
if (inputBoxValue === textBoxValue) {
$('#' + idCheckBox).prop('checked', false);
}
}
console.log('#' + idCheckBox); //print here just to see the id results
}
}
}
ID in html can be only one element per page. So please make sure that the ID you generate from this method not match with other.
Jquery selector can read String variable.
So you can just do var id = "#test". Then put it like this $(id).
Or
var id = "test"; then $("#"+test).
Use this,
var IterateCheckedDatesAndUncheckWithSameValue = function (elementNumber) {
idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber.toString();
if ($("#" + idCheckBoxToCompare).prop('checked') === false) {
return;
}
textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber.toString();
textBoxValue = $("#" + textBoxID).val();
for (i = 1; i < 8; i++) {
if (i !== elementNumber) {
idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i.toString();
idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i.toString();
inputBoxValue = $("#" + idInputBox).val();
if ($("#" + idCheckBox).prop('checked') === true) {
if (inputBoxValue === textBoxValue) {
$("#" + idCheckBox).prop('checked', false);
}
}
}
}
}
I face the same problem using Jquery .Try $(document).getElementbyId('myid'). Hope help.
Edit
Change :
$("#" + idCheckBoxToCompare) by $(document).getElementbyId(idCheckBoxToCompare)
Alright, so i have textbox where I enter grades, and then they're saved in localstorage and i can see them under my textbox. But if I want to add more text boxes in which i can add more grades, and they will be saved in localstorage but they will be in another array or something how i can do that? I will be grateful for any help.
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var gradeID = "grade-" + i;
$('#gradeList').append("<b id='" + gradeID + "'>" + localStorage.getItem(gradeID) + "</b>, ");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#gradeEntryForm').submit(function () {
if ($('#gradeInput').val() !== "") {
var gradeID = "grade-" + i;
var gradeMessage = $('#gradeInput').val();
localStorage.setItem(gradeID, gradeMessage);
$('#gradeList').append("<b class='task' id='" + gradeID + "'>" + gradeMessage + "</b>, ");
var grade = $('#' + gradeID);
task.slideDown();
$('#gradeInput').val("");
i++;
}
return false;
});
$('#gradeList').on("click", "b", function (event) {
self = $(this);
gradeID = self.attr('id');
localStorage.removeItem(gradeID);
self.remove();
});
});
DEMO
You can set dynamic id to your LocalStorage keys which you can relate to your generated TextBoxes
Something like below
localStorage['grade_' + some_id] = value;
You could use the following example:
document.getElementById("addGrade").onclick = function() {
var gradeCell = document.getElementById("gradeCell");
var input = document.createElement("input");
input.type = "number";
var br = document.createElement("br");
gradeCell.appendChild(input);
gradeCell.appendChild(br);
}
EXAMPLE
I have been following an online tutorial to autocomplete textboxes with database values after the user enters a code greater than 7 characters. I have completed most of what I am trying to achieve however I cannot seem to select a value from the combobox to autocomplete the textbox.
I dont have much javascript experience but I am hoping the problem is something small in what I already have, can someone please recommend the change I need to make to select the value from the combobox.
public ActionResult MultiColumnComboBox(string SearchFor, string ControlId)
{
ViewBag.ProcId = SearchFor.Trim();
ViewBag.ControlBlockId = "block" + ControlId.Trim();
ViewBag.ControlId = ControlId.Trim();
ViewBag.ControlTxtId = "txt" + ControlId.Trim();
return View();
}
public JsonResult LoadComboData(string strSearch, string SearchFor)
{
efacsdbEntities db = new efacsdbEntities();
strSearch = strSearch.Trim();
if (SearchFor.Trim() == "employee" && strSearch.Length>7)
{
var res = (from E in db.allpartmasters
where E.partnum.ToLower().Contains(strSearch.ToLower()) || E.partdesc.ToLower().Contains(strSearch.ToLower())
select new
{
E.partnum,
E.partdesc
}).ToList();
return Json(res, JsonRequestBehavior.AllowGet);
}
return Json(null, JsonRequestBehavior.AllowGet);
}
<input type="hidden" id="#ViewBag.ProcId" name="#ViewBag.ProcId" value="" />
<input type="hidden" id="#ViewBag.ControlId" name="#ViewBag.ControlId" value="" />
<input type="text" name="#ViewBag.ControlTxtId" id="#ViewBag.ControlTxtId" autocomplete="on" />
<div class="#ViewBag.ControlTxtId renderpart">
<div class="DataBlock">
<div id="#ViewBag.ControlBlockId" style="max-width: 520px;">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../Scripts/json.debug.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".renderpart").hide();
var txtid = "#" + '#ViewBag.ControlTxtId';
var renderpart = "." + '#ViewBag.ControlTxtId';
var selectlinkvalueid = ".Get" + '#ViewBag.ProcId';
$(selectlinkvalueid).on("click", function () {
var value = $(this).attr('id');
var valueText = $(this).attr('title');
$("##ViewBag.ControlId").val(value);
$(txtid).val(valueText);
$(renderpart).slideUp("slow");
});
$(txtid).keyup(function () {
var value = $(txtid).val();
var Procvalue = '#ViewBag.ProcId';
var controlid = "#" + '#ViewBag.ControlBlockId';
value = encodeURI(value);
if (value.length > 2) {
$.ajaxSetup({ cache: false });
$.getJSON("/Test/LoadComboData", { strSearch: " " + value, SearchFor: " " + Procvalue }, function (data) {
$(controlid).html("");
var activecols = $("#hdnActiveColumns").val();
var htmlrow = "";
var tempprocId = '#ViewBag.ProcId';
var jsondata = JSON.stringify(data);
$(controlid).html(CreateDynamicTable(jsondata, tempprocId));
$(renderpart).slideDown("slow");
});
$.ajaxSetup({ cache: true });
}
else {
$(renderpart).slideUp("slow");
}
});
$(txtid).focusin(function () {
var txtid = "#" + '#ViewBag.ControlTxtId';
var value = $(txtid).val();
var Procvalue = '#ViewBag.ProcId';
var controlid = "#" + '#ViewBag.ControlBlockId';
value = encodeURI(value);
if (value.length > 2) {
$.ajaxSetup({ cache: false });
$.getJSON("/Test/LoadComboData", { strSearch: " " + value, SearchFor: " " + Procvalue }, function (data) {
$(controlid).html("");
var htmlrow = "";
var tempprocId = '#ViewBag.ProcId';
var jsondata = JSON.stringify(data);
$(controlid).html(CreateDynamicTable(jsondata, tempprocId));
$(renderpart).slideDown("slow");
});
$.ajaxSetup({ cache: true });
}
else {
$(renderpart).slideUp("slow");
}
});
function CreateDynamicTable(objArray, tempprocId) {
var array = JSON.parse(objArray);
var str = '<table style="width:100%;">';
str += '<tr>';
for (var index in array[0]) {
str += '<th scope="col">' + index + '</th>';
}
str += '</tr>';
str += '<tbody>';
var flag = false;
var ids;
for (var i = 0; i < array.length; i++) {
str += (i % 2 == 0) ? '<tr>' : '<tr>';
for (var index in array[i]) {
if (flag == false) {
ids = array[i][index];
flag = true;
}
str += '<td><a id="' + ids + '" class="Get' + tempprocId + '" title="' + array[i][index] + '" href="#">' + array[i][index] + '</a></td>';
}
str += '</tr>';
}
str += '</tbody>';
str += '</table>';
return str;
}
});
$(document).click(function (evt) {
var renderpart = "." + '#ViewBag.ControlTxtId';
var theElem = (evt.srcElement) ? evt.srcElement : evt.target;
if (theElem.id == "main" || theElem.id == "sub1") {
$(renderpart).slideUp("fast");
}
});
</script>
Here is the link to the tutorial I was following as well.
Create Multiple column autocomplete combobox
I have created a Check box JQuery Plugin, but when i want to get the value of the check box when selected the check box value always returns false. I have taken out the plugin and used the check box in a raw state but still returns false when check box is selected.
JAVASCRIPT
function DialogWindowDragMediaItems(userPageType, imageParams, idParams) {
idParams = idParams.replace(/~/g, "|")
var divBGContainer = $("<div/>");
var lengthVideos = imageParams.split("~").length - 1;
var divInfoText1 = $("<div/>"); ;
$(divBGContainer).append(divInfoText1);
$(divInfoText1).text("What would you like to do with the videos selected?");
$(divInfoText1).attr("class", "videosselecteddraginfo");
var checkBox1 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox1);
$(checkBox1).genCheckBox({ name: 'copymedia', text: 'Move and Copy', checked: true });
$(checkBox1).attr("id", "copymediamoveandcopy");
var checkBox2 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox2);
$(checkBox2).genCheckBox({ name: 'copymedia', text: 'Move and Delete' });
var buttonMove = GetDialogWindowButton("Move Items", "DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID'); WebForm_DoCallback('MainPageControl1','dragmediatomedia~" + userPageType + "~" + idParams + "~' + $('#copymediamoveandcopy').is(':checked'),null,null,null,true)");
CreateGenericWindowDialog($(divBGContainer), "DialogWindowDragMediaItemsAddID", 500, "images/mainpage/dialogwindow/titleimageaddmedia.png", "Move Items", "Cancel", buttonMove, true);
}
function CreateGenericWindowDialog(content, id, width, imageUrl, title, buttonText, button, destroyAndHideTransparent) {
var divContainer = $("<div/>");
$("body").append(divContainer);
$(divContainer).attr("class", "divaddvideomediacontrolcontainer");
$(divContainer).attr("id", id);
var divInnerContainer = $("<div/>");
$(divContainer).append(divInnerContainer);
$(divInnerContainer).attr("class", "divaddvideomediainnercontrolcontainer");
$(divInnerContainer).css("width", width + "px");
var divTopLeftCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopLeftCornerContainer);
$(divTopLeftCornerContainer).attr("class", "divgenericwindowtopleftcorner");
var divTopCenterCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopCenterCornerContainer);
$(divTopCenterCornerContainer).attr("class", "divcentergenericwindow");
$(divTopCenterCornerContainer).css("width", width - 16 + "px");
var divTopRightCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopRightCornerContainer);
$(divTopRightCornerContainer).attr("class", "divgenericwindowtoprightcorner");
var imageTitle = $("<img/>");
$(divTopCenterCornerContainer).append(imageTitle);
$(imageTitle).attr("class", "imagetitledialogwindow");
$(imageTitle).attr("src", imageUrl);
var divTitleContainer = $("<div/>");
$(divTopCenterCornerContainer).append(divTitleContainer);
$(divTitleContainer).attr("class", "divgenericwindowtitlecontainer");
$(divTitleContainer).text(title);
var divControlsContainer = $("<div/>");
$(divInnerContainer).append(divControlsContainer);
$(divControlsContainer).attr("class", "divgenericwindowcontrolscontainer");
$(divControlsContainer).css("width", width - 6 + "px");
$(divControlsContainer).append($(content));
var divBottomLeftCornerContainer = $("<div/>");
$(divInnerContainer).append(divBottomLeftCornerContainer);
$(divBottomLeftCornerContainer).attr("class", "divgenericwindowbottomleftcorner");
var divBottomCenterContainer = $("<div/>");
$(divInnerContainer).append(divBottomCenterContainer);
$(divBottomCenterContainer).attr("class", "divbottomcentergenericwindow");
$(divBottomCenterContainer).css("width", width - 16 + "px");
var divBottomRightCornerContainer = $("<div/>");
$(divInnerContainer).append(divBottomRightCornerContainer);
$(divBottomRightCornerContainer).attr("class", "divgenericwindowbottomrightcorner");
if (destroyAndHideTransparent) {
$(divBottomCenterContainer).append(GetDialogWindowButton(buttonText, "DestroyDialogWindowHideTransparent('" + id + "')"));
}
else {
$(divBottomCenterContainer).append(GetDialogWindowButton(buttonText, "DestroyDialogWindow('" + id + "')"));
}
if (button != null && button.length > 0) {
$(divBottomCenterContainer).append(button);
}
CenterGenericControl(id);
$(divContainer).show();
}
function GetDialogWindowButton(text, linkCall) {
var linkCancel = $("<a/>");
$(linkCancel).attr("class", "linkgenericdialogbutton");
$(linkCancel).attr("href", "javascript:" + linkCall);
$(linkCancel).css("marginTop", 14 + "px");
$(linkCancel).css("marginRight", 10 + "px");
var divCancel = $("<div/>");
$(linkCancel).append(divCancel);
$(divCancel).attr("class", "divlinkaddmediaurlbuttontext");
$(divCancel).text(text);
return linkCancel;
}
JQUERY CHECKBOX PLUGIN
(function($) {
$.fn.genCheckBox = function(settings) {
var def = {
height: 15,
width: 15
};
settings = $.extend(def, settings)
$(this).attr("name", settings.name);
$(this).css("display", "none");
$(this).prop("checked", settings.checked);
var divContainer = $("<div style='clear:left;float:left;padding:10px;'/>");
$(divContainer).insertAfter(this);
var span = $("<span class='checkbox' style='float:left'/>");
if (settings.checked) {
$(span).css("background-position", "0px 17px");
}
else {
$(span).css("background-position", "0px 0px");
}
$(divContainer).append(span);
//$(span).attr("name", settings.name);
var div = $("<div style='float:left;margin-left:10px;disply:block'/>");
$(div).insertAfter(span);
$(div).text(settings.text);
$(span).click(function() {
var position = $(this).css("background-position");
if (position == '0px 0px') {
$(".checkbox").css("background-position", "0px 0px");
var el = document.getElementsByName(settings.name);
for (var i = 0; i < el.length; i++) {
var input = el[i];
$(input).prop("checked", false);
}
$(this).css("background-position", "0px 17px");
var checkBox = $($(this).parent()).prev();
$(checkBox).prop("checked", true);
}
});
}
})(jQuery);
I split the code up from the button click event and then i could retrieve the value from the check box. Weird i still don't understand why it shouldn't work first time.
function DialogWindowDragMediaItems(userPageType, imageParams, idParams) {
idParams = idParams.replace(/~/g, "|")
var divBGContainer = $("<div/>");
var lengthVideos = imageParams.split("~").length - 1;
var divInfoText1 = $("<div/>"); ;
$(divBGContainer).append(divInfoText1);
$(divInfoText1).text("What would you like to do with the videos selected?");
$(divInfoText1).attr("class", "videosselecteddraginfo");
var checkBox1 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox1);
$(checkBox1).genCheckBox({ name: 'copymedia', text: 'Move and Copy', checked: true, id: 'copymediamoveandcopy' });
var checkBox2 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox2);
$(checkBox2).genCheckBox({ name: 'copymedia', text: 'Move and Delete' });
var buttonMove = GetDialogWindowButton("Move Items", "");
CreateGenericWindowDialog($(divBGContainer), "DialogWindowDragMediaItemsAddID", 500, "images/mainpage/dialogwindow/titleimageaddmedia.png", "Move Items", "Cancel", $(buttonMove), true);
//$(buttonMove).attr("href", "javascript:DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID'); WebForm_DoCallback('MainPageControl1','dragmediatomedia~" + userPageType + "~" + idParams + "~' + $('#copymediamoveandcopy').is('checked'),null,null,null,true)");
$(buttonMove).attr("href", "javascript:MoveItemsClick('" + userPageType + "','" + idParams + "')");
}
function MoveItemsClick(userPageType, idParams) {
var booleanValue = $('#copymediamoveandcopy')[0].checked;
DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID');
WebForm_DoCallback('MainPageControl1', 'dragmediatomedia~' + userPageType + '~' + idParams + '~' + booleanValue, null, null, null, true);
}