Displaying database items in an HTML Select dropdown in a Meteor application

Question

Displaying database items in an HTML Select dropdown in a Meteor application

I've been struggling to find a solution to this issue, so I'm reaching out to the stackOverflow community for help. While it may seem like a common problem, the example I'm dealing with has proven to be unique in my research.

Within a meteor template, I have a select dropdown that is structured as follows:

    {{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option selected="{{selectedOrNot}}" name="selection">Work</option>
                <option selected="{{selectedOrNot}}" name="selection">Home</option>
                <option selected="{{selectedOrNot}}" name="selection">Mobile</option>
                <option selected="{{selectedOrNot}}" name="selection">Office</option>
                <option selected="{{selectedOrNot}}" name="selection">Fax</option>
                <option selected="{{selectedOrNot}}" name="selection">Other</option>
            </select>
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

In the helper function 'selectedOrNot', I am attempting to determine which option should be selected based on the data retrieved from the collection:

  Template.addPhoneNumber.helpers({

    'phoneNumber': function() {
      return newOrgPhoneNumbers.find();
    },

    'selectedOrNot': function(event){

      var collectionType = newOrgPhoneNumbers.findOne();  
      var typeFormName = $('[name="selection"]').val();   

     if(collectionType.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }

  }

  });

The objective is to display the correct selection based on the 'type' field in the 'newOrgPhoneNumbers' collection. However, I have identified an issue where 'typeFormName' always defaults to "Work", resulting in incorrect selections.

I have spent considerable time trying to resolve this independently, but it seems I require additional guidance. Any assistance you can provide would be greatly appreciated. Thank you. - Rob

javascript mongodb templates meteor return

Answer 1

Answer №1

Instead of this

//let's us choose which of the dropdown items are selected
    'selectedOrNot': function(event){

      var collectionType = newOrgPhoneNumbers.findOne();  //get the type from the collection (EG: Home, Mobile, Fax, etc)
      var typeFormName = $('[name="selection"]').val();   //get the data from the form (EG: Home, Mobile, Fax, etc)


      //When drawing the select dropdown, see if there's a match and return selected if so
     if(collectionType.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }

  }

try this

//let's us choose which of the dropdown items are selected
    'selectedOrNot': function(event){
      var typeFormName = $('[name="selection"]').val();   //get the data from the form (EG: Home, Mobile, Fax, etc)


      //When drawing the select dropdown, see if there's a match and return selected if so
     if(this.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }
  }

make sure you're getting correct values for both by console.log

EDIT

try following code

{{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option value="Work">Work</option>
                <option value="Home">Home</option>
                <option value="Mobile">Mobile</option>
                <option value="Office">Office</option>
                <option value="Fax">Fax</option>
                <option value="Other">Other</option>
            </select>
            {{setDropdownValue}}
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

in the helpers

setDropdownValue: function(){
 $("#"+this._id).val(this.type);
}

Answer 2

Instead of this

//let's us choose which of the dropdown items are selected
    'selectedOrNot': function(event){

      var collectionType = newOrgPhoneNumbers.findOne();  //get the type from the collection (EG: Home, Mobile, Fax, etc)
      var typeFormName = $('[name="selection"]').val();   //get the data from the form (EG: Home, Mobile, Fax, etc)


      //When drawing the select dropdown, see if there's a match and return selected if so
     if(collectionType.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }

  }

try this

//let's us choose which of the dropdown items are selected
    'selectedOrNot': function(event){
      var typeFormName = $('[name="selection"]').val();   //get the data from the form (EG: Home, Mobile, Fax, etc)


      //When drawing the select dropdown, see if there's a match and return selected if so
     if(this.type === typeFormName){
      console.log ('selected!');
      return 'selected';
     }
  }

make sure you're getting correct values for both by console.log

EDIT

try following code

{{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option value="Work">Work</option>
                <option value="Home">Home</option>
                <option value="Mobile">Mobile</option>
                <option value="Office">Office</option>
                <option value="Fax">Fax</option>
                <option value="Other">Other</option>
            </select>
            {{setDropdownValue}}
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

in the helpers

setDropdownValue: function(){
 $("#"+this._id).val(this.type);
}

Answer 3

Answer №2

I extend my gratitude to @Sasikanth for his valuable assistance. Here is the code snippet that he provided, presented in full below for the benefit of others and future reference.

Meteor Template:

{{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="sel_{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option value="Work">Work</option>
                <option value="Home">Home</option>
                <option value="Mobile">Mobile</option>
                <option value="Office">Office</option>
                <option value="Fax">Fax</option>
                <option value="Other">Other</option>
            </select>
            {{setDropdownValue}}
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

Meteor Helper:

  Template.addPhoneNumber.helpers({

    //the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form
    'phoneNumber': function() {
      return newOrgPhoneNumbers.find();
    },

    //This will take the value of the database item's "type" field and send it back to the select html element.  
    //It's using the sel_ prefix to separate it from the other items with the same id in the template so they don't receive the data by accident.
    'setDropdownValue': function(){
     $("#sel_"+this._id).val(this.type);
    }

  });

Answer 4

I extend my gratitude to @Sasikanth for his valuable assistance. Here is the code snippet that he provided, presented in full below for the benefit of others and future reference.

Meteor Template:

{{#each phoneNumber}} 
        <li>
            <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here"  value="{{number}}">
            <select id="sel_{{this._id}}" name="type">
            <!-- go through collection and see which is selected there, mark it as selected here so they match -->
                <option value="Work">Work</option>
                <option value="Home">Home</option>
                <option value="Mobile">Mobile</option>
                <option value="Office">Office</option>
                <option value="Fax">Fax</option>
                <option value="Other">Other</option>
            </select>
            {{setDropdownValue}}
            <input id="{{this._id}}" type="button" class="remove" value="X">
        </li>
    {{/each}}

Meteor Helper:

  Template.addPhoneNumber.helpers({

    //the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form
    'phoneNumber': function() {
      return newOrgPhoneNumbers.find();
    },

    //This will take the value of the database item's "type" field and send it back to the select html element.  
    //It's using the sel_ prefix to separate it from the other items with the same id in the template so they don't receive the data by accident.
    'setDropdownValue': function(){
     $("#sel_"+this._id).val(this.type);
    }

  });

Displaying database items in an HTML Select dropdown in a Meteor application

Answer №1

Answer №2

Similar questions

Tooltip for dynamically fetched data cell within a Bootstrap table

Challenges with jQuery animation callbacks

Unable to locate the input element using xpath

How can I make Material UI's grid spacing function properly in React?

transferring data between pages without the need for a form tag

Changing the source value of a video according to the selected option in a dropdown selection

Is there a way to detect and intercept M-SEARCH requests in Express?

Create a new implementation for the fetch function in jQuery.ajax()

After successfully authenticating, you may introduce a new React component

Script for Incrementing and Decrementing Values Using Jquery

Dealing with errors in a MongoDB query using Node.js

Looping in PHP with Ajax to trigger a flush operation

Referencing an object by using a variable containing its name

Display only the error messages from ASP validators using JavaScript

Refresh FullCalendar in Angular 2 and above

The content inside a Textbox cannot be clicked on. I am seeking help with implementing JavaScript to enable it to be

I'm having trouble with the appearance of my table and I can't seem to pinpoint where I went wrong with the

Exploring Faces with React Three Fiber through Hovering

Having issues initializing Firebase APP within script module on HTML page

Ensuring a Memory Leak-Free Environment: Tips and Tricks