There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery calculation gets reloaded. I attempted to move the jQuery code inside the AJAX callback but that didn't resolve the issue either. What steps should I take next?
This is my current code:
$(window).resize(function() {
var contentHeight = $(".news-content").height();
$(".adjusted-content-height").css("height", contentHeight);
}).resize();
Here is my HTML structure:
<div class="col-sm-4 padding-zero adjusted-content-height">
<form action="ajax/result.php" id="search-form">
<div class="search-field">
<input class="search-input" type="text" placeholder="Search..." name="search-value">
<input class="submit-button" type="submit" value="Search">
</div>
</form>
<div class="downloads">
<h4>Downloads</h4>
<ul>
<li>
<a href="#">- PDF Example 1</a>
</li>
<li>
<a href="#">- PDF Example 2</a>
</li>
<li>
<a href="#">- PDF Example 3</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-8 padding-zero" id="result"></div>
I also tried implementing AJAX with the following code:
$( "#search-form" ).submit(function( event ) {
event.preventDefault();
var $form = $( this ),
searchValue = $form.find( 'input[name="search-value"]' ).val(),
url = $form.attr( "action" );
var posting = $.post( url, { searchValue: zoekvalue } );
posting.done(function( data ) {
$(window).resize(function() {
var contentHeight = $(".news-content").height();
$(".adjusted-content-height").css("height", contentHeight);
}).resize();
$("#result").html(data);
});
});
I attempted moving the resize function outside to trigger changes without screen resizing, but unfortunately, this didn't have any effect either.