css/jquery conflict but cant find it

Question

Please see this page: http://www.i2mtest.com/advertenties/vergelijken Now, on the top right of the site there's a search box. But as you can see it looks ugly. On this page the normal and desired behavior can be seen: http://www.i2mtest.com/ (click on 'advertenties' to see the jquery effect).

What is going wrong on the first page? It looks like the css is not correctly loading and there's a jquery issue as well since the effect is not triggered on click of 'advertenties'.

Thanks!

Test the page using something like Firebug. You'll see a few errors. Start by addressing those. — Shawn Chin, Sep 20 '11 at 16:44

score 2 · Accepted Answer · answered Sep 20 '11 at 16:57

The only thing that I found is that you are using 2 version of jQuery on the not working page:

<script type="text/javascript" src="/script/jquery-1.6.2.min.js"></script>
<script src="../script/jquery-1.3.2.min.js" type="text/javascript"></script>

but on working page it's only one:

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

probably this is the problem:

enter image description here

score 0 · Answer 2 · answered Sep 20 '11 at 16:47

0

You have a couple javascript errors on the pages which are most likely causing the script that renders that drop not to execute. You should fix all the other errors first and see if that fixes the issue.

answered Sep 20 '11 at 16:47

Vinnie

58
3

score 0 · Answer 3 · answered Sep 20 '11 at 16:49

0

You are getting a script error because the div with id dialog cannot be found. This is because you haven't wrapped your jquery code in a document.ready(). So the element does not yet exist. Try something like this instead.

$(document).ready( function() {
  // increase the default animation speed to exaggerate the effect
  $.fx.speeds._default = 500;
  $(function () {
      $("#dialog").dialog({
      ...
  });
});

answered Sep 20 '11 at 16:49

mrtsherman

39,342
23
87
111

it's wrapped on both pages `$(function () {` – Samich Sep 20 '11 at 16:53
Just because its abstracted doesn't mean the dom has loaded. Look at your error in a debugger. It clearly says #dialog doesn't exist yet. – mrtsherman Sep 20 '11 at 17:06
It says that `$('#dialog').dialog` not exist, it means that jQuery UI no initialized! – Samich Sep 20 '11 at 17:07

score 0 · Answer 4 · edited May 23 '17 at 10:34

0

In that page, i got a "Uncaught TypeError: Object # has no method 'dialog'" in firebug. Please refer this Jquery Dialog Problem

edited May 23 '17 at 10:34

Community

1
1

answered Sep 20 '11 at 16:51

devtut

699
4
17

score 0 · Answer 5 · answered Sep 20 '11 at 16:57

0

You have multiple "searchtype_div"s in the borked version that just don't exist in the correct version. Maybe you needed to wrap them in come if statements to determine their inclusion?

answered Sep 20 '11 at 16:57

Matthew Davis

96
1
7

css/jquery conflict but cant find it

5 Answers5