We Keep Coding

how to get the value from the particular tab hidden fields values in jquery

I have a tabs that is loaded dynamically. Now i am putting the values in hidden field values.Now i want to get the those values based on each activated tab.But i tried so many ways but it giving undefined.please help me thanks in advance.
$('.maintab').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("data-bprid"); // activated tab
var ref_this = $(".maintab li .active");
// i want to get the processid and branchid for specific tab
var mydiv = ref_this.find( ".response-report .processid" );
console.log(mydiv.find('.processid').val());
});
<ul id="main_tab_list" class="nav nav-tabs nav-justified maintab" role="tablist">
<li role="presentation" class="active"><strong>Extrusion</strong></li>
<li role="presentation" class=""><strong>Web & Warp</strong></li>
</ul>
<div class="tab-content" id="dashboard-tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="EXN">
<div class="response-report"></div>
<input type='hidden' class="processid" name="pros_id" value="1" >
<input type='hidden' class ="branchid" name="brs_id" value="1" >
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="WAW">
<div class="response-report"></div>
<input type='hidden' class="processid" name="pros_id" value="2" >
<input type='hidden' class ="branchid" name="brs_id" value="1" >
</div>

You have a wrong selector to get target div element. You can use href value of anchor element in selected item. Use returned value as ID selector to target div having input element:
var ref_this = $(".maintab li.active");
var targetID = ref_this.find('a').attr('href');
console.log($(targetID).find('.processid').val());

div with class response-report is not inside ref_this block. also input with class processid is not child of response-report. so mydiv in undefined always.
i think this will work for you:
$('.maintab').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("data-bprid"); // activated tab
var ref_this = $(".maintab li.active a");
var div_id = ref_this.attr("aria-controls");
var processid = $("#" + div_id).find(".processid").val();
console.log(processid );
});

avoid duplicated jQuery code?

I am a novice to jquery. I have a section with some items. on click over any item i want to open the modal form, so instead of creating multiple modal forms i created one modal and than using carousel inside it to go through the items.
Now if one clicks the 10th item i want to apply the carousel active class to the 10th item. For now i have given id to all of them and using following code for each item. But that is not a good approach.
I appreciate your help!
Thanks
$('.filtr-item .mod1').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.mod1_item').addClass('active');
});
$('.filtr-item .mod2').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.mod2_item').addClass('active');
});
$('.filtr-item .mod3').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.mod3_item').addClass('active');
});

Use a generic class and add a data-attribute
$('.filtr-item .mod').on('click', function() { // or just $('.filtr-item').on
$('#menuCarousel').find('.active').removeClass('active');
$('.' + $(this).attr("data-mod") + '_item').addClass('active');
});
.active {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="filtr-item"><a class="mod" data-mod="mod1">Activate Mod1</a></li>
<li class="filtr-item"><a class="mod" data-mod="mod2">Activate Mod2</a></li>
<li class="filtr-item"><a class="mod" data-mod="mod3">Activate Mod3</a></li>
</ul>
<hr/>
<div id="menuCarousel">
<div class="mod1_item">Mod1</div>
<div class="mod2_item">Mod2</div>
<div class="mod3_item">Mod3</div>
</div>
For a longer explanation why to use $(this).attr("data-mod") rather than $(this).data("mod"), please see comments and jQuery Data vs Attr?
UPDATE: If you cannot change the html, you will need to interrogate the class
var re = /\bmod(\d+)/; // finds modN
$('.filtr-item a').on('click', function() {
$('#menuCarousel').find('.active').removeClass('active');
var match = this.className.match(re),
num = (match) ? match[1] : "";
if (num) $('.mod' + num + '_item').addClass('active');
});
.active {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="filtr-item"><a class="mod1">Activate Mod1</a></li>
<li class="filtr-item"><a class="mod2">Activate Mod2</a></li>
<li class="filtr-item"><a class="mod3">Activate Mod3</a></li>
</ul>
<hr/>
<div id="menuCarousel">
<div class="mod1_item">Mod1</div>
<div class="mod2_item">Mod2</div>
<div class="mod3_item">Mod3</div>
</div>

If I am not wrong you want to use one function instead of three different function you are using. you can give a custom data field to html eg. data-demo= "mod1".
and use the below code:
$('.filtr-item').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.'+$(this).attr('data-demo')+'_item').addClass('active');
});

JsFiddle
Without Data mode you can try this way.
$('.filtr-item').on('click', function() {
var num = $(this).prop('class').split(' ')[1].split('mod')[1];
$('#menuCarousel').find('.active').removeClass('active');
var cls = ".mod" + num + '_item';
$(cls).addClass('active');
});

How to get data value of a div that has no ID?

Below is part of some code on an html page that lists shopping cart products. Using JavaScript/jQuery, I need to be able to loop through the li items and get the div "data-" values for each. The issue that I am having is that there are no IDs for the div that has the data- value (). I only see the div for "CategoryContent".
<div class="Block CategoryContent Moveable Panel" id="CategoryContent">
<ul class="ProductList ">
<li class="Odd">
<div class="ProductImage QuickView" data-product="577">
<img src="http://cdn3.example.com/products/577/images/1731/2311-.jpg?c=2" alt="Sweater Vest V-Neck Cotton" />
</div>
<div class="ProductDetails">
Sweater Vest V-Neck Cotton
</div>
<em class="p-price">$45.04</em>
<div class="ProductPriceRating">
<span class="Rating Rating0">
<img src="http://cdn3.example.com/templates/custom/images/IcoRating0.png?t=" alt="" style="" />
</span>
</div>
<div class="ProductActionAdd" style="display:;">
Choose Options
</div>
</li>
</ul>
</form>
</div>
So, there is only one li item here, on a typical page, there are up to 9. My goal is to use JavaScript to get the data-product values and then use that to look up a better image thumbnail and have it replaced. So, how do I get the value set for data-product?

Quite easy:
// Loop through all list items of ul.ProductList:
$("ul.ProductList li").each(function (index, element) {
// Find the element with attribute data-product:
$dp = $(element).find("[data-product]");
// Get the value of attribute data-product:
var product = $dp.attr("data-product");
// Now set the high quality thumbnail url:
var url = "/images/hq/" + product + ".png"; // Note that this is just an example
// Here you can use $(element) to access to current li (and the img):
$(element).find('.ProductImage img').attr('src', url);
});

You can use this:
$("#CategoryContent div[data-product]").each(function(){
alert($(this).attr('data-product'));
});

Pure JS:
var divs = document.querySelectorAll('#CategoryContent div[data-product]');
var index = 0, length = divs.length, prodIds = [];
for ( ; index < length; index++) {
prodIds.push(divs[index].getAttribute('data-product'));
}
Fiddle: http://jsfiddle.net/we5q7omg/

You could use the class name to get the data-product
var products = document.getElementsByClassName("ProductImage");
for(var i=0; i<products.length;i++)
{
console.log(products[i].getAttribute("data-product"));
}

Using JQuery, you can get the elements with the data-product attribute by simply calling
$('[data-product]')
// Or if you only want the data-product elements within the UL.
$('ul').find('[data-product]')
From there you can simply do pull the products from the elements. For Example:
var products = $('[data-product]').map(function() {
return $(this).data('product');
});

Replace an object by another object in the same frame in JavaScript?

