We Keep Coding

Javascript InnerHtml not working with razor devexpress

i want to show a combobox from devexpress using innerHtml. but is not working. please help me. thanks...
and this is my javascript :
var divContent = document.createElement("div");
var devexCombo = '##Html.DevExpress().ComboBox(settings => { settings.Name = "DepartmentId"; settings.Width = 300; settings.SelectedIndex = 0;' +
' settings.Properties.DropDownStyle = DevExpress.Web.ASPxEditors.DropDownStyle.DropDownList;' +
' settings.Properties.IncrementalFilteringMode = DevExpress.Web.ASPxEditors.IncrementalFilteringMode.StartsWith;' +
' settings.Properties.TextField = "Text"; settings.Properties.ValueField = "Id"; settings.Properties.ValueType = typeof(int);' +
' settings.Properties.DropDownRows = 10; }).BindList(ViewBag.DepartmentList).Bind(Model.DepartmentId).GetHtml()';
divContent.innerHTML = devexCombo;

Dynamically add accordion elements to the DOM

I am trying to dynamically add accordion elements to my DOM and I cannot seem to add it correctly so that the new element will have it's ID in place, class in place etc...
Here is my code:
function addAccordion(esr){
var elementID = document.getElementById("ThreatMainDiv_" + esr.marking);
var emittersDiv = document.getElementById("Emitters");
if(elementID != null){
return;
}
var marking = esr.marking;
var tmp;
tmp = "\"" + "ThreatMainDiv_" + marking + "\"";
var topDiv = '<div id='+ tmp + ' class="accordionTitle"><h1 style="font-size: 16px"></h1></div>';
var tDiv = document.createElement('div');
tDiv.innerHTML = topDiv;
$('#Emitters').append(tDiv);
};
How can I add it correctly?

Change
$('.accordionTitle').click(function(){});
with
$(document).on('click','.accordionTitle',function(){});

JavaScript not able to replace text with new text

I am trying to convert selected text's font with help of AngularJs and jQuery. This is my code. Everything is working fine but i am not able to change the text with a new text.
This is my code:
var app = angular.module('myApp', []);
app.controller('editor', function($scope) {
$scope.color = "black";
$scope.selectedText = "";
$scope.changeFont = function() {
if ($scope.selectedText != "") {
var changedText = "<span style='font-size:" + $scope.kys_selected_font + "px' >" + $scope.selectedText + "</span>";
alert($scope.selectedText + $scope.kys_selected_font + " " + changedText);
document.getElementById("#content").innerHTML.replace($scope.selectedText, changedText);
} else {
$("#content").append("<span id='one' style='font-size:" + $scope.kys_selected_font + "px' > this is some text </span>");
$("#one").focus();
}
};
$("#content").mouseup(function() {
$scope.selectedText = window.getSelection();
});
});

