Page Refreshing when loading lisbox

[psun03Participant]

I am trying to populate data to listbox from a textbox and button. When I type something in the textbox and click the submit button, i call a php page and loads an xml data and converts to a json format. The listbox is suppose to populate with the set of data. However, when I do click the submit button the page reloads and the data in the list box disappears. I am not sure why this is happening.. code below

html:

<div id="wrapper">
	<div id="page-wrapper">
		<div id="page">
		  <div id="content1">
		
			  <form id="search">
			<label for="search">Search For:</label>
			<input type="text" id="txtSearch" name="q">
				  <input style='margin-top: 20px;' type="submit" value="Search" id="btnSubmit"/>
		</form>
		<div id="search_grid">
		</div>
		<div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
        </div>	
		</div>
            <div id="content2">
					<div id="dl_grid">	
		</div>
			
			
			
			</div>
</div>

jscript code:

<script type="text/javascript">
        $(document).ready(function() {
          
			//create jqxButton widget
			$("#btnSubmit").jqxButton({ width: '150'});
			//create jqxListBox widget
			$("#btnSubmit").bind('click', function() {
				//Do som
				
				var textValue = $("#txtSearch").val();
				
				var url = "include/showsearch.php?show_name='" + textValue + "'";
				var source =
                	{
                    	datatype: "json",
                      type:"POST",
                    	datafields: [
                        	{ name: 'name' },
                        	{ name: 'id' }
                    	],
						url:url
                	};
                var dataAdapter = new $.jqx.dataAdapter(source);
				dataAdapter.dataBind();
				//crate jqxList widget
				$("#search_grid").jqxListBox({source: dataAdapter,selectedIndex: 0,theme:'classic',displayMember: "name", valueMember:"id",itemHeight:70,height:'200',width:'250'});
			});
        });
    </script>

thanks in advance

[DimitarParticipant]

Hello psun03,

This occurs because you are clicking on a submit button inside a form, which triggers its action. Please change your button to:

<input style='margin-top: 20px;' type="button" value="Search" id="btnSubmit"/>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[psun03Participant]

thanks

[Author]

Posts