Dropdown Not Populating From Ajax Post Call due to java script conflict

Dear ,

Drop Down Not Populating From Ajax Post Call due to java script conflict , But , if some dummy
option of Select control is filed {A,B,C } , on selection it shows data from ajax call .Kindly check the
images attached and the code embedded also .  


(function($){
		/* Complete jquery code must be wrapped under this function
			It is a good practice to include this complete code in a sepearte js file and include it after all other referred files in the document
			(I included this myjs.js just before </html>, or we can in the footer of file....  Programmers tend to to this for lesser conflict )
			If you are creating another seperate file better to use a another symbol in place of $ for this function
		*/

	$(document).ready(function(e) {
		//Best practice is to add this document.ready function only once in the file. 
        // get your ajax values before initializing the selectbox plugin 
        var fk_i_id = 0;	
		if(fk_i_id === 0)
		{
		$.ajax({
				 type:'post',
				 url:'../api1.php?getlist=categorya',
				 datatype: 'json',
				  data: {id:fk_i_id},

				  success: function(data){
				  var opts =  JSON.parse(data);
					 
				 $('#s2').empty();
				   $.each(opts, function(i, d) {
                     		   $('#s2').append('<option value="' + d.pk_i_id + '">' + d.s_name + '</option> ').html();
                                 });

			}

			});
		}    
         
         //  Inititalize first selectbox
         $("#s22").dropdownchecklist( { 
         	forceMultiple: true, 
         	onComplete: function(selector) {
         		var values = "";
         		for( i=0; i < selector.options.length; i++ ) {
         			if (selector.options[i].selected && (selector.options[i].value != "")) {
         				if ( values != "" ) values += ";";
         				values += selector.options[i].value;
         			}
         		}
         		alert( values );
         	}, 
         	onItemClick: function(checkbox, selector){
         		var justChecked = checkbox.prop("checked");
         		var checkCount = (justChecked) ? 1 : -1;
         		for( i = 0; i < selector.options.length; i++ ){
         			if ( selector.options[i].selected ) checkCount += 1;
         		}
         		if ( checkCount > 3 ) {
         			alert( "Limit is 3" );
         			throw "too many";
         		}

			}			
           
        });
 
        
		//  Inititalize second selectbox

        $("#s2").dropdownchecklist( {icon: {}, width: 750 } );
		
                  [embed=file 933796]
	 
});
			
})(jQuery);
// This (jQuery) callback is essential for making $ function work properly

Open in new window

2.png
3.png
Puneet AroraFounderAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ahmed MerghaniSoftware EngineerCommented:
Can you display the returned value of ajax?? just after line no. 20 add:
alert(data);

Open in new window

0
Puneet AroraFounderAuthor Commented:
Data is coming 1000% , if you need screen shot I can send it
0
Ahmed MerghaniSoftware EngineerCommented:
Yes kindly print it.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Puneet AroraFounderAuthor Commented:
Dear Ahmed Merghani

[{"FilterNameID":"4","FilterName":"Postet By","FilterValue":"Authorised Dealership","CategoryAID":"12","CategoryBID":"18"},{"FilterNameID":"4","FilterName":"Postet By","FilterValue":"Used Car Dealers","CategoryAID":"12","CategoryBID":"18"},{"FilterNameID":"4","FilterName":"Postet By","FilterValue":"Owner","CategoryAID":"12","CategoryBID":"18"},{"FilterNameID":"5","FilterName":"Fuel Type","FilterValue":"Petrol","CategoryAID":"12","CategoryBID":"18"},{"FilterNameID":"5","FilterName":"Fuel Type","FilterValue":"Diseal","CategoryAID":"12","CategoryBID":"18"},{"FilterNameID":"5","FilterName":"Fuel Type","FilterValue":"CNG","CategoryAID":"12","CategoryBID":"18"},{"FilterNameID":"5","FilterName":"Fuel Type","FilterValue":"LPG","CategoryAID":"12","CategoryBID":"18"}]
0
Puneet AroraFounderAuthor Commented:
I was trying with this json data populate dropbox having check boxes based on <script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>  library .

[{"FilterValue":"Petrol"},{"FilterValue":"Diseal"},{"FilterValue":"CNG"},{"FilterValue":"LPG"}]

The data is coming as above from ajax call , but is not rendered in dropdown , I don't  why , please help
in this case , I m using bootstrap-multiselect.js.
 
 function callC(FilterName) {
    $.ajax({
            type: "POST",
            url: "./api1.php?getlist=filtervals&id="+FilterName,
            contentType: "application/json; charset=utf-8",
             dataType: "json",
             
              success: function(result) {
             //var myHtml = '<p>' +FilterName+'<p> </br>';      //loop var categories = [];
            var myHtml = '';
            for (var i = 0; i < result.length; i++) {
                 var item = result[i].FilterValue ;
                 var myHtml =  '<option value="' + item + '">' + item+ '</option>';
                 //myHtml += "<li>"   +item + "</li>";
            }  
                
                  alert(myHtml);
                 $("#p10").append(myHtml);     
            }
    });
}

Open in new window


<select id="p10" multiple="multiple" name = "p10">
                            
                                              
                                        </select>

Open in new window

0
Ahmed MerghaniSoftware EngineerCommented:
Where do you call function "callC(FilterName)" ??
0
Puneet AroraFounderAuthor Commented:
I call this function in document ready function
0
Pravin AsarPrincipal Systems EngineerCommented:
Look at the comment trails, looks like your AJAX call is working fine. You See to have difficult with select box population.

Hence put together simple example.

Your issue may be caused by conflict in Jquery library versions. Are you using different versions ?
In that case, look at

https://api.jquery.com/jquery.noconflict/
select.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Puneet AroraFounderAuthor Commented:
Thanks , the main reason was javascript conflict , I was able to solve it earlier , any way thanks for the
support !
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.