Clever Geek Handbook

InnerHTML works jQuery html () doesn't

For some reason, I cannot get the jQuery html () function to work. I've tried the following:

  • Find a specific div:

    var div = $("#divId");

    Result: works

  • Check that I can use it with jQuery:

    alert($(div).attr("id"));

    Result: works; presented id

  • Get html in div:

    alert($(div).html());

    Result: doesn't work; blank alert

  • Get html in div using innerHTML:

    alert(document.getElementById($(div).attr("id")).innerHTML);

    Result: works; the content of the div is presented in the warning

Actual code:

$(document).ready(function(){

var autocomp = namespace('mx.autocomp');

autocomp.overlay = (function() {

    var formId;
    var $searchValueComp;
    var $searchResultComp;

    function init(inFormId, inSearchValue){
        formId = inFormId;
        $searchValueComp = $("#"+inFormId).find("[id$="+inSearchValue+"]");
        $searchResultComp = $("#"+inFormId).find("[id$=searchResult]");
    }

    function handleOverlay(){
        var fn = window[formId + "OverlayWid"];
        var result = document.getElementById($searchResultComp.attr("id")).innerHTML;

        if($searchValueComp.val().length==0){
            fn.hide();
        }

        // Test - This does not work as I get an empty alert
        alert($searchResultComp.html());

        // Edit1: New test, this works.
        // When I use this javascript, I start with initializing the script from the page
        // using the "init(inFormId, inSearchValue)" function. The handleOverlay() function
        // is called through the "oncomplete='mx.autocomp.overlay.handleOverlay();'" of a
        // p:remoteCommand that executes a search in the db and then update the div called
        // "searchResultComp".
        //
        // Only reason I can think of why the code below works is that the jQuery object $test 
        // is created after the div called "searchValueComp" has been updated by p:remoteCommand.
        // However, I don't understand why the jquery object "searchValueComp" wouldn't have
        // access to the same content as it should look for it first when the html() function 
        // is called. Or is the content of the div searchValueComp set immediately when the 
        // object is created in the "init" function?
        var $test = $("#"+formId).find("[id$=searchResult]");
        alert($test.html());

        // I need to check if the div: "searchResultComp" has any content. 
        // As I don't get $searchResultComp.html() to work, I'm forced to 
        // use the "getElementById" way instead. 
        if(result.length==0){
            fn.hide();
        }else{
            fn.show();
        }

    }

    function print(text){
        $("#textCheck").prepend(text + '\n');
    }

    return {
        handleOverlay: handleOverlay,
        init: init
    };

})();

});

What am I doing wrong?

+3


source to share


4 answers


Peter Campbell gave me the answer in the following question: Is the "content" of a jquery object set immediately upon creation?



Obviously, I have to re-initialize the searchResultComp variable to get the expected result.

0


source


try it

Html

<div id="mydiv">
    <select class="myclass">...</select>
    <select class="myotherclass">...</select>
</div>


JS CODE

var $div = $('div');
alert($div.html());

LIVE DEMO

0


source


When assigning jQuery objects to variables, it is often enough to start the variable with $

to allocate it as a jQuery object. This doesn't affect your code, but it makes it easier from a developer's point of view.

var $div = $('div');

To get html follow these steps:

$div.html();
-1


source


You need to quote a div like:

$("div").html();

Also, if there are multiple divs on the page that you want to specify. You can do this by adding a class or using .eq () to filter the results.

Here's an example. http://jsfiddle.net/W8qkE/

-1


source






More articles:


All Articles