Geek Answers Handbook

Data-target tags with (single space) are not recognized

I have a html accordion in which I call the corresponding body via data-value with a space.

Accordion Title:

  <div data-toggle="collapse" data-target="#Drug Test">Drug Test</div>

Accordion Body:

  <div id="Drug Test" class="accordion-body collapse "> <p>Test Data</p> </div>

But when you click on the title element, the accordion does not open, since the target data value has a space. Since it comes from the database, which is required to generate a dynamic accordion.

Can anyone suggest a workaround? PS:. This must be done only on the client side.

UPDATE: This is my original html with angular directives

  <div class="form-group panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div ng-repeat="key in keys"> <div class="panel panel-default selectedinvestigations"> <div class="panel-heading"> <i class="glyphicon glyphicon-folder-open pull-right"></i> <input id="btn{{key}}" type="checkbox" class="pull-left" ng-click="selectAll(key)" /> <div class="padLeft" data-toggle="collapse" data-target="#{{key}}">{{key}}</div> </div> <div class="panel-body"> <div id="{{key}}" class="accordion-body collapse "> <div class="" ng-repeat="inv in allInvestigationsGrouped[key]"> <div> <ul> <div class="col-md-8 input-group"> <span class="input-group-addon "> <input name="checkAll" class="{{key}}" type="checkbox" ng-model="inv.selected" data-id="{{inv.id}}" data-name="{{inv.name}}" data-description="{{inv.description}}" data-isactive="{{inv.isActive}}" data-quantity="{{inv.quantity}}" /> </span> <label class="form-control">{{inv.name}} </label> </div> </ul> </div> </div> </div> </div> </div> </div> </div>
+5
source share
2 answers

You can replace space _ with str_replace in php:

 <?php echo str_replace(' ', '_', $row['from_database_table']); ?>

Try the following:

 <div data-toggle="collapse" data-target="#<?php echo str_replace(' ', '_', $row['from_database_table']); ?>">Drug Test</div> <div id="<?php echo str_replace(' ', '_', $row['from_database_table']); ?>" class="accordion-body collapse"> <p>Test Data</p> </div>
+1
source

You are doing it wrong. The identifier must not contain a space. So just remove the space from id and make it lower

 <div id="DrugTest" class="accordion-body collapse "> <p>Test Data</p> </div>

and accordion:

 <div data-toggle="collapse" data-target="#DrugTest">Drug Test</div>

To remove the space, you need to write code on the server side, as you said, its exit from the database.

0
source

More articles:


All Articles