From the above image currently 1st View Details is clicked so it is showing as Hide Details.
if i click on 3 rd View Details all 1st one or(Active one) has to be relaced to view details how can i do that..?
Here what i have tried:
Hide Details:
$("#tbodyid" ).on( "click", ".hide-details", function() {
$("#participantsForGd").hide();
var field = $(this);
field.text("View Details");
field.addClass("view-details");
field.removeClass("hide-details");
});
View-datails
$("#tbodyid" ).on( "click", ".view-details", function() {
$("#participantsForGd").show();
var field = $(this);
field.text("Hide Details");
field.addClass("hide-details");
field.removeClass("view-details");
});
My html:
<?php while($grpData = $grpQuery->fetch_assoc()){ ?>
<tr>
<td>
<span id="<?php echo $grpData['group_id'];?>" class="view-details">View Details</span>
</td>
</tr>
<?php } ?>
This one has to work like toggle:
<form id="participantsForGd" >BLAH BLAH </form>
Your html structure is not good to do this task easily. I am showing how you perform this task. Then you can modify as your need.
HTML:
<button class='details-btn hide-details'>Hide Details</button>
<button class='details-btn view-details'>View Details</button>
<button class='details-btn view-details'>View Details</button>
<button class='details-btn view-details'>View Details</button>
JQuery:
$('.details-btn').click(function(){
$('.details-btn').each(function(){
$(this).removeClass('hide-details').addClass('view-details').text('View Details');
});
$(this).removeClass('view-details').addClass('hide-details').text('Hide Details');
})
I think your php code will generate dom structure as below:
<table>
<tbody id="tbodyid">
<tr>
<td id="group-id-1" class="details view-details">View Details</td>
<td id="group-id-2" class="details view-details">View Details</td>
<td id="group-id-3" class="details view-details">View Details</td>
<td id="group-id-4" class="details view-details">View Details</td>
</tr>
</tbody>
</table>
And you have four divs which contains details for each button.
<div id="participantsForGd-1" class="participantsForGd"></div>
<div id="participantsForGd-2" class="participantsForGd"></div>
<div id="participantsForGd-3" class="participantsForGd"></div>
<div id="participantsForGd-4" class="participantsForGd"></div>
My solution is :
$('#tbodyid').on('click', '.details', function(){
$('.details').each(function(){
$(this).removeClass('hide-details').addClass('view-details').text('View Details');
});
$('.participantsForGd').each(function(){
$(this).hide();
});
$(this).removeClass('view-details').addClass('hide-details').text('Hide Details');
$('#participantsForGd-' + $(this).attr('id').split('-')[2]).show();
})
Related
I have below code in which Jquery function is called
<script>
function FocusContent(event) {
event.preventDefault();
console.log('Fire here');
setTimeout(function () { $('.cSSFirst').focus() }, 0);
}
</script>
I have the link in the page as
Skip To main content
The problem is that when I press tab on this a link and when i click on the link it works fine. Now when i click on elsewhere in the page, and when I again click on this link, the focus does not set.
Can someone help please ?
Below is the complete code
<body>
<form id="form1" runat="server">
<div>
Skip To main content
GoogleMicrosoftDeloitte
<br />
<a href="http://www.wikipedia.org">
<input type="text" value =" Some text " />
</a>
<table id ="table1" border="1">
<tr>
<td>
One
</td>
</tr>
<tr id="Two">
<td>
Two
</td>
</tr>
<tr>
<td>
Three
</td>
</tr>
<tr>
<td>
Four
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script>
function FocusContent(event) {
event.preventDefault();
console.log('Fire here');
if (event.which == 1) {
$('.cSSFirst').focus();
}
}
</script>
onmousedown="FocusContent(event); solved my issue.
My code is to create search suggestions after triggering the 'keyup' event, hence creating dynamic elements with a class "suggestion-box". On clicking any of "suggestion-box" classes, new dynamic elements, each with parent class "transaction-entry", are created. Each of the dynamically created "transaction-entry" classes has child class 'quantityInput' which is an input element. The major problem is this, each of the 'quantityInput' classes display their corresponding input values when delegated to a static element through the 'keyup' event trigger but not their corresponding indexes (displays only 0).
HTML CODE
<div class="col-sm-1">
<button type="button" id="delete-transact" class="btn btn-default" data-toggle="tooltip" title="Delete All Entries" data-placement="right">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<!-- Input field for search suggestion -->
<form method="POST" action="{{URL::to('/search/transaction')}}" id="transAction">
{{ csrf_field() }}
<div class="col-sm-12">
<div class="form-group">
<input type="text" name="searchItem" id="transProductSearch" class="form-control" value="" title=""
placeholder="Search product">
<!--Container for dynamically created class "suggestion-box"-->
<div id="suggestion-container"></div>
</div>
</div>
</form>
<div class="cover">
<div class="table-responsive">
<form action="" method="">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity purchased</th>
<th>Quantity Available</th>
<th>Price</th>
</tr>
</thead>
<!--Container for dynamically created class "transaction entry"-->
<tbody id="transaction-body">
</tbody>
<tfoot>
<tr class="tfoot">
<td>Total</td>
<td class="transactionTotal"></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
JQUERY CODE
$('#transProductSearch').on('keyup',function (e) { //Event listener for ajax request
e.preventDefault();
if($(this).val() !== ""){
$.ajax({
type: "POST",
url: $('#transAction').attr('action'),
data: $('#transAction').serialize(),
success: function (response) {
$(".suggestion-box").remove();//Removing every dynamically created "suggestion-box" class on every successful AJAX request;
pEntities = [];
response = jQuery.parseJSON(response);
$.each(response, function (indexInArray, value) {
$("#suggestion-container").append($('<div>',{class:"suggestion-box", text:value.productName}));
pEntities[indexInArray] = {prodQuantity:"",prodId:"",prodPrice:"",prodName:""};
pEntities[indexInArray].prodQuantity = value.quantity;
pEntities[indexInArray].prodId = value.id;
pEntities[indexInArray].prodPrice = value.price;
pEntities[indexInArray].prodName = value.productName;
});
},
error: function () {
console.log($('#transAction').val());
}
});
}
else{
$('.suggestion-box').remove()//Removing every suggestion box if input field is empty
}
});
$('#suggestion-container').on("click",'.suggestion-box', function (e) { // Event delegation to append new "transaction-entry" class
var index = $(this).index();
$('#transaction-body').append('<tr class="transaction-entry"><input hidden class="prodId" value="'+pEntities[index].id+'"/><td>'+pEntities[index].prodName+'</td><td><input class="quantityInput" style="color:black" type="number"></td><td>'+pEntities[index].prodQuantity +'</td><td class="productPrice">'+pEntities[index].prodPrice +'</td></tr>');
$('.suggestion-box').remove();
})
$('#delete-transact').click(function (e) {//Event listener to remove all transaction entry classes
e.preventDefault();
$('#transaction-body').empty();
})
$('#transaction-body').on("keyup",'.quantityInput',function (e) {//Event Delegation to output quantityInput value and index
console.log($(this).val()+" "+$(this).index());
});
How do i select those tr's which all DONT have the example.png in one of their td's? Every image has an anchor, so i thought i may select by that...
i never worked with jquery before and its quite confusing^^
$(document).ready(function(){
$("td > a").parent().parent().css("background-color","lime");
});
Here one of my tr's but with only the first anchor/image (it is already too long):
<tr bgcolor='$color'>
<td><a href='request.php?id=$requestid'>#$requestid [show request]</a></td>
<td>$generation </td>
<td>$custname </td>
<td>$platform </td>
<td>$phase </td>
<td>$tmc </td>
<td>$pcstroke </td>
<td>$scstroke </td>
<td>
<a href='myurl.php?selection=" . $flowid."' title='new'>
<img align='center' src='images/new.png'
alt='' style='width:20px; height:20px;' />
</a>
</td>
$status
<td><b>$prelease</b></td>
</tr>;
Thanks in advance.
You can use not and has
var allTrs = $("tbody tr"),
nonExample = allTrs.not(':has(img[src*="example.jpg"])');
nonExample.css("background-color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>foo</td><td><img src="foo.jpg" alt="foo"/></td></tr>
<tr><td>example</td><td><img src="example.jpg" alt="example"/></td></tr>
<tr><td>bar</td><td><img src="bar.jpg" alt="bar"/></td></tr>
<tr><td>example</td><td><img src="example.jpg" alt="example"/></td></tr>
</tbody>
</table>
Select table's existing img, and then parent 3 times, as they are expected to be located within anchors tr>td>a>img:
$(document).ready(function(){
$images = $('table tr>td>a>img'); // Choose the right table selector
$rows = $images.closest('tr');
console.log($rows);
});
I have a table as below and am trying to open a pop-up window with the link '/ledesInvoiceErrors.do?InvoiceId='+parentInstanceId' when user clicks on Invoice number columns of table (INV1 and INV2) instead of going to the hyper link associated with invoice number fields.
http://jsfiddle.net/pmgguwob/3/
<div class="listTable expanded">
<table class="searchResults {id:321}">
<thead>
<tr class="tipAdded">
<th class="first unsortable ui-state-default ui-state-hover ui-state-active"></th>
<th data-name="Invoice Number" class="typeString ui-state-default ui-state-hover sort asc ui-state-active" id="sort_invoiceNumber">
Invoice Number
</th>
<th data-name="Invoice Total" class="typeMoney last ui-state-default ui-state-hover ui-state-active sort" id="sort_invoiceTotal">
Invoice Total
</th>
</tr>
</thead>
<tbody class="">
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV1
</div>
<input value="65" name="invoices0.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=51;parentFieldName=invoices">
INV1
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
15.25 USD
</div>
</td>
</tr>
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV2
</div>
<input value="66" name="invoices1.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=55;parentFieldName=invoices">
INV2
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
111.25 USD
</div>
</td>
</tr>
</tbody>
</table>
Am a very beginner of jQuery and I dont really know how to achieve this. Could anyone please me with this?
Note: I dont have liberty of modifying the hyperlinks associated with Invoice number fields since these links are generated from our internal framework. but I can embed jquery script on my page to override the hyperlinks
SOLUTION UPDATED
http://jsfiddle.net/pmgguwob/10/
To override your hyperlink's behaviour, you can do something along the lines of:
$(function(){
// you may have to narrow down the selector here to a specific class or 'td'
$(".searchResults a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
window.open(url, 'window name', 'window settings');
return false;
});
});
Updated Fiddle
In this case, something like this (fiddle):
$("a").click(function (e) {
e.preventDefault();
var mills = (new Date).getTime();
window.open($(this).attr("href"), mills);
//$("body").append("#" + $(this).attr("href") + "#");
});
I'm using mills to give each window a new handle, so you don't reuse a window and potentially confuse your user by reloading a window that's hidden from them. The last line is just to show the URL it's using for testing; you might want to massage that value a little, but I believe it's right as is.
I know window.open isn't new and cool, but its options let you control the new window's appearance with likely enough granularity. You could jQuery that up instead if you wanted.
I would like to have the text after the "Question:" and "Answer:" change into text input upon clicking the Edit_Question button. I don't know a good way to make this work. Here is the code I have:
<script type="text/javascript">
<!--
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
})
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>
</ul>
Just disable/enable the textbox and style the disabled version:
HTML:
<button id="edit">Edit</button>
<input id="myinput" type="text" disabled="disabled" value="My Value"/>
CSS:
input:disabled {
background-color:#fff;
border:none;
}
JavaScript:
document.getElementById("edit").onclick = function() {
document.getElementById("myinput").disabled = "";
};
First of all, you are missing a closing </td> tag after your page <select>. If you want to make it easy to select the text of your questions and answers, wrap them in an element. In my example, I wrapped them in a <span> element and gave them question and answer classes respectively.
Try a demo: http://jsfiddle.net/v3yN7/
HTML:
<li>
<h3><u><strong><i>Question:</i></strong><span class="question">What should I ask?</span></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><span class="answer">This is a rather short answer</span></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select></td>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
Javascript:
$('.Edit_Question').click(function() {
// Find the <li> element the whole clicked thing is wrapped in
var $item = $(this).closest('li');
// Select all question and answer wrappers
$item.find('.question,.answer').each(function() {
var $this = $(this);
// Get the question/answer text
var txt = $this.text();
// Empty the wrapper and replace them with an input box
$this.empty().append($('<input type="text" />').val(txt));
});
});
I assumed you just want a simple input box for editing, but it can be easily changed to a <textarea> if needed.
As to what happens next, I'll leave it up to you. :)
just copy this code to your page without damading your script.
<script type="text/javascript">
<!--
var editBox = false;
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});
$('.Edit_Question').click(function() {
if(editBox)
{
$('.edit_area').css({'display':''});
editBox = true;
} else {
$('.edit_area').css({'display':'none'});
editBox = false;
}
});
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $i => $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr id="edit_area" style="display:none;">
<td colspan=3><textarea cols=20 rows=5 name="editTextBox"></textarea></td>
</tr>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>