Member Avatar for Tutor_1

On selection from drop down in few cases the label above the drop down (label being attached dynamically) disappears here is the code

    $.ajax({


        dataType: "html",


        url: app.util.appendParamToURL(options.url, "format", "ajax"),


        data: options.data,


        type: options.type


    })


    .done(function(response) {


        // success


        if (options.target) {


            $(options.target).empty().html(response);


        }


        if (options.callback) {


            options.callback(response);


        }





    })


    .fail(function(xhr, textStatus) {


        // failed


        if (textStatus === "parsererror") {


            reportError(app.resources.BAD_RESPONSE);


        }


        options.callback(null, textStatus);


    })


    .always(function() {


        app.progress.hide();


        // remove current request from hash


        if (currentRequests[options.url]) {


            delete currentRequests[options.url];


        }


    });

the .done function here...which is basically processing response coming back from ajax called made after value is selected from dropdown.

I think I need to make sure the ajax response coming from url should include those disappearing labels. That response is coming without those links. But I don't understand how do i do it??

  • 2 Contributors
  • 1 Reply
  • 857 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Short diagnosis and actionable fixes based on 's description and 's CSS suggestion.

First, determine whether the label node is actually removed or merely hidden. Use the browser devtools Elements panel or a quick console check (for example, inspect the container after the AJAX update or run something like console.log($('#theTarget').find('label').length)). If the label node count drops to zero the DOM was replaced; if it is present but invisible the issue is CSS/clipping/z-index.

If the label is being removed by the update, avoid replacing the whole wrapper. Either update just the select element returned by the server, or temporarily detach and reattach the label so it survives the replacement:

var $t = $(options.target);
var $label = $t.children('label').detach(); // keeps event handlers
$t.html(response);                              // replace content
$t.prepend($label);                             // put label back

Or replace only the select element from the response:

var $resp = $(response);
$t.find('select#theSelect').replaceWith($resp.find('select#theSelect'));

If the label remains in the DOM but is not visible, inspect computed styles: display, visibility, opacity, position, parent overflow and z-index. A common pattern is an absolutely positioned dropdown or an ancestor with overflow: hidden clipping the label; toggling overflow: visible or raising the label's z-index will quickly show whether clipping/z-index is the cause.

Best practice: return only the fragment that needs replacing (or JSON and rebuild only the select client-side), keep labels outside containers that are fully replaced, and use event delegation (for example $(document).on('change', '#theSelect', handler)) so handlers survive DOM swaps.

Member Avatar for Member #949455

On selection from drop down in few cases the label above the drop down (label being attached dynamically) disappears here is the code

If the label is above the menu bar then it's more related to CSS than menu code. There's nothing wrong with code you provided. The only thing missing is the div tags with the CSS. A overflow might do that trick if you don't want the label to disappear.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.