Issue with jQuery UI in Blogspot

Question

I'm trying to have a div appearing in a dialog using the jQuery-UI function. It will be a contact form in my blogspot site. However I keep getting the notorious 'Undefined is not a function' error. I searched a lot without eventually being able to address the issue and I have no idea about what's going on.

Below is a fiddle EXACTLY as in the blogspot code (even same id names). You can see that in the fiddle the code functions perfectly.

HTML:

<a id='emailform' href='#'>Click here!</a>

<div id='contform' style='background-color:red;width:200px; height:200px;display:none;'>Blablabla</div>

JS:

$(document).ready(function () {
    $("#emailform").click(
    function () {
        $("#contform").dialog();
    })
});

http://jsfiddle.net/mukL3hq8/2/

Any help will be greatly appreciated.

UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library.

Have you referenced Jquery in your blog project ? That is probably the only difference that would cause that. — vikingben, Dec 10 '14 at 21:20
Yes. It was the first thing I checked VERY carefully. Should I pay any attention to versions? I use 1.11.0for jquery, and 1.11.2 for ui — Arkoudinos, Dec 10 '14 at 21:23
Could you give the whole error ? That undefined is not a function should be followed by the function that is not defined. — vikingben, Dec 10 '14 at 21:24
awe, maybe this if you are using wordpress http://stackoverflow.com/questions/7975093/typeerror-undefined-is-not-a-function-evaluating-document — vikingben, Dec 10 '14 at 21:25
Here take a look (excuse me for the formatting): https://bpaste.net/show/c8938600b621 — Arkoudinos, Dec 10 '14 at 21:30
UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library. — Arkoudinos, Dec 11 '14 at 22:06

score 0 · Answer 1 · answered Dec 11 '14 at 07:24

0

I don't know why but I have found that jQuery sometimes has some trouble working with Blogger, what mostly solved the issue was wrapping it like this:

<script>
//<![CDATA[

     jquery here

//]]>
</script>

I find that blogger will sometimes encode some elements within my script and this will prevent blogger from doing so, thus the script is executed properly. Maybe it'll solve your problem as well.

answered Dec 11 '14 at 07:24

KreaTief

416
1
4
13

For a second I thought it could be... But no :( – Arkoudinos Dec 11 '14 at 21:52

score 0 · Accepted Answer · answered Dec 11 '14 at 22:34

Ok, issue tracked down. It seems that the problem caused by a duplicate 'include' of the jquery-ui library. The template I've used was making a second reference to a jquery-ui library (which was also an older one from what I've used) and caused a conflict. Removing the second reference just solved the problem.

Issue with jQuery UI in Blogspot

2 Answers2