Databases
StackOverflow2013
Postsdbo
POjQuery Propagation issue with collapse element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Propagation issue with collapse element
    primarykey
    data
    text
    <p>I have some jQ logic that relies on Bootstrap's .collapse events 'shown' and 'hidden' and inside of one of the collapsible elements is a table that has collapsible rows. When a row in the sub-collapse is shown or hidden it is firing the parent Div's shown/hidden events as well. </p> <p>Everything in #carriers is returned by the API. Here is a sample of what is returned:</p> <pre><code>&lt;div class="alert alert-success"&gt; &lt;h4&gt;Quote ID&lt;/h4&gt; Write your Quote ID on your Bill of Lading to ensure propper billing. &lt;br /&gt; &lt;em&gt;Your Quote ID is: &lt;strong&gt;QID-107&lt;/strong&gt; &lt;/em&gt; &lt;/div&gt; &lt;span class="hide" id="ctsi_query_id"&gt;331&lt;/span&gt; &lt;table class="table table-condensed table-bordered"&gt; &lt;thead&gt; &lt;tr class="center-text"&gt; &lt;th&gt;Carrier&lt;/th&gt; &lt;th&gt;Transit&lt;/th&gt; &lt;th&gt;Rated&lt;/th&gt; &lt;th class="benchmark"&gt;Benchmark&lt;/th&gt; &lt;th&gt;True Cost&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="cell-dark" &gt; &lt;td class="btn-collapse" data-target="#row_CTI1"&gt;ABC Dummy Transit(ABCD)&lt;/td&gt; &lt;td&gt;6 - Days&lt;/td&gt; &lt;td&gt; $97.46 &lt;/td&gt; &lt;td class="benchmark"&gt; $128.88 &lt;/td&gt; &lt;td&gt; $113.17 &lt;/td&gt; &lt;td&gt; &lt;input type="radio" name="carrier" value="CTI1" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="7"&gt; &lt;div class="row"&gt; &lt;div class="span10 collapse" id="row_CTI1"&gt; &lt;div class="span2"&gt; &lt;strong&gt;Carrier Contact:&lt;/strong&gt; &lt;/div&gt; &lt;div class="span2"&gt; N/A &lt;/div&gt; &lt;div class="span4 offset1"&gt; &lt;div class="row"&gt; &lt;div class="span2"&gt; &lt;strong&gt;Freight Charges&lt;/strong&gt; &lt;/div&gt; &lt;div class="span2 "&gt; $84.75 &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span2"&gt; &lt;strong&gt;Fuel Charges&lt;/strong&gt; &lt;/div&gt; &lt;div class="span2"&gt; $12.71 &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span2"&gt; &lt;strong&gt;Rated Total&lt;/strong&gt; &lt;/div&gt; &lt;div class="span2"&gt; $97.46 &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span2"&gt; &lt;strong&gt;Benchmark&lt;/strong&gt; &lt;/div&gt; &lt;div class="span2"&gt; $128.88 &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span2"&gt; &lt;strong&gt; Savings &lt;/strong&gt; &lt;/div&gt; &lt;div class="span2"&gt; $31.42 &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span5"&gt; &lt;div class="center-text"&gt;&lt;strong&gt; Accessorial Charges &lt;/strong&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span2"&gt; &lt;strong&gt; Accessorial Totals &lt;/strong&gt; &lt;/div&gt; &lt;div class="span2 "&gt; $0.00 &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span2"&gt; &lt;strong&gt; True Cost &lt;/strong&gt; &lt;/div&gt; &lt;div class="span2 "&gt; $113.17 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Here is the section HTML:</p> <pre><code>&lt;div class="row"&gt; &lt;div class="span10"&gt; &lt;h3 class="heading" data-toggle="collapse" data-target="#carrierSelect"&gt;Carriers&lt;/h3&gt; &lt;div class="bg-light collapse in bg-light" id="carrierSelect"&gt; &lt;div class="row spacer-top spacer-bottom"&gt; &lt;div class="span2 offset8"&gt; &lt;a href="#" class="btn btn-primary" id="findCarriers"&gt;Get Quote&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row spacer-bottom collapse" id="carrierLoad"&gt; &lt;div class="span2 offset4"&gt;&lt;img class="center-block" src="view/img/load.gif" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span10 bg-x-light collapse in spacer-top" id="carriers"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is the jQuery:</p> <pre><code>//does the actual collapsing $('.btn-collapse').live('click', function(event){ var target = $(this).attr('data-target'); $(target).collapse('toggle') event.stopPropagation(); return false; }); //these two should stop the propagation, but don't $('#carriers').find('.collapse').live('hidden', function(event){ event.stopPropagation(); return false; }); $('#carriers').find('.collapse').live('shown', function(event){ event.stopPropagation(); return false; }); //this is the work-horse function, it does all the important stuff function processLCCRequest(callback){ var data = new Object(); data.general = { 'code': $('#warehouse').val(), 'shipper': $('#shipper_zip').val(), 'consignee': $('#consignee_zip').val(), 'shipment_type': $('#direction').val(), 'total_weight': $('#total_weight').text(), }; data.accessorials = []; $('#accessorials').find('input:checkbox:checked').each(function(acc_index){ data.accessorials.push($(this).val()); }); data.units = [{ 'num_of': ($('#total_pallets').val().length &gt; 0) ? $('#total_pallets').val() : 1, 'type': 'pallet', 'weight': 0 }]; data.products = []; $('#items tr').each(function(index){ var weight = parseFloat($(this).find('.weight').val(), 10); if(isNaN(weight)) { //setError('Empty Fields', 'At least one `weight` field was left empty.', 'warning'); return; //same as continue here. Go figure. } data.products.push({ 'pieces': 1, 'weight': parseFloat($(this).find('.weight').val(), 10), 'class': parseInt($(this).find('.class').val(), 10) }); }); var company = $('#company').val(); if(company != undefined) { company = "&amp;d=" + company; } else { company = ''; } $.post('index.php?p=api&amp;r=html&amp;c=ctsi&amp;m=quote' + company, data, function(resp){ try { var json = $.parseJSON(resp); handleMessages(json); } catch(err) { $('#carriers').html(resp); } }); callback(); return false; }; //This starts the chain reaction by showing the Loading GIF $('#findCarriers').click(function(){ $('#carrierLoad').collapse('show') return false; }); //When the loading image is shown, hide the carrier display $('#carrierLoad').on('shown', function(){ $('#carriers').collapse('hide'); }); //when the carriers are hidden, call the main function, //pass the hide command for the loading GIF as the callback $('#carriers').on('hidden', function(){ processLCCRequest(function(){ $('#carrierLoad').collapse('hide'); }); }); //When the loading GIF is hidden, show the carrier display //also, move the page to the top of the carrier display $('#carrierLoad').on('hidden', function(){ alert('hey there'); $('#carriers').collapse('show'); $('html, body').animate({ scrollTop: $("#carriers").offset().top }, 1000 ); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPamma
    1. USDavidScherer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery Propagation issue with collapse element
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload