2

I am having an issue with Jquery TagIt. It is working fine, but when I pull the records form the database and display them using a foreach loop it displays the labels like they should but then adds an x at the end as text.

The second x is the only one that should be there which deletes the record. I have tried to remove the × but then nothing shows up at all. Even the input value returns an x after the text. I am not sure what I am doing wrong.

I have provided a picture to show you what I mean. Please me know if anything needs clarification. Thanks for any assistance.

enter image description here

<?php $my_dietary_requirements = explode(', ', $my_dietary_requirements); ?>
<fieldset class="edit-boxes">
    <ul class="table-tags" id="my-diet">
        <?php foreach($my_dietary_requirements as $diet){
        echo '<li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
                <span class="tagit-label">'.$diet.'</span>
                <a class="tagit-close">
                  <span class="text-icon">×</span>
                  <span class="ui-icon ui-icon-close"></span>
                </a>
                <input value="'.$diet.'" name="my_dietary_requirements[]" class="tagit-hidden-field" type="hidden">
             </li>';
        } ?>
    </ul>
</fieldset>


//Javascript
 //Dietary Requirements
$("#my-diet").tagit({
    allowSpaces: true,
    fieldName: 'my_dietary_requirements[]'
});
$('#my-diet .tagit-new input').attr('id','my-dietary-requirements');
bilcker
  • 1,120
  • 1
  • 15
  • 43
  • just hide it with css and be lazy like a champ :D – Rooster May 29 '15 at 19:23
  • I can't target it as it is not the x that is the problem. When I inspect Element it is adding another x Lactose Intolerant x and also in the value of the hidden input is value="lactose Intolerant x" – bilcker May 29 '15 at 19:54
  • so are you saying the javascript is adding the additional x or that the x's are actually present in the $my_dietary_requirements string? – Rooster May 29 '15 at 20:04
  • Correct Yes, the java script is adding them, there are only commas present in the string which is why I use explode to separate them. I have edited my answer to include the javascript I use to render the tag it. – bilcker May 29 '15 at 20:24

1 Answers1

1

try changing your foreach to this:

<?php foreach($my_dietary_requirements as $diet){
echo '<li>'.$diet.'
        <input value="'.$diet.'" name="my_dietary_requirements[]" class="tagit-hidden-field" type="hidden">
     </li>';
} ?>

I think youre trying to add a bunch of stuff that your plugin adds on its own, which is ending up making stuff get added twice in a weird way. Its probably concatenating all the text of nodes inside the original <li>

Rooster
  • 9,954
  • 8
  • 44
  • 71
  • It worked just as I want it to! Make sense, I never thought of that. Thanks for your patience and help. Greatly appreciated. – bilcker Jun 01 '15 at 13:04