We Keep Coding

TinyNav.js issue, need element ID

So I downloaded TinyNav.js which helps me with my websites menu and can't figure out how to get the element ID from the "a" tag. I have modified TinyNav.js in one spot here.
The code is right here:
https://github.com/viljamis/TinyNav.js/blob/master/tinynav.js
I need help with line 61.
window.location.href = $(this).val();
I changed this line to
window.location.onClick = (A javascript function call which expects a string)
The string in this case is what I need help on. I need to get the SELECTED items ID, and I can't seem to find a way to do that. The
$(this).val();
returns to me the href of the selected item I clicked on in my menu but again, I want just the selected element's ID. How do I get this value?

The <option> elements are created dynamically in the tinyNav script on line 40:
options += '<option value="' + $(this).attr('href') + '">';
They only have a value attribute, no IDs.
I'm assuming that your ID values are inside you <a> tags, such as:
About
You can grab the IDs and put them into your options like this:
options += '<option value="' + $(this).attr('href') + '" id="' + $(this).attr('id') + '">';
Then you can get the ID inside the change function.
Change this (lines 60-62):
$select.change(function () {
window.location.href = $(this).val();
});
To this:
$select.change(function () {
console.log($(this).find(":selected").attr('id'));
window.location.href = $(this).val();
});
The value of $(this) is the select element that is being changed. Then you can use .find(":selected") to get the selected option element, and finally .attr('id') to get the ID attribute.
Here is a jsfiddle: https://jsfiddle.net/t72wdcwc/41/

window.location.onClick is incorrect. Javscript is case-sensitive and uses onclick, with no camelCase. You can do the following:
window.location.onclick = function() {
yourFunction($(this).attr("id"));
}
function yourFunction(id) {
alert("You clicked " + id);
}

Unable to remove tr in a table using jquery

so I am having a problem in removing a particular tr in table using jquery.
So this is the scenario:
I have a table in which rows where clickable. And when I clicked one of them, I will be able to update the object data associated with that row. However, after updating the object, I want to reflect the changes in the td's of that particular tr.
My solution is, to remove the old tr and replace with the new tr. However, It did not remove the old tr instead just inserted the new tr. So this is my code:
function update_table_after_updating(selected_violator){
violators_table.find('tr').each(function (i, el) {
var tr = ($(this));
var td_text = $(this).find('td:first').text();
if(td_text == selected_violator.violator_id){
console.log(tr);
//I cant remove this row
tr.remove();
return false;
}
});
update_table(selected_violator);
}
The update_table() function
function update_table(violator){
var img_str1 = '<img class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.front_temp_file_path + '\">';
var img_str2 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.rear_temp_file_path + '\">';
var img_str3 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.right_temp_file_path + '\">';
var img_str4 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.left_temp_file_path + '\">';
violators_table.dataTable().fnAddData([
violator.violator_id,
violator.get_full_name(),
'Under Construction',
img_str1 + img_str2 + img_str3 + img_str4,
]);
$('#violators_tbl tbody tr').on('click', function(){
var td = $(this).find('td:first').text();
//returns violator object
selected_violator = get_violator(td);
show_modal('view_violator');
});
}
Thank you very much! Your responses will be greatly appreciated.
PS: I am using jquery DataTables.

Well this is kinda disappointing, I have searched through Jquery Docs then I have find this:
.empty() -> This method removes not only child (and other descendant)
elements, but also any text within the set of matched elements. This
is because, according to the DOM specification, any string of text
within an element is considered a child node of that element. Consider
the following HTML:
Unlike remove(). empty() also removes child nodes of the selected element.
And, voila! The tr has been removed.

Stop additional click events on specific element ID - JQuery

I have a snippet of my jQuery code;
$('#elements').on('click', '.items', function () {
var content, id, tag;
tag = this.tagName;
id = $('#' + this.id);
content = id.html();
switch (tag.substr(0, 1)) {
case "P":
id.html("<textarea id='" + this.id + "In' class='" + tag + "In' type='text'>" + content + "</textarea>");
break;
case "H":
id.html("<input id='" + this.id + "In' class='" + tag + "In' value='" + content + "' >");
break;
}
});
The purpose of this is when I click on a paragraph tag, it will add a text area inside of the paragraph tag (with the content inside it ready for editing). When I click a heading tag, it will create an 'input' tag with the content inside it for editing.
Unfortunately, when i click twice on the paragraph, it adds a text area with the content inside it as it should but on the second click it adds another text area inside of that, now the 'content' of the textarea is: <textarea id="2In" class="PIn" type="text">Paragraph one. and with every click it adds: <textarea id="2In" class="PIn" type="text">
I understand this is happening as it should given the code but I want to stop the click event on that specific ID (this.id) but keep the click event active on the other elements with the class '.items'.
**Additionally: **
I'm sure this is bad practice to approach this by creating the editiable tags inside of the old ones so if anyone has a better approach be sure to let me know.
Many thanks,
Mike

I'd probably solve it by adding a :not(.clicked) to the selector, and adding that class when you add the input. E.g.:
$('#elements').on('click', '.items:not(.clicked)', function () {
$(this).addClass("clicked");
// ...your current handling...
});
But you could solve it by checking for the existence of the field, provided the input or textarea you're adding is the only one the paragraph will have:
$('#elements').on('click', '.items', function () {
if (!$(this).find("input, textarea")[0]) {
// ...your current handling...
}
});
Or actually jQuery extends CSS to provide :has and to allow :not to have more complex contents, so in theory this would work:
$('#elements').on('click', '.items:not(:has(input)):not(:has(textarea))', function () {
// ...your current handling...
});
...but that selector is getting a bit unwieldy...

What about using .one?
By using one, the click event can only be triggered once. Here's an example.
$('#elements > *').one('click', function () {
var content, id, tag;
tag = this.tagName;
id = $('#' + this.id);
content = id.html();
switch (tag.substr(0, 1)) {
case "P":
id.html("<textarea id='" + this.id + "In' class='" + tag + "In' type='text'>" + content + "</textarea>");
break;
case "H":
id.html("<input id='" + this.id + "In' class='" + tag + "In' value='" + content + "' >");
break;
}
});
But it seems you are trying to do something like allowing a user to edit text and saving the new input. I'd advise using a combination of contenteditable and localStorage.

Cannot Select div's after insert via JavaScript / jQuery

I have a descriptions for each layer of a map , being generated via JSON objects. I generate all html for these containers, which contains maps , legends, and descriptions.
html_description += '<div ' + hide + ' id="'+ map_div_id + '_description_' + id + '">' + layer_info.description + '</div>';
// Set the description from the layer info
$('#' + map_div_id + '_description').html(html_description);
Then I want to only show certain descrptions (depending on which layer is showing). So below should work , (as it works in my console debugger) .
// Hide Descriptions
$('#' + map_div_id + '_description div').hide();
$('#' + map_div_id + '_description_' + visible).show();
// Show Proper Description
console.log('#' + map_div_id + '_description_' + visible);
console.log($('#' + map_div_id + '_description_' + visible));
Also the odd thing is I can manipulate the heading contanier :
// THIS WORKS?!
$('#' + map_div_id + '_description').hide();
Any ideas?
http://jsfiddle.net/PazSs/2/

Thanks for the jsFiddle.
I modified it to investigate, and here's my copy:
http://jsfiddle.net/PazSs/8/
I do believe your problem is in your dynamic_layer array. I stepped through the code in jsFiddle and that array has zero elements.
The result is when you call
dynamic_layer[map_div_id].setVisibleLayers(layer_id);
It crashes, as you're dereferencing an undefined result (null).
I see you're populating the dynamic_layer further above:
if (typeof geo_server != 'undefined' && geo_server != null) {
gp_server = gis_server + '/' + geo_server;
gp = new esri.tasks.Geoprocessor(gp_server);
} else {
// Adds a dynamic layer
dynamic_layer[map_div_id] = new esri.layers.ArcGISDynamicMapServiceLayer(full_map_server);
map[map_div_id].addLayers([dynamic_layer[map_div_id]]);
}
This seems to be the only place you stuff objects into the dynamic_layer array, so I'd start there. Check out your logic and ensure that you always put the layer in when required.
Let me know if it works!

that selector:
$('#' + map_div_id + '_description div')
would look for a div inside your description div.
assumed the value of 'map_div_id' is 'test' your markup after insert should look like this:
<div id="test_description">
<div> ...your description here </div>
</div>
when i see how your build your html_descriptions string, it does not look like it is doing that... (it only would be like that if 'layer_info.description' would contain '...'
thats a lot of assuming, it's probably easier you show us some generated markup, and complete script. use jsfiddle

I can see your logic:
HIDE ALL layer descriptions
and then SHOW only the layers you want to see
What does "visible" mean? Is that an id? The name implies a boolean.
If it's a boolean, your selector
$('#' + map_div_id + '_description_' + visible).show();
doesn't look like it'll work properly.
Can you describe what visible is a bit more, please, and give examples of the actual markup?
Thanks.

using replaceWith on all child inputs JQuery

Basically on .show() I've been trying to have all of the inputs convert to image tags with the img src equaling the original inputs value like this:
var currentPage = $('.three_paj_els:visible');
var nextPage = currentPage.next('.three_paj_els');
var the_parent_div_id = currentPage.attr('id');
nextPage.show(function() {
$('div#' + the_parent_div_id + ':input').each(function() {
var the_image_SRC = $(this).val();
$(this).replaceWith('<img src="' + the_image_SRC + '" ')
})
})
Been at it for a few hours now. I want only the ones in that specific div that gets shown to convert.
here's a fiddle of what I've been working on http://jsfiddle.net/Utr6v/100/
when you click the next button, the <input type="hidden" /> tags should convert to <img> tags and the images should show.
Thanks a bunch in advance.
-Sal

currentPage doesn't seem to have an ID. But you're overcomplicating it - if you have the element, you can use that to execute jQuery functions on. You don't need to do an element -> ID -> element conversion since that's pointless.
To find descendants you need to put a space between the element selector and the descendant selector, otherwise the selector applies to the elements themselves. In your case, you can just use .find.
Also, you were missing the closing tag of the image.
http://jsfiddle.net/Utr6v/101/
// I guess you want to replace with images on the new page, not the one
// which gets hidden
nextPage.find(':input').each(function() {
var the_image_SRC = $(this).val();
$(this).replaceWith('<img src="' + the_image_SRC + '">')
});