I have created a list with to options on the homepage (index.html). The problem I am encountering is that when I run the code; if the user clicks on "list_row1" then "table1" shows up (everything works great), and after this if the user clicks on "list_row2" then "table2" shows up 100-200px below table1 (everything does not work great). I want table1 to simply be replaced by table2 and vice-versa in the same spot by the list (list_row1 and list_row2) option the person clicks on.
For example, I want a red circle to be replace by a black circle and vice versa..
Here is my index.html with JavaScript code below:
$(function(){
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="list-group">
<div id = "list_row1">
<li class="list-group-item">Exhaust Temperature</li>
</div>
<div id = "list_row2">
<li class="list-group-item">Cylinder Pressure</li>
</div>
</ul>
</div>
<div id = "table1"></div>
<div id = "table1"></div>

Please check your code. you have two divs with same id
<div id = "table1"></div>
<div id = "table1"></div>

Your id is same for both the tables. this should be your code:-
<div>
<ul class="list-group">
<div id = "list_row1">
<li class="list-group-item">Exhaust Temperature</li>
</div>
<div id = "list_row2">
<li class="list-group-item">Cylinder Pressure</li>
</div>
</ul>
</div>
<div id = "table1">table1</div>
<div id = "table2">table2</div>
<script>
$(function(){
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});
</script>

Here is an example of how you could toggle the two 'table' divs while also improving your markup: http://jsfiddle.net/8fr0484L/3/
Use <a> anchor tags inside your <li> list items instead of attempting to use divs. This will allow you to make use of the anchor tag's default clickable behaviour.
<ul class="list-group">
<li class="list-group-item"><a href='#' id='list_row1'>Exhaust Temperature</a></li>
<li class="list-group-item"><a href='#' id='list_row2'>Cylinder Pressure</a></li>
</ul>
In the code it might be worth hiding the 'table' divs in the beginning (on page load), assuming you don't know at that point what the user wants to view.
// hide the tables by default when page loads
$('#table1').hide();
$('#table2').hide();
$('#list_row1').on('click',function(event){
event.preventDefault(); // halt the anchor tag's default behaviour
$('#table2').hide();
$('#table1').show();
});
$('#list_row2').on('click',function(event){
event.preventDefault(); // halt the anchor tag's default behaviour
$('#table1').hide();
$('#table2').show();
});

<ul class="list-group">
<div id = "list_row1"><li class="list-group-item">Exhaust Temperature</li></div>
<div id = "list_row2"><li class="list-group-item">Cylinder Pressure</li></div>
</ul>
</div>
<div id = "table1">abc</div>
<div id = "table2">pqr</div>
<script>
$(function(){
$('#list_row1').on('click',function(){
$('#table2').css({
visibility : "hidden"
});
$('#table1').css({
visibility : "visible"
});
});
$('#list_row2').on('click',function(){
$('#table1').css({
visibility : "hidden"
});
$('#table2').css({
visibility : "visible"
});
});
});
</script>

Hi its a typo both of your table have same id 'table1'. And also a small suggestion hide both the table divs at the load itself. I'm posting the new JavaScript code below have a look.
$(function(){
$('#table2').hide();
$('#table1').hide();
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});

Getting Id from Div Class Name in Jquery

this is my Html code
<div class="span12" id="test" style="width: 810px;">
<ul class="nav nav-tabs">
<li class="active">New Stream</li>
<li><a id="addspan" href="/#C" data-toggle="tab">+</a></li>
</ul>
<div class="tabbable">
<div class="tab-content" id="tabContent">
<div class="tab-pane active" id="tab1">
#Html.Partial("_NewStreamPartial",Model)
</div>
</div>
</div>
</div>
this my javascript
<script type="text/javascript">
$(function () {
var count = 2;
$('#addspan').click(function () {
var Id = $('.tab-pane active').attr('id');
});
});
</script>
I want to get Div Id whoes class name ".tab-pane active"(means i want to get active Div Id) how i can do this?

You can use dot to join classes in selector
Change
var Id = $('.tab-pane active').attr('id');
To
var Id = $('.tab-pane.active').attr('id');

It should be like this,
var Id = $('.tab-pane.active').attr('id');
You are using Descendant Selector here. but in your dom both classes are in same element. so you have to select by both classes.

You can try this
$('.tab-pane active').click(function () {
var Id = $(this).attr('id');
});
Hope this helps

Try this :
$('#addspan').click(function () {
alert($('.tab-pane .active').attr('id'));
});

You can get any HTML Attribute from an element with jQuery's .attr():
$('.tab-pane.active').attr('id');
Similarly, you can also get the JS Object Property value using .prop():
$('.tab-pane.active').prop('id');

Try the following code
$("#addspan").click(function(){console.log($(this)[0].id);});