passing a variable to .html() function

Question

     <!-- The select drop down menu (works fine) -->
     <select id="select-event-type">
        <?php foreach ($this->events as $event) {
            echo "<option value='" .$event->event_id. "'>" .$event->event_title."</option>";
        }?>
     </select>

     <!-- The javascript, which is supposed to output something according to the chosen option in the select drop down -->
     <script>
          (function ($) {
              var events = <?php echo (count($this->events) > 0) ? json_encode($this->events) : "null"; ?>;
              $(document).ready(function() {
                  $('#select-event-type').change(function() {
                      if (events) {
                          var event = events[this.selectedIndex];
                          $('#event-details').html(event);
                      }
                  });
              });
          })($);
     </script>

 <!-- In this div the output will be displayed -->
<div id="event-details"></div>

The event variable undefined.

If I for example do this: var event = 'hello' It does output 'hello' as it is supposed to.

So the problem seems to be with this part: events[this.selectedIndex];. What did I do wrong?

I am really new to this. Thank you so much for your help!!

UPDATE:
Console output (in chrome):

     <script>
          (function ($) {
              var events = JSON.parse({"1":{"event_id":"1","event_title":"event1","event_desc":"event1","event_location":"eventlocation","event_requirements":"event1","event_date":"2022-07-20 15:00:00"},"2":{"event_id":"2","event_title":"event2","event_desc":"event2","event_location":"eventlocation","event_requirements":"event2","event_date":"2015-04-20 15:00:00"},"3":{"event_id":"3","event_title":"event3","event_desc":"event3","event_location":"eventlocation","event_requirements":"event3","event_date":"2019-11-20 16:00:00"}});               $(document).ready(function() {
                    $('#select-event-type').change(function() {
             if (events) {
                 var event = events[$(this).selectedIndex];
                 $('#event-details').html(event);
              }
           });
        });

    </script>

JSON:

{
    "1": {
        "event_id": "1",
        "event_title": "event1",
        "event_desc": "event1",
        "event_location": "eventlocation",
        "event_requirements": "event1",
        "event_date": "2022-07-20 15:00:00"
    },
    "2": {
        "event_id": "2",
        "event_title": "event2",
        "event_desc": "event2",
        "event_location": "eventlocation",
        "event_requirements": "event2",
        "event_date": "2015-04-20 15:00:00"
    },
    "3": {
        "event_id": "3",
        "event_title": "event3",
        "event_desc": "event3",
        "event_location": "eventlocation",
        "event_requirements": "event3",
        "event_date": "2019-11-20 16:00:00"
    }
}

Could you give the client-side version of this code snippet? .... As rendered in your browser (HTML). — PeterKA
– PeterKA, Commented Nov 6, 2014 at 16:41
Events is not a boolean if (events.length > 0 && events!='null') — Raúl Monge
– Raúl Monge, Commented Nov 6, 2014 at 16:44
But it runs the script. The if (events) runs because it does output the value I give to var event. — Schwesi
– Schwesi, Commented Nov 6, 2014 at 16:48
Are you certain that the events array has values in it? Could you do console.log(events); to check on that? — B W
– B W, Commented Nov 6, 2014 at 16:56

PeterKA · Accepted Answer · 2014-11-06 17:10:16Z

1

To get the value of the select element use this.value. Thus change:

var event = events[this.selectedIndex];

To:

var event = events[this.value];

However, if you json is an array with indices 0,1,2,3,4 rather than an object with option values as keys then your use of this.selectedIndex is correct.

UPDATE:

In the light of the sample JSON posted the correct code should be:

var event = events[this.selectedIndex + 1].event_title;

Special Note

You can get all the event data by using either:

var event = JSON.stringify( events[this.selectedIndex + 1] ); //gives you a string of everything

Or you could construct how you want it to look like so:

var event = $('<div/>');
$.each( events[this.selectedIndex + 1], function(k,v) {
    event.append( $('<div/>',{text:k + ': ' + v}) );
});

edited Nov 6, 2014 at 17:10

answered Nov 6, 2014 at 16:44

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Schwesi Over a year ago

This does not give me any errors but there is no output either.

PeterKA Over a year ago

this.value is consistent across browsers; it's very basic js.

Schwesi Over a year ago

okay! Well then the problem has to be somewhere else in my code since I do not get any errors I believe you! :)

PeterKA Over a year ago

Can you post a snippet off the json you're using.

PeterKA Over a year ago

See new update which should give you a clue on how to access the rest of the information.

|

Community · Accepted Answer · 2017-05-23 11:57:46Z

1

See this answer for the jQuery way of accessing the selectedIndex property. Your answer might look like:

var event = events[$(this).prop("selectedIndex")];

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Nov 6, 2014 at 16:42

B W

7321 gold badge8 silver badges22 bronze badges

1 Comment

Schwesi Over a year ago

Thank you that is already helping! Now I get that this is not defined: Uncaught ReferenceError: $this is not defined

vmontanheiro · Accepted Answer · 2014-11-06 16:48:33Z

1

Firstly you dont need the 2 ready instances. Try to do it, if dont work please tell me.

<script>
   $(document).ready(function() {
     var events = <?php echo (count($this->events) > 0) ? json_encode($this->events) : "null"; ?>;
      $('#select-event-type').change(function() {
         if (events) {
             var event = events[$(this).selectedIndex];
             $('#event-details').html(event);
          }
       });
    });

</script>

and what means the selectedIndex ?

answered Nov 6, 2014 at 16:48

vmontanheiro

1,0399 silver badges14 bronze badges

2 Comments

Schwesi Over a year ago

I do not get any errors but no output either. I am getting the feeling the error is to be searched elsewhere! Thank you for the effort!

vmontanheiro Over a year ago

You can try to get the value like this $(this).val() or you can add an attribute data in your element #select-event-type. Example: <input id="select-event-type" data-index="yourvalue">. So you can access $(this).attr("data-index"). hugs!

Collectives™ on Stack Overflow

passing a variable to .html() function

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related