Member Avatar for konradhoppe

Hi community,

I am struggeling to get an ajax request to work. The main issue here is that I can't fill in a select box from jquery for some reason. I was working before without jquery and used the method innerHTML() to paste options into the box, which worked fine, but now it's stuck. Here is a snippet of my code

function showResults(source){
		var xmlData = $.ajax({
			url:source,
			async:false
		}).responseXML;
		
		var beans = xmlData.getElementsByTagName("quote");
		
		var numOfOptions = beans.length;
		var optStr = "";
		for(var i=0; i<numOfOptions; i++){
                       var symbolStr = beans[i].getElementsByTagName("symbol")[0].textContent;
			
			optStr += "<option class='optionLine' value='" + symbolStr + "'>";
			optStr += "[" + symbolStr + "]</option>";
			
			
		}
		$('#list1').html(optStr);
	
	}

I call showResults() on window.onload and debugging with firefox shows me that everything works fine, but the insertion, the browser just steps over the last line without inserting anything. The particular html code is

<select id="list1" size="6" class="box190" multiple="multiple"></select>

I am trying now since yesterday various variations, but none of them worked.
Can anybody help me?

Thanks in advance!

  • 2 Contributors
  • 3 Replies
  • 193 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by konradhoppe
Member Avatar for urtrivedi

what is the source type, is it php or any other process page?

I have done using php-jquery and post method

<?php 		
	
 	if(trim($_POST['type'])=='batch')
	{
	 	//you may user $_POST['batchid'] variable to filter result
	 	//onthe basis of condtion you can echo your select element here
		echo "<select>";
		echo "<option value=''>--select-</option>";
		echo "<option value='1'>one</option>";
		echo "<option value='2'>two</option>";
		echo "<option value='3'>three</option>";				
		echo "</select>";
		exit;
	}
	else
	{

	
	
?>
<html>
<head>
<script type="text/javascript" src='../../modules/jquery/jquery.js'></script>
</head>
<form name='frm' id='frm' action="a.php" method="POST" onsubmit="return val();">
     <table>
    

     <tr><td>   <strong>Batch</strong> *</td>
		<td>
		<select name=sel id=sel>
	    <!--option value=''> All</option-->		
		<option value='b1'> batch 1</option>
		<option value='b2'> batch 2</option>
		<option value='b3'> batch 3</option>				
		</select>
		</td>
        </tr>
        
        
        
      <tr><td>   <strong>Mobile</strong> *</td>
		<td ID=loadstudents>
		&nbsp;</td>
        </tr>

        </table>
        <input type="submit" value="submit" oncddlick="return val();" />
    </form>


<script type="text/javascript">

 

function loadall(){

    bt=document.getElementById("sel").value;
	
	if(bt=='')
		return;
	
	$.post("<?php echo $_SERVER['PHP_SELF'];?>",{batchid:bt,type:"batch"}, function(data){

 	document.getElementById("loadstudents").innerHTML=data;
}) ;

}

$('#sel').change(loadall);

loadall();
</script>

    </html>
    
    <?php
    }
    ?>
Edited by urtrivedi because: n/a
Member Avatar for konradhoppe

Thanks for the fast reply, I am using jsp in the background. I first used plain javascript, but the httpXMLRequest to get the xml from the server was not working in chrome, so I searched for cross browser solutions which led me to jQuery. But now I have the problem, that the content is not pasted into the select box. The request works perfectly and I have in the end the whole content in the optStr variable. the only line which doesn't work is

$('#list1').html(optStr)

and I really don't see why. When I use an easier example without the ajax request, but just pasting something in the selectbox, it works. This is what I don't understand. Hope you can help me.

Member Avatar for konradhoppe

Hi again,
I could solve it now. Instead of using $.ajax, I use

$.get(source, function(data){
    .....
}

and write the whole function including the insertion into the function block. This works now finally.

All the best

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.