CODEWITHSUNDEEP
phpjqueryajaxjquery-ui-autocomplete
Richard van Hees
Richard van Hees

Reputation: 101

Uncaught TypeError: Object #<Object> has no method 'autocomplete'

I got a problem and I hope you guys can help me solve it.

I have this function in which I want to use autocomplete. With the help below, I managed to remove the error but now it just doesn't work when using Ajax. Like I wrote before, the bottom script (inbox.php) is loaded inside the top script (home.php).

I found out that the autocomplete script works if I open the page seperately (so just going to localhost/inbox.php), but when going through Ajax, it loses this. That's why I think now, that the problem is in the Ajax script, which can be found at the last part of the examples.

home.php (main page)

<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="homeV2.css" type="text/css" media="screen">
    <script type="text/javascript" src="javascript/index.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
    <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">

    <title> 
        Homepage Westpop Intranet 
    </title>

    <script>
        window.onload = function()
            {
                showHome(<?=$gid?>);
                refreshChat();
                countdown();                                
            }           
    </script>



</head>

inbox.php (this page is loaded inside home.php, using Ajax)

<script type="text/javascript">
   var names = ['hi', 'bye', 'foo', 'bar'];

    $(document).ready(function() {
        $("#inputNaam").autocomplete({
          source: names
        });
    });
</script>
............ //some other script
    </div>
            </div>
        <div id='profielNieuwBericht'>
            <div id='nieuwBerichtKop'>
                Nieuw bericht
            </div>
            <table>
                <tr>
                    <td>Aan: </td>
                    <td><input type='text' class='inputNieuwBericht' id='inputNaam' /> </td>
                </tr>
                <tr>
                    <td> Onderwerp: </td>
                    <td> <input type='text' class='inputNieuwBericht' id='inputOnderwerp' /></td>
            </table>
            <textarea id='BerichtTextarea'></textarea></br>
            <input type='button' id='BerichtManagementButton' value='Stuur' />
        </div>
    </div>

And this is the Ajax part. This script is being called when clicking on a button in home.php (link not included, but is called through onClick='showInbox(id)').

function showInbox(id){
if (id==''){
    document.getElementById("middenpag").innerHTML="";
    return;
}

if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}
else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("middenpag").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","inbox.php?id="+id,true);
xmlhttp.send();

}

I hope you guys can see what I am doing wrong here! Thank you :)

Upvotes: 2

Views: 6067

Answers (2)

user2179351
user2179351

Reputation: 11

I have a solution from that problem.

In my program, the problem is duplicate jQuery in template.tpl file

**<script type="text/javascript" src="autocomplete/jquery.min.js"></script>**
<script type="text/javascript" src="autocomplete/jquery.tokeninput.js"></script>

<link rel="stylesheet" href="autocomplete/token-input.css" type="text/css" />
<link rel="stylesheet" href="autocomplete/token-input-facebook.css" type="text/css" />
<link rel="stylesheet" href="../../css/ui.all.css" rel="stylesheet" />
<link rel="stylesheet" href="../../css/styler.css"> 

**<script type="text/javascript" src="../../jsd/jquery-1.3.2.js"></script>**
<script type="text/javascript" src="../../jsd/ui.core.js"></script>
<script type="text/javascript" src="../../../js/ui.datepicker.js"></script>

I add new, jquery.min.js for autocomplete in my template,

...
<script type="text/javascript" src="autocomplete/jquery.min.js"></script>
...

and I found problem that (.. bla bla object#() has no method... ), and the point of problem is this ...

...
<!-- Trouble Autocomplete, so I disable this code -->
<-- <script type="text/javascript" src="../../jsd/jquery-1.3.2.js"></script> -->
...

so I disable that link, and it works.

Upvotes: 1

Patrick M
Patrick M

Reputation: 10989

As the comments have called out, don't include more than one jQuery library. Pick the one version you want/need and use that. You're including jQuery-ui version 1.10.0, which is in fact the latest and only compatible with jQuery core 1.6+, so take out your 1.3.0 include.

You're calling the custom autocomplete() method defined in home.php from the onkeydown inline event. This is unnecessary, as is the entire autocomplete() method you have declared. Going from the basic autocomplete example, the only code you need to do is in the following:

profile.php html

<input type="text" class="inputNieuwBericht' id="inputNaam' />

In your example, i see you also missed the closing tag on the input element. Also, if you're submitting this as part of a form, you're going to want to fill out the name='' attribute for your inputs, or the server script that handles the form submission isn't going to be able to get the variables out of the request.

javascript array declaration - if you're only using this in profile.php, then put it there. If you're reusing the same autocomplete options between different included files, then put it in home.php. Or put it in a separate .php file which you can include_once it from whichever file ends up using it.

<script type="text/javascript">
   var names = ['hi', 'bye', 'foo', 'bar'];
</script>

javascript autocomplete binding - just do this once per autocomplete, do use the document.ready handler, and don't try to use it with the onkeydown inline event.

<script type="text/javascript">
    $(document).ready(function() {
        $( "#tags" ).autocomplete({
          source: names
        });
    });

And you're done. Finally, as others have also mentioned, don't post screenshots of your code. Copy/paste your code, indent it so it formats as code, and indicate which line the error occurs on. Also, you should have included the bit of code where profile.php gets included. Your description of how it works is insufficient.

The bottom picture (profiel.php) is loaded inside the script in the top picture (home.php).

This could be an iFrame, a php include or require, any number of javascript/ajax loads etc., all of which have different consequences for how the code would need to work.

Upvotes: 1

Related Questions