We Keep Coding

JQuery- is it possible to grab a nested sibling element after an onclick event?

I'm running into a problem with an old web forms app that I am adding some functionality to.
I have a table that is dynamically populated from a database and lives in a DataGrid. I'm attempting to add a drop down carrot that will show a certain section of the table when clicked. The problem is, the ID is set dynamically by the ASCX file/or it is going to not be unique so I am trying to figure out a creative way to grab it and display it.
Is it possible to grab the sibling p with a class name of problemDescription after clicking on P above?
I've tried using combinations of this function but that just returns either nothing, or the .problemdescription from the next row.
function expandDescription(buttonClick) {
//returns the problem description from the next row
$(buttonClick).closest('tr').next().find('.problemDescription')
//does not find anything
$(buttonClick).closest('td').next().find('.problemDescription')
//does not find anything
$(buttonClick).closest('p')
//does not find anything
$(buttonClick).next('p')
//does not find anything
$(buttonClick).closest('.problemDescription')
}
Thanks for any help!

$(buttonClick).closest('tr').find('.problemDescription')

How to prevent select2.js from overriding custom changes?

I am experimenting with select2 by adding custom tags to it.
I do this with this code:
$(".js-example-basic-multiple")
.on("select2:selecting",
function() {
e.params.args.data.text = parentTarget + e.params.args.data.text;
});
I am using the multiple attribute BUT i am using the optgroup elemnt of the select list and it acts as a parentId container where only one element per container can be selected. This is solved but what i can not do is remove "MycustomTag" from previous selected option.
MycustomTag is either
Users
Or
Tank
And when selecting a new option i want to remove the Tank/Users tag on the previous selected option. In my debuging process i found that this is getting overriden in the change event but I can't figure out how to stopp it.
the code is pretty huge so I created a fiddle
How can I remove the tag that I am setting?

After some extensive detective work I found a very simple answer...
$(this).data().data.text = $(this).data().data.text.replace(parentTarget, "");
fiddle has been updated

How to copy/paste in Chrome extensions

I've just started learning to code last week so bear with me. I want to make an extension that does the following.
1)When you right click on a textbox a custom context menu is opened
2)When the context menu item is clicked, the title of that context menu item will be pasted into the text box.
So far I have created all the context menus. I just can't figure out how to copy/paste the title of the context menu item into the text box. I've read about the documents.execcommand but I have no idea how to use it. Thanks.
});
chrome.contextMenus.create({
title:"hi",
onclick:copy,
contexts:["editable"]
});
chrome.contextMenus.create({
title:"bye",
onclick:copy,
contexts:["editable"]
});
function copy(info) {
};

There is an api called document.execCommand() like what you mentioned. Its as simple as the code below:
var copyText = document.execCommand('copy');
Basically it will copy any text selection in the browser. Therefore it is not applicable with what you wanted to achieve.
Lastly, to change the value of any element in a webpage, you must have enough knowledge about content scripts. Basically these are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM).

Rerender Dynamic Elements when using jQuery Plugin Selectize and Bootstrap-Switch

I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers

Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});

jQuery not all tables rows are getting selected

I am working on the enterprise application where I need to remove all the classes of a specific table rows.
I am using following jQuery selector for selecting all the rows
var bodyTable = $(".ui-jqgrid-bdiv table tbody");
var bodyRows = $(bodyTable).find("tr");
The HTML for the div in which table resides is in the following jsFiddle
jsFiddle
In jsFiddle it works as expected and returns all 11 rows but in the application it only selects the first row and the following code returns 1
$(bodyTable).find("tr").length;
I am not able to determine what could be stopping it.
Any pointers why jquery would only select first row?

if you want to execute something on each row ... try this
$(bodyTable).find("tr").each(function(){
//operation on each row
}

Well, It turned out be a case of putting the code in the wrong event.
Our application is event driven application and I was writing the code at initial event when the UI is being displayed.
#shhade slman comment made me look at the other events and after putting the same code in the data rendering event worked as expected. I knew it is something inside the application as the code in jsFiddle was working.
Thanks all for your input that nudged me into the right direction.