Problem with a component display

Question

I have a visualforce page, wich call a component like that :

<div>
//some code that is not related to the component (and working)
</div>

<div id="selectMode">
    <c:MyComponent droitId="{!droit.Id}"/>
</div>

<div id="id2">
    <c:MyComponent2 droitId="{!droit.Id}"/>
</div>

<div id="id3">
    <c:MyComponent3 droitId="{!droit.Id}"/>
</div>

There is some stuff in my component, I won't write everyting here, but the problem is here :

<apex:component Controller="controller">
<apex:attribute name="droitId" type="String" description="blabla"/>

<h1 class="titre">Title</h1>
<div>
    Filtrer <input id="search-input-selectMode" class="form-control"></input>
</div>
<div id="selectMode" class="demo"></div>

<script>
$("#search-input-selectMode").keyup(function() {

        var searchString = $(this).val();
        console.log(searchString);
        $('#selectMode').jstree('search', searchString);
    });


    $('#selectMode').jstree({
        'core' : {
            'data' : {
                "url" : "/apex/ModesExploitationJSON?droitId={!droitId}",
                "dataType" : "json" // needed only if you do not supply JSON headers
            }
        },
        "search": {
            "case_insensitive": true,
            "show_only_matches" : true
        },
        "plugins" : [ "wholerow", "checkbox", "unique","search" ]
    });

</script>
</apex:component>

When I open my page, calling the component, the h1 title is not displayed... I can see the rest of my code (consisting in javascript) but not the title !

I tried to put my h1 with the class "titre" in my css with a display:block; but there is no difference... So if you know how I can display my component with the h1, thank you in advance ^^

Answer 1

The problem here is that the div that contains the component has the same id as a div in the actual component. Make sure the ids of the divs are actually unique and it should work.