Question 11163 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Add Dynamic Attribute Title to the Query Returned In Sub Select – Jquery

I’m trying to add the attribute, Title, to the Option tag returned in a dynamically generated query in this jQuery function. This is a sub-Select that gets populated from another Select element on the Form. The variable for the Title attribute is #SystemDescription# and it already exists in the query called from the function in the Component.

Example of what it is currently:

<option value="#systemid#">#system#</option>

Example of what I need it to be:

<option value="#systemid#" title="#SystemDescription#">#system#</option>

How do I add it to this currently working jQuery function:

$('#orderpdm').on('change', function() {
    $.ajax({
        type: 'POST',
        url: '<cfoutput>#Application.URL#/#Application.directory#</cfoutput>/cfc/order.cfc?method=GetSystemListSelect',
        data: {PdMID: this.options[this.selectedIndex].value},
        async: true,
        cache: false,
        dataType: 'json',
        type: 'POST',
        success: function(rtnData) {
            $("#orderpdm option:first-child").attr("disabled", "true");
            $('#systemid').empty();
            $('#systemid').append($("<option value='' selected>-- Select Sub-System --</option>"));
            $.each(rtnData.SELECTLIST, function(key, value) {
                $('#systemid').append($("<option></option>")
                .attr("value", value).text(key));
            });         
        },//success
        error: function(jqXHR, textStatus, errorThrown) {
            $.error(errorThrown);
        }//error
    });//ajax
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Yes, it can be done and was. I got the answer elsewhere. Although I was half way there with adding it to the query in the function and trying to alter the attribute. Look at the line that has the .attr. Notice the other attribute is chained to the existing attribute. Within the 2 parenthesis. Also, there are no pound signs with the variable like there usually is in Coldfusion. That's why and where I was stuck on the jQuery syntax nonsense.

    $('#orderpdm').on('change', function() {
$.ajax({
    type: 'POST',
    url: '<cfoutput>#Application.URL#/#Application.directory#</cfoutput>/cfc/order.cfc?method=GetSystemListSelect',
    data: {PdMID: this.options[this.selectedIndex].value},
    async: true,
    cache: false,
    dataType: 'json',
    type: 'POST',
    success: function(rtnData) {
        $("#orderpdm option:first-child").attr("disabled", "true");
            $('#systemid').empty();
            $('#systemid').append($("<option value='' selected>-- Select Sub-System --</option>"));
            $.each(rtnData.DATA, function(key, value) {
                $('#systemid').append($(`<option></option>`)
                .attr("value", value["SystemID"]).text(value["System"]).attr("title",value["SystemDescription"]));
            });         
        },//success
        error: function(jqXHR, textStatus, errorThrown) {
            $.error(errorThrown);
        }//error
    });//ajax
}); 

$('#cancelButton').on('click', function(e){
    e.preventDefault();
    location.href = 'sordsDashboard.cfm';
});

  2. 0

    Disclaimer: This is more of a comment than an answer

    HTML <select> does not do what you are expecting. Consider

    <select title="Animal">
    <option title="Cat" selected>Kitten</option>
    <option title="Dog">Puppy</option>
</select>

    If you hover over the select, you will get a tooltip of Animal

    If you really wanted to change the tooltip, you would have to reach all the way up to the <select>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search