We help IT Professionals succeed at work.

jquery ui autocomplete not working in internet explorer

monosyth
monosyth asked
on
2,964 Views
Last Modified: 2012-02-22
This was working just fine yesterday and for the past year, I then updated jquery ui, but then put it back, and it doesn't work in IE, it works in all other browsers though. Is there an error in here? I have changed nothing, so I'm not sure why it's not working today.

<script>
      $(function() {
      
            $.ajax({
                  url: "/scripts/jqueryui/dev/demos/autocomplete/titles.xml",
                  dataType: "xml",
                  success: function( xmlResponse ) {
                        var data = $( "titlename", xmlResponse ).map(function() {
                              return {
                                    value: $( "title", this ).text(),
                                    spanishvalue: ( $.trim( $( "titlespanish", this ).text() ) || "(no translation)" ),
                                    id: $( "titlenameId", this ).text()
                              };
                        }).get();

                        $( "#titles" ).autocomplete({
                              source: data,
                              minLength: 0,
                              select: function( event, ui ){
                        
                        $("#ListingTitleSpanish").val(ui.item.spanishvalue);
}                        
                        });
                        
                  }
            });
      });
      </script>
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
> I then updated jquery ui

and jQuery too (1.7.1) : http://code.jquery.com/

Author

Commented:
hmm i updated jquery,

but now see these errors:

Message: 'jQuery' is undefined
Line: 10
Char: 1
Code: 0
URI: http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.core.js


Message: 'jQuery' is undefined
Line: 10
Char: 1
Code: 0
URI: http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.widget.js


Message: 'jQuery' is undefined
Line: 10
Char: 1
Code: 0
URI: http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.position.js


Message: 'jQuery' is undefined
Line: 15
Char: 1
Code: 0
URI: http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.autocomplete.js

Author

Commented:
Nevermind that error. I had commented out one of the jquery files, then I put it back:

<script src="/scripts/jquery.js" type="text/javascript"></script>
<script src="/scripts/jqueryui/dev/jquery-1.7.1.js" type="text/javascript"></script>
 <link rel="stylesheet" href="/scripts/jqueryui/dev/themes/base/jquery.ui.all.css">
<script src="/scripts/jqueryui/dev/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="/scripts/jqueryui/dev/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/scripts/jqueryui/dev/ui/jquery.ui.position.js" type="text/javascript"></script>
<script src="/scripts/jqueryui/dev/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
put it before all others plugins using it, that's the rule!
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
last posted before your last one...

why two jQuery plugin?

<script src="/scripts/jquery.js" type="text/javascript"></script>
<script src="/scripts/jqueryui/dev/jquery-1.7.1.js" type="text/javascript"></script>

remove the first one

Author

Commented:
i did remove the first one, and then i got the errors, listed above.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
could you confirm your URL is http://www.weblisters.com ?

Author

Commented:
yup. it is.

Author

Commented:
hmm, ok, so the errors were there because I was pointing at a bad jquery file. so back to square one. works in FF, not in IE
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Sorry, I don't see the scripts anywhere in this page

Author

Commented:
The scripts aren't running on that page, its on the inside of my app

Author

Commented:
This is my page header - Works in FF/Mozilla but not IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Post Ad</title>
      
<script src="http://www.weblisters.com/scripts/jqueryui/js/jquery-1.7.1.js"></script>
<script src="http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.position.js" type="text/javascript"></script>
<script src="http://www.weblisters.com/scripts/jqueryui/dev/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>

<script>
      $(function() {
      

            $.ajax({
                  url: "/scripts/jqueryui/dev/demos/autocomplete/titles.xml",
                  dataType: "xml",
                  success: function( xmlResponse ) {
                        var data = $( "titlename", xmlResponse ).map(function() {
                              return {
                                    value: $( "title", this ).text(),
                                    spanishvalue: ( $.trim( $( "titlespanish", this ).text() ) || "(no translation)" ),
                                    id: $( "titlenameId", this ).text()
                              };
                        }).get();
                        

                        $( "#titles" ).autocomplete({
                              source: data,
                              minLength: 0,
                              select: function( event, ui ){
                                    
                        
                        $("#ListingTitleSpanish").val(ui.item.spanishvalue);
}                        

                        });
                        

                  }
            });
      });
      </script>


Then in my html:

<input id="titles" size="80" class="ui-widget" onClick="this.select()" />
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
so, here we go!
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
try something : put all your javascript at the end of your page, just before the </body> tag

Author

Commented:
hmm, nope that didn't work.

it's weird, because last week this was fine until I downloaded the latest version of jquery UI, then updated the jquery only. I then put old jquery back from my backup and it now doesn't work. I hadn't updated this page its on otherwise. it's really frustrating!
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
i figured it out on my own
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.