innerHTML.replace(...) returns a new string, rather than modifying the existing one, so your replacement won't modify the element.
You need to actually update the property:
var el = document.getElementById("content");
el.innerHTML = el.innerHTML.replace($scope.selectedText, changedText);
(also note # removed from element ID as per #IvanSivak's comment)

how to check if a string contains substring and color it in javascript?

I have to create:
1 <input type="text">
1 <textarea>
1 <div>
1 <button>
I have to fill the div with the textarea's content but if the content contains the input's string, I have to color it with <span>.
For example:
If the input contains "is" and the textarea contains "this is a beautiful day", I should put the following text in the div "this is a beautiful day" and color every time that the "is" string appears.
I should use indexOf() and a loop.
I have this:
var a = $("#inp1").val();
var b = $("#txt").val();
var x = b.indexOf(a);
if (x > -1)

If you absolutely have to use indexOf
while(b.indexOf(a) != -1) {
b = b.replace(a, '[X]');
}
while(b.indexOf('[X]') != -1) {
b = b.replace('[X]', '<span style="color:yellow;">' + a + '</span>');
}
$("#targetDiv").html(b);
You can also do this with RegExp
var a = $("#inp1").val();
var b = $("#txt").val();
var re = new RegExp(a, 'g');
var divContent = b.replace(re, '<span style="color:yellow;">' + a + '</span>');
$("#targetDiv").html(divContent);
Here is a fiddle with the indexOf
http://jsfiddle.net/eva3ttuL/1/

Here is the code to find and change color of all searched word
$(document).ready(function () {
$("#here").on("keydown keyup", function () {
var mytext = $(this).val();
var find = $("#find").val();
mytext=mytext.replace(new RegExp(find,"g"), "<span class='me'>"+find+"</span>");
$("#output").html(mytext);
});
})
.me{color: #00f;
background-color: #EFFF00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="find" type="text" /><br/>
<textarea id="here"></textarea><br/>
<div id="output"></div>

Use JavaScript substring to split the string inside textarea and form a paragraph with the highlighted text.
HTML code:
<input id="inp1" type="text"/><br>
<textarea id="txt" col="10" row="5"></textarea><br>
<div id="fillarea">
click on check
</div>
<button id="check">check</button>
CSS for highlighting:
.highlight{
background-color:yellow;
}
jQuery code:
$('#check').on('click',function(){
var a = $("#inp1").val();
var b = $("#txt").val();
var x = b.indexOf(a);
var first = b.substring(0,x);
var middle = b.substring(x,x+a.length);
var last = b.substring(x+a.length,b.length);
var to_print = '<p>' + first + '<span class="highlight">' + middle + '</span> ' + last + '</p>';
$('#fillarea').empty();
$('#fillarea').append(to_print);
});
Demo fiddle here

It helps you jsfiddle
$('.submit').click(function(){
var content = $('.textarea').val();
var ans = content.replace($('.input').val(), "<span style='color:red;'>"+$('.input').val()+"</span>");
$('.text').html(ans);
});

var input = $("#inp1").val();
var text = $("#txt").val();
var div = $("#div");
div.val(text.replace(new RegExp(input,'g'), makeSpan(input)));
function makeSpan(str) {
return '<span style="background-color:red">' + str + '</span>';
}

Just try this
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var a = "is";
var b = "this is beautiful";
var x = b.indexOf(a);
if (x > -1) {
var re = new RegExp(a, 'g');
res = b.replace(re, "<span style='color:red'>"+a+"</span>" );
$("#result").html(res);
}
})
</script>
</head>
<body>
<div id="result"></div>
</body>

You can use IndexOf Javascript function
var str1 = "ABCDEFGHIJK";
var str2 = "DEFG";
if(str1.indexOf(str2) != -1){
alert(str2 + " found");
}

How to delete a selection of textarea

I'm making a a simple texteditor and for that I'm using a function which gets the selected text of a textarea.
My problem is not getting the selected text but when i add some tags to the selected text, for example bold or italic, it appends. So what I want is to delete the selection first before adding it to the textarea.
Here's my code:
<input type="button" id="bold" value="BOLD"/>
<input type="button" id="undo" value="UNDO"/>
<textarea id="message" cols="50" rows="20"></textarea>
var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
var selection = textarea.value.substring(startPos, endPos);
var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
textarea.value += surrounder;
updatePreview();
textarea.focus();
}
document.getElementById('bold').onclick = function () {
edit('b');
};
document.getElementById('undo').onclick = function () {
document.execCommand('undo',false,null);
};
thanks in advance!

I think this works for you:
var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
console.log(startPos);
var selectionBefore = textarea.value.substring(0, startPos);
var selection = textarea.value.substring(startPos, endPos);
var selectionAfter = textarea.value.substring(endPos);
var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
var newText = selectionBefore + surrounder + selectionAfter;
textarea.value = newText;
updatePreview();
textarea.focus();
}
document.getElementById('bold').onclick = function () {
edit('b');
};
document.getElementById('undo').onclick = function () {
document.execCommand('undo',false,null);
};
https://jsfiddle.net/3L659v65/