Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

div's content moves out of div

innerHTML

  • Please log in to reply
1 reply to this topic

#1 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 13 August 2012 - 12:29 PM

Hi. I have live search field. when you type smth to it, php program searches for matches in database and returns html code containing div element for each found match. however, content of this div appears to be below the div. I would be grateful for any ideas what could be wrong

Here's my css:
.liveSearchResultBox{
    width: inherit;
    height: 30px;
    position: relative;
}

#liveSearchResultsArea{
    width: 400px;
    border: 0px solid black;
    padding: 0px;
    background-color: blue;
}

Here's javascript: 
function displayEntitiesData(searchPhrase){
    var isSingleEntityNeeded = true;
    if (searchPhrase == null){
        isSingleEntityNeeded = false;
        searchPhrase = "";
    }
    else {
        searchPhrase = searchPhrase.trim();
        if (searchPhrase.length == 0)
            return;
    }
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("liveSearchResultsArea").innerHTML = xmlhttp.responseText;
            document.getElementById("liveSearchResultsArea").style.borderWidth = "1px";
            var liveSearchResultsAreaHeight  = 0;
            for (var i = 0; i < document.getElementById("liveSearchResultsArea").childNodes.length; i++){
                if (document.getElementById("liveSearchResultsArea").childNodes[i].nodeType == 3)
                    liveSearchResultsAreaHeight += 30;
            }
            document.getElementById("liveSearchResultsArea").style.height = liveSearchResultsAreaHeight;
            alert(document.getElementById("liveSearchResultsArea").innerHTML);
        }
    }
    xmlhttp.open("GET","getEntitiesData.php?isSingleEntityNeeded=" + isSingleEntityNeeded + "&searchPhrase=" + searchPhrase,true);
    xmlhttp.send();
}

And here's part of php file which return html with div's:
$responseHtml = "";
    $result = mysql_query($sql);
    if (mysql_num_rows($result) == 0){
	    $responseHtml = '<div class="liveSearchResultBox">Nieko nerasta</div>';
    }
    else {
	    while($row = mysql_fetch_array($result)){
		    $entityId = $row['entity_id'];
		    $entityName = $row['title'];
		    $entityPictureLink = $row['pictureLink'];
		    $responseHtml .= '<div class="liveSearchResultBox">' .
			    '<a href="#" onclick="javascript:getEntityData(' . "'" . $entityId . "', '" . $entityName . "', '" . $entityPictureLink . "'" . ')">' .
			    //'<div class="liveSearchResultPictureArea"><img class="liveSearchResultPicture" src="pictures/' . $entityPictureLink . '" alt="Failed to load image"/></div>' .
			    //'<div class="liveSearchResultDataArea">' . $entityName . ' ' . $entityPictureLink . '</div>' .
			    $entityName . ' ' . $entityPictureLink .
			    '</a>' .
			    '</div>';
		    $responseHtml = trim($responseHtml);
	    }
    }

  • 0

#2 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 14 August 2012 - 11:41 PM

The code looks good, i don't understand what is the problem, could you be more specific ?
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download