问题
This is an extension to another post by myself (How To Detect a Button Click in the Expanded Accordion Row).
After adding some additional rows in the details section of my accordion control and moving the 'Select' button into a separate div, I am only getting the values from the first accordion row. This was my original issue. Just to confirm the original solution worked, if I move my 'Select' button into the save div containing the label for Location, it passes the correct location label ('labelAccordionLocation') value for what ever row I have expanded but always passes the first row's name label value. It also works correct if the 'Select' button is in the save div as the Name label ('labelAccordionName').
Based on the suggestion in my other post (which worked flawlessly for my original example), it seems that I now need to figure out how to identify the div that contains each label so I can then pass it's value when the 'Submit' button is clicked. Although, this is still just an amateur's way of thinking.
<div class="accordion" id="accordion2">
<?php
// SQL stuff here...
$group = null;
while ($row = odbc_fetch_array($db)) {
if ($row['Name'] != $group) {
echo "<div class='accordion-heading'>";
echo "<a class='accordion-toggle' data-toggle='collapse'
data-parent='#accordion2' href='#", $row['Number'],"'>
<button id='buttonAccordionToggle'
data-target='#", $row['Number'],"'>", $row['Name'],"</button></a>";
echo "</div>";
echo "<div id='", $row['Number'],"' class='accordion-body collapse'>";
echo "<div class='accordion-inner'>";
echo "<div class='control-group' style='min-height: 50px'>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<div class='span1'>";
echo "<label>Name:</label>";
echo "</div>";
echo "<div class='span11'>";
echo "<label id='labelAccordionName'>",
$row['Name'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<div class='span1'>";
echo "<label>Location:</label>";
echo "</div>";
echo "<div class='span11'>";
echo "<label id='labelAccordionLocation'>",
$row['Location'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<a id='select' class='btn'>Select</a>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
$group = $row['Name'];
}
}
}
?>
</div>
<div id="divDetails" style="display: none;">
<label>Name:</label>
<label id="labelName"></label><br />
<label>Location:</label>
<label id="labelLocation"></label><br />
<a id="close" class="btn">Close</a>
</div>
<script>
// Hide the accordion and show the hidden div
$('a.btn').click(function() {
$('#accordion2').hide();
$('#divDetails').show();
// Pass the label value from the accordion row to the hidden div label
$('#labelName').html($('.accordion-body.in .labelAccordionName').html());
$('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').html());
});
// Hide the div and show the accordion again
$('#close').click(function() {
$('#accordion2').show();
$('#divDetails').hide();
});
// Only allows one row to be shown at a time
$('.accordion-toggle').click(function() {
var $acc = $('#accordion2');
$acc.on('show', '.collapse', function() {
$acc.find('.collapse.in').collapse('hide');
});
});
$(document).ready(function(){
// On dropdown change, pass in value to populate accordion/details
$('#dd').change(function() {
var r = $(this).val();
location.href = "test.php?src=" + r;
});
});
</script>
I did some searching on the jQuery site to try and figure this one out but unfortunately was unable to get it working. I'll do my best to give any additional information that is needed.
Edits
I changed the label's to use classes instead of id's. Although a great suggestion, I did not have to apply a new class 'activeAccordion'. Since the class 'in' is applied to the expanded row, I was able to use it for access as seen below. I also updated the jsFiddle and provided a link at the bottom.
$('a.btn').click(function() {
$('#accordion2').hide();
$('#divDetails').show();
$('#labelName').html($('.accordion-body.in .labelAccordionName').html());
$('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').html());
});
Working jsFiddle
http://jsfiddle.net/N8JuQ/
回答1:
when generating html with php, as long as you are iterating be careful with IDs. Never generate same ID in a DOM, it messes things really bad. (ie. select, labelAccordionName, buttonAccordionToggle) I suggest using classes or generating unique IDs plus a generic class
you should have something like :
<div class="accordion" id="accordion2">
<?php
// SQL stuff here...
$group = null;
while ($row = odbc_fetch_array($db)) {
if ($row['Name'] != $group) {
echo "<div class='accordion-heading'>";
echo "<a class='accordion-toggle' data-toggle='collapse'
data-parent='#accordion2' href='#", $row['Number'],"'>
<button class='buttonAccordionToggle'
data-target='#", $row['Number'],"'>", $row['Name'],"</button></a>";
echo "</div>";
echo "<div id='", $row['Number'],"' class='accordion-body collapse'>";
echo "<div class='accordion-inner'>";
echo "<div class='control-group' style='min-height: 50px'>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<div class='span1'>";
echo "<label>Name:</label>";
echo "</div>";
echo "<div class='span11'>";
echo "<label class='labelAccordionName'>",
$row['Name'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<div class='span1'>";
echo "<label>Location:</label>";
echo "</div>";
echo "<div class='span11'>";
echo "<label class='labelAccordionLocation'>",
$row['Location'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<a class='select btn'>Select</a>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
$group = $row['Name'];
}
}
}
?>
</div>
<div id="divDetails" style="display: none;">
<label>Name:</label>
<label id="labelName"></label><br />
<label>Location:</label>
<label id="labelLocation"></label><br />
<a id="close" class="btn">Close</a>
</div>
<script>
something like that, didn't check as you don't provided a jsfiddle. As for your data to retrieve correctly, I would suggest adding a class on active accordion-body then in your finds use this class to select the correct element :
$('.accordion-toggle').click(function() {
var $acc = $('#accordion2');
$('.activeAccordion').removeClass('activeAccordion');
$(''+$(this).next('.buttonAccordionToggle').data('target')).addClass('activeAccordion');
$acc.on('show', '.collapse', function() {
$acc.find('.collapse.in').collapse('hide');
});
});
then use this new class :
$('#labelName').html($('accordion-body.activeAccordion .labelAccordionName').html()));
$('#labelLocation').html($('accordion-body.activeAccordion .labelAccordionLocation').html()));
回答2:
You should consider escaping out of PHP in your if statement and only jump back in to echo the variables. Also read up on alternative syntax: http://php.net/manual/en/control-structures.alternative-syntax.php
while ($row = odbc_fetch_array($db)) {
if ($row['Name'] != $group){
?>
<div class='accordion-heading'>
<a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion2' href='#", <?php echo $row['Number']; ?>,"'>
<button id='buttonAccordionToggle' data-target='#", <?php echo $row['Number']; ?>,"'>", <?php echo $row['Name']; ?>,"</button></a>
</div>
<div id='", <?php echo $row['Number']; ?>,"' class='accordion-body collapse'>
<div class='accordion-inner'>
...
...
...
<?php
}
?>
来源：https://stackoverflow.com/questions/16589649/how-to-detect-a-button-click-in-an-expanded-accordion-row-with-multiple-labels