0

I am trying to get some custom jQuery working with Bootstrap, but I am still fairly new with Bootstrap.

I had a HTML 5 doc where this worked:

     $('#assigned_agent_c').change(function(){
    var agent_id = $('#assigned_agent_c').val();
    var name = $('#assigned_agent_c :selected').text();
    var phone = $('#assigned_agent_c :selected').attr('data-phone');
    $('.my_name').text(name);
    $('.set_phone').text(phone);
    $("#user_id").val(agent_id);

});

In conjunction with this HTML:

<span class="my_name" name="assigned_agent_c"></span>

I also have a dropdown select with the id assigned_agent_c:

                <div class="form-group border">
                <label for="assigned_agent_c"><h2>Select User:</h2></label>
                <select class="form-control" id="assigned_agent_c" name="assigned_agent_c">
                     <option value="" selected></option>
        <option data-phone='555-555-5555' data-email='example@email.com' data-nmls='000000' data-bio='www.somesite.com' value='crm_id' data-image="<img src='http://somesite.com/images/user_bio.png' />">My User</option>

Basically, the jQuery would take the name selected in the dropdown for assigned_agent_c, and place the name in the span element. It does the same thing with the phone number and user id. How can I reporoduce this in Bootstrap?

FYI: the whole page is basically a form, so I am using the Bootstrap form elements, if that makes a difference.

Let me know if you need more info. Thanks!

Allen Levings
  • 142
  • 11

1 Answers1

1

Okay so after receiving more details. I urge you to look at this reference.

http://api.jquery.com/data/

In example, since your select item uses 'data-phone' and 'data-email' you can use

$('#assigned_agent_c :selected').data('phone')

to get the phone of the currently selected item. or 

$('#assigned_agent_c :selected').data('email')

to get the email of the currently selected item. You should still be able to use

$('#assigned_agent_c :selected').text()

to get the current name selected

I've created a fiddle for you, click this line.

Brandon Knight
  • 532
  • 1
  • 4
  • 14
  • You didnt misunderstand, I realize now I was not clear. I have a dropdown with the assigned_agent_c id that the jQuery gets the name from, and then puts the name in the span. Sorry for not being clear. I have updated my question. – Allen Levings Nov 11 '14 at 19:20
  • hopefully I answered your question now? – Brandon Knight Nov 11 '14 at 19:39
  • I copy and pasted your fiddle, but still it doesn't work. Could it be Bootstrap? Maybe I have my code in the wrong place? – Allen Levings Nov 11 '14 at 20:56
  • you should put it at the bottom of your body tag, below all of the html you have. and make sure it is inside of a – Brandon Knight Nov 11 '14 at 21:45
  • also note that I changed your html AND javascript by switching your classes to IDs. – Brandon Knight Nov 11 '14 at 21:52
  • Sorry for the delay in responding Brandon... I have copy and pasted exactly, making sure to note the changes from classes to IDs, I have tried creating a separate jQuery file to make sure it wasn't conflicting with something, and I tried changing the name to a "data-name" to see if that did it and still it does not work. I have some other custom jQuery in a separate file that is working, which is what is weird. I looked at the jQuery source you sent, and still nothing as well. Any ideas? – Allen Levings Dec 04 '14 at 17:32
  • OK, so I started moving the function around in the jQuery file and discovered that somewhere, there is something that is preventing the code from working. I haven't found it yet but I will. Thanks for the help Brandon! Your function works perfectly! – Allen Levings Dec 04 '14 at 17:58