When Category is selected Search Form shows field box momentarily

I have been working on a Search Form, that has a small issue.
In the Form table, when a Category is selected, the Form shifts momentarily.
What is taking place is the Sub-Category table section momentarily
shows a small sub-category field box, and then disappears (which shifts the Form).
I’m trying to remedy that issue, so that the Form doesn’t shift, and the
small sub-category field box doesn’t appear.

For a visual, I’ve attached an image showing a series of images,
the top image(1st) is before a Category selection, the 2nd shows the Category drop-down, the 3rd shows what happens upon selection (the field box shows), the 4th shows the that the field box disappears. (this may be a jQuery issue - not sure)

Any ideas will be greatly appreciated.

We can’t really help you debug a picture, but by the sound of it, it’s taking a second for JS to override some default CSS.

1 Like

Thanks for your reply and your plausible theory.

Here is the Form code. Any suggestion regarding how to remedy this will be appreciated:

<script src="js/select-widget-min.js"></script>
<form method="get" action="../search.php" name="myForm" />
<table class="table1">
<tr>
<th><font size="3" color="#d4936a" font-face="century gothic">Select Category</font></th>
<th><font size="3" color="#d4936a" font-face="century gothic">Enter Search Words</font></th>
<th><font size="3" color="#d4936a" font-face="century gothic">(Optional)</font></th>
</tr>
<tr>
<td>
<th1><select size="1" name="channel" class="dropdown_box" /></th>
<option value="All">ALL</option>
<option value="1">W2V</option>
<option value="4">Channel-2</option>
<option value="6">Channel-4</option>
</select>
</td>
<td>
<th1><input class="TextBox" id="keyword" name="keyword" value="SEARCH WORDS" style="background:#00ff00 border:#000fff" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#ffffff';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Enter Search Words')" value="" /></th>
</td>
<td>
<div>
<th1><select size="1" name="sub_category" class="dropdown_box" /></th1>
<option value="All">SELECT</option>
</div>
</select>
</td>
<td><input type="submit" value="VIEW"/>
</td>
</tr>
</table>
</form>
<script>
$(document).ready(function(){
$('select[name=channel]').selectWidget({
change       : function (changes) {
var channel_id = changes;
var Parent = $('select[name=sub_category]').parent();
Parent.html('');
Parent.html('<select name="sub_category"><option value="All">Sub Category</option></select>');
$.ajax({
type: "POST",
url: "/ajax.php",
data: "channel_id="+channel_id,
dataType: 'json',
statusCode: {
200: function(data) {
for(i = 0; i < data.length; i ++) {
$('select[name=sub_category]').append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
}
GrabSubChannel();
}
}
});
return changes;
},
effect       : "slide",
keyControl   : true,
speed        : 200,
scrollHeight : 100
});

GrabSubChannel();
});

function GrabSubChannel ()
{
$('select[name=sub_category]').selectWidget({
change       : function (changes) {
 return changes;
 },
effect       : "slide",
keyControl   : true,
speed        : 200,
scrollHeight : 100
});
}
</script>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.