We Keep Coding

How to dynamically Set Query Selector attributes

I have a Partial view with Markdown Editor i reference this Partial View in Main view along with the id attribute.
#Html.Partial("_MarkdownEditor", new { id = "executivesummary" })
#Html.Partial("_MarkdownEditor", new { id = "editorsection" })
Here trying to set id attribute dynamically like this..
<div id="#ViewData.Eval("id")">
</div>
This all works fine, My problem is i need to capture and set id dynamically to display the editor... here is the editor code. Here i have hard coded the querySelector with #exectuivesummary. I want to set it dynamically based on the id parameter passed to Partial view, so that i can i have different instances of the editor! How can this be done ?
<script type="text/javascript">
var editor = new tui.Editor({
el: document.querySelector('#executivesummary'),
previewStyle: 'vertical',
height: '300px',
initialEditType: 'wysiwyg'
//hideModeSwitch:true
});
function saveContent(e) {
var content = editor.getValue();
console.log(content)
e.preventDefault();
}

You must want to use a variable in the querySelector.
You can do it like this:
var id = 'executivesummary';
var matched = document.querySelector('#' + id);
console.log(matched);
<div id="executivesummary"></div>
In your case, you may do this: el: document.querySelector('#' + #ViewData.Eval("id"));
Hope it helps.

addclass() working in console but not working in script

I have created a div dynamically. tried to add class as expanded through jquery its not working. But i tried the code in console, its working fine there.
code are follows:
appending element name
var menuId= '#itemMenu' + indexOfElement;
and then tried this
$(menuId).addClass('expanded');
when i tried folllowing in console
e.g. $('#itemMenu5').addClass('expanded')
its working fine..

var menuId= 'itemMenu' + indexOfElement;
var element = document.getElementById(menuId);
element.className += ' expanded'; //note the space

You can add a class to the dynamic DIV using this example:
HTML
<div id="static">I am static</div>
CSS
.expanded {
font-size: 20px;
}
.never-added {
color: red;
}
JQuery
var indexOfElement = 5;
var menuId = '#itemMenu' + indexOfElement;
//store the new DIV in a var
var newDiv = $('<div/>').text('I am dynamic').attr('id', menuId);
newDiv.insertAfter('#static');
//add the class later
newDiv.addClass('expanded');
//never added
$('#itemMenu5').addClass('never-added');
Here is a Demo
Creating a DIV dynamically then tring to apply a class to it using the ID you assigned i.e $('#itemMenu5').addClass('expanded'); won't work as the DOM does not know about the new element yet.
Assigning the new element to a variable will allow you to modify it.
EDIT: I have added an example that shows a class of never-added which never gets aded to the new DIV.

You might try with:
$("#menuId").addClass('expanded'); try directly

How to check if an element with id exists or not in jQuery?

I'm generating a div dynamically and I've to check whether a dynamically generated div exists or not ? How can I do that?
Currently I'm using the following which does not detects the div generated dynamically. It only detects if there is already an element with the id contained in the HTML template.
$(function() {
var $mydiv = $("#liveGraph_id");
if ($mydiv.length){
alert("HHH");
}
});
How can I detect the dynamically generated div?

If mutation observes aren't an option due to their browser compatibility, you'll have to involve the code that's actually inserting the <div> into the document.
One options is to use a custom event as a pub/sub.
$(document).on('document_change', function () {
if (document.getElementById('liveGraph_id')) {
// do what you need here
}
});
// without a snippet to go on, assuming `.load()` for an example
$('#container').load('/path/to/content', function () {
$(this).trigger('document_change');
});

If it is added dinamically, you have to test again. Let's say, a click event
$("#element").click(function()
{
if($("#liveGraph_id").length)
alert("HHH");
});

How you inserting your dynamic generated div?
It works if you do it in following way:
var div = document.createElement('div');
div.id = 'liveGraph_id';
div.innerHTML = "i'm dynamic";
document.getElementsByTagName('body')[0].appendChild(div);
if ($(div).length > 0) {
alert('exists'); //will give alert
}
if ($('#liveGraph_id').length > 0) {
alert('exists'); //will give alert
}
if ($('#liveGraph_id_extra').length > 0) {
alert('exists'); //wont give alert because it doesn't exist.
}
jsfiddle.

Just for interest, you can also use a live collection for this (they are provided as part of the DOM). You can setup a collection of all divs in the page (this can be done in the head even before the body is loaded):
var allDivs = document.getElementsByTagName('div');
Any div with an id is available as a named property of the collection, so you can do:
if (allDivs.someId) {
// div with someId exists
}
If the ID isn't a valid identifier, or it's held in a variable, use square bracket notation. Some play code:
<button onclick="
alert(!!allDivs.newDiv);
">Check for div</button>
<button onclick="
var div = document.createElement('div');
div.id = 'newDiv';
document.body.appendChild(div);
">Add div</button>
Click the Check for div button and you'll get false. Add the div by clicking the Add div button and check again—you'll get true.

is very simple as that
if(document.getElementById("idname")){
//div exists
}
or
if(!document.getElementById("idname")){
// don't exists
}

jquery selection attributes

Let's say I have a sample table like this :
http://jsfiddle.net/65BkH/
Now what i want is, if there is this <button id="invite">Invite</button>. I want this button to select the "invite url" of the selected contact. If you see the jsfiddle, if you click the checkbox, it will crop all the others contacts. How could i do that?
I've tried to target the contact, but i can only get the top contact.
$('#linkedin_match tbody .match .m a').attr('href');
what i want is to target the currently selected.
FURTHER PROBLEM :
This button I'm talking about is not the table per say.
$('#btn_save').click(function(e) {
var hrefVar = $('#linkedin_match tbody .match .m').find('a').attr('href');
alert(hrefVar);
});
Now if i used that, it still searches for the first link, even though i've selected the others. So, any changes?.

You can use this:
$('#invite').on('click',function(){
var url = $this.closest('tr').find('a').prop('href');
});
To get all the checked href related with the checked inputs in a array use this:
$('#invite').on('click', function () {
var all_url = [];
$('input:checked').each(function () {
var url = $(this).closest('tr').find(' td.m a').prop('href');
all_url.push(url);
});
});
Demo here

$('.m').click(function(e){
var hrefVar = $(this).find('a').attr('href');
alert(hrefVar);
});
fiddle

how to get tinyMCE editable for a cloned textarea by cloneNode(true) function

When I try to clone a textarea by using cloneNote(true), the cloned textarea is not editable. Does anyone know how to resolve the problem? The sample codes show as following:
<html>
<head>
<script type="text/javascript" src="/javascripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
});
</script>
<script type="text/javascript">
testclonenode = {
addAbove : function (element) {
var rowEl = element.parentNode.parentNode.parentNode;
var rowElClone = rowEl.cloneNode(true);
rowEl.parentNode.insertBefore(rowElClone, rowEl);
return false;
}
};
</script>
</head>
<body>
<table>
<tr><td>
<textarea name="content" style="width:100%">this is a test </textarea>
<p> <button onclick='return testclonenode.addAbove.call(testclonenode, this);'> Add above </button>
</td></tr>
</table>
</body></html>

It does not work that way. Also, it is impossible to move a tinymce editor using dom manipulation.
The tinymce wiki states the following:
mceAddControl
Converts the specified textarea or div
into an editor instance having the
specified ID.
Example:
tinyMCE.execCommand('mceAddControl',false,'mydiv');
So when you clone a textarea there is another problem: You will have the same id twice which will result in errors accessing the right tinymce instance.

I got this to work by using an ID which is incremented each time my clone function is triggered, so
var insertslideID = 0;
function slideclone() {
$('<div class="slides"><textarea name="newslide['+insertslideID+'][slide_desc]" id="mydiv'+insertslideID+'"></textarea></div>').insertAfter('div.slides:last');
tinyMCE.execCommand('mceAddControl',false,'mydiv'+insertslideID);
insertslideID++;
}
$('input[name=addaslidebtn]').click(slideclone);
Seems to work.

A wee bit tidier, I just use a number for my id - copy1 is the name of my button - I add the new element to the end of my container.
var count = 0;
$("#copy1").click(function(){
var newId = count;
$( "#first" ).clone().appendTo( "#container" ).prop({ id: newId, });
tinyMCE.execCommand('mceAddControl',false,newId);
count++;
});

I ran into a similar problem, except my element IDs (not just textareas) could be anything, and the same ID was always appearing twice. What I did is supposed to be horribly inefficient but there was no noticeable performance loss with dozens of elements on the page.
Basically I removed the TinyMCE ID first (uses jQuery):
$(new_element).find('.mce-content-body').each(function () {
$(this).removeAttr('id');
});
Then I reinitialized TinyMCE for all relevant elements.