# Solved: Drag and Drop dead



## JiminSA (Dec 15, 2011)

I'm writing my own alternative to Captcha using html5 and javascript. The stand-alone version works fine but when I put it into a web page it falls over dead.
I've reached the hair-tearing stage and can't see the wood for the trees
Any help appreciated!


----------



## JiminSA (Dec 15, 2011)

This is the relevant Javascript.

```
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });

$( "#droppable" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function( event, ui ) {
	$( this )
	  .addClass( "ui-state-highlight" )
	  .find( "p" ).css({"color":"red","border":"2px solid red"})
		.html( "Unlocked!" );
		document.getElementById('submit').disabled = false;
		document.getElementById("draggable").src="images/unlocked.png";
  }
});
});

</script>
```
 Here's the styling ...

```

```
and here's the html ...

```
[IMG]images/krugerrand.png[/IMG]

[IMG]images/Bucket.png[/IMG]
```


----------



## ckphilli (Apr 29, 2006)

Hiya Jim.

Couple of questions...

1) What's the error you're getting? EDIT: Got this from Firebug. Tells me that something isn't loading correctly. 

TypeError: $(...).draggable is not a function


$( "#draggable" ).draggable({ revert: "valid" });

2) You didn't include the head, so need to see what scripts you're loading. I have had some things blow up because an existing page was using an older version of what the new script needed. EDIT: You included the problem page, so I got it from there. Take a look at "js/modernizr-1.5.min.js", you're loading it in the new page, but not in the working page.


----------



## JiminSA (Dec 15, 2011)

Thanks for coming in on this Chris:up:
here's the head section of the working page...

```
<head>
  <title>Contact</title>
  <meta charset="utf-8">
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
<!--******************************************************************** Not A Bot Script ****************-->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#draggable { width: 66px; height: 60px;float:left}
#draggable2 { width: 64px; height: 63px;float:left}
#droppable { width: 128px; height: 119x;}
</style>
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
<script type="text/javascript">
function validateForm1()
{
var a=document.forms["contact"]["name"].value;
if (a=="Your Full Name")
  {
  alert("Woops! Your Full Name must be filled out");
  return false;
  }
var b=document.forms["contact"]["email"].value;
if (b=="Your email")
  {
  alert("Woops! Your email Address must be filled out");
  return false;
  }
var c=document.forms["contact"]["phone"].value;
if (c=="Your Phone Number")
  {
  alert("Woops! Your Phone Number must be filled out");
  return false;
  }
var e=document.forms["contact"]["query"].value;
if (e=="Comments ...")
  {
  alert("Woops! Your Message must be filled out");
  return false;
  }
return true;
}
</script>
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
	<script type="text/javascript">
 	<!-- hide from none JavaScript Browsers 

	Image1= new Image(450,450)
	Image1.src = "images/1.jpg"

	Image2= new Image(450,450)
	Image2.src = "images/2.jpg"

	Image3= new Image(450,450)
	Image3.src = "images/3.jpg"

	Image4= new Image(450,450)
	Image4.src = "images/4.jpg"

	// End Hiding -->
	</script>
  
<script type="text/javascript">
$(window).load(function() {
	$(".loader").fadeOut("slow");
})
</script>
```
and this link

```
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
```
is solid...


> What's the error you're getting?


not receiving a visible error just the black-circle/diagonal line indicating not-droppable
I'm just wondering if other js on the page may be interfering?


----------



## ckphilli (Apr 29, 2006)

What's the desired behavior? I dropped all three into the comments box with no issue. Using Chrome and Firefox. However, in IE9 I got the same error as you.

Could this guy be having problems?


----------



## JiminSA (Dec 15, 2011)

Haha Nice one Chris Now why didn't I think of that ??
the object is to get the coin into the bucket as per the info-tip ...
It should then unlock the submit button for the form, but I love your improvisation!


----------



## colinsp (Sep 5, 2007)

Jim

It doesn't work for me in FF, Opera, Chrome, Safari or IE and in Firefox on a wide monitor the markup is broken.

Loads more work by the look of it.


----------



## ckphilli (Apr 29, 2006)

JiminSA said:


> Haha Nice one Chris Now why didn't I think of that ??
> the object is to get the coin into the bucket as per the info-tip ...
> It should then unlock the submit button for the form, but I love your improvisation!


I see...chuckle chuckle.

Try moving this code to your head, just like your working model.



> $(function() {
> $( "#draggable" ).draggable({ revert: "valid" });
> $( "#draggable2" ).draggable({ revert: "invalid" });
> 
> ...


----------



## JiminSA (Dec 15, 2011)

yup tried that - no joy!


----------



## JiminSA (Dec 15, 2011)

> Firefox on a wide monitor the markup is broken.


thanks for the heads up Colin - and it's a mystery as to why it does that - I've spent a lot of time investigating and can find no solution!


----------



## ckphilli (Apr 29, 2006)

Jim- the error I posted above comes about because something isn't loading or conflicting. I would remove all scripts except for the scripts on the working one, and then add them back in one at a time until it breaks.


----------



## JiminSA (Dec 15, 2011)

Thanks for the advice Chris I kinda figured it would be a conflict, but never thought to exclude all and add back in one at a time - thanks mate I'll tackle that tomorrow - it's approaching my bed time in SA


----------



## colinsp (Sep 5, 2007)

Are you running your jQuery in no conflict mode?


----------



## JiminSA (Dec 15, 2011)

I have never come across that facility before Colin! Do tell me more...


----------



## ckphilli (Apr 29, 2006)

I've never done it, personally. I try to find the conflict and resolve the issue. Just seems like a bandaid, but I obviously can't speak to it.


----------



## colinsp (Sep 5, 2007)

If you are running different JS alongside jquery you can sometimes have issues with passing control back to jQuery. See https://api.jquery.com/jQuery.noConflict/


----------



## JiminSA (Dec 15, 2011)

Much obliged Colin! 
Still haven't resolved the FF problem! Most frustrating!


----------



## JiminSA (Dec 15, 2011)

I don't think there can be a conflict within the various js libraries, as I have replicated the javascript in the stand-alone version (all except the loader script) and it still works perfectly! Will put the loader in and see what transpires... No loader is fine ... Now what!


----------



## colinsp (Sep 5, 2007)

Jim

The page is showing 2 div's with and id of main, you can't have 2 id's with the same name on a page, make them classes or give them unique names. The first is being called by your loader.

You also have an error in this code an extra set of quotes


```
<form name="contact" class="form_settings" action="contact.php?id=agb6g4fs3ofggcebhae4cqcvn1"" method="post" onsubmit="return validateForm1()">
```
It is always worth viewing the source in your browser., Firefox shows any error lines in red.


----------



## colinsp (Sep 5, 2007)

You are also declaring this js twice


```
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
```


----------



## JiminSA (Dec 15, 2011)

Yes I use the same div names on my loader page (which dissolves away after load) as I do in the main script. I changed the loader div name and tried it again in FF - no effect...


----------



## JiminSA (Dec 15, 2011)

> You are also declaring this js twice


Yes thanks I noticed and corrected that and also the jquery-min duplication! Still no joy!


----------



## JiminSA (Dec 15, 2011)

> Much obliged Colin!
> Still haven't resolved the FF problem! Most frustrating!


Sorted the FF problem by using clear:both css in a div, right after my page load div, seems FF must have treated the second "main" as a parent div or whatever...


----------



## DorisMartin (Dec 16, 2013)

JiminSA said:


> This is the relevant Javascript.
> 
> ```
> <script>
> ...


----------



## DorisMartin (Dec 16, 2013)

Thanks for this reply....one of my friend is suffering from same problem. Hope it will help to him. Thsnk you very very much for this one. :up:


----------



## JiminSA (Dec 15, 2011)

Using Chrome's Dev Tools (F12) I see an error in the javascript (pic attached) - anyone know what this means??
I only get this in the web-page NOT in the stand-alone, which indicates that this is the problem area...

and Doris thanks for your input - hopefully we'll get a resolution...


----------



## ckphilli (Apr 29, 2006)

Jim  That's the same error I posted a few replies up. It means that something is happening with your jquery load...ie a conflict. In other words, the browser can'tr determine what .draggable means. Again, there is something in one of the scripts you are loading after the first Plus, you are loading .min twice and the second one is probably an older version. What you are going to have to do is to find out where the conflict is and remove or add the applicable method.


----------



## colinsp (Sep 5, 2007)

Look at the validation results now too.

http://validator.w3.org/check?verbose=1&uri=http://wip.bespoke-webwork.com/Anna/contact.php

http://jigsaw.w3.org/css-validator/...tp://wip.bespoke-webwork.com/Anna/contact.php


----------



## JiminSA (Dec 15, 2011)

But what confuses me is that I have a) cleaned up duplicate js links and b) simulated the javascript exactly in the stand-alone script which doesn't produce any error - I think I must first clear my html errors as Colin implicitly suggests and see what happens


----------



## colinsp (Sep 5, 2007)

You still have the extra set of quotes in your form code.


----------



## JiminSA (Dec 15, 2011)

> You still have the extra set of quotes in your form code.


 Right... html errors now cleared ... and unfortunately hasn't corrected the Drag and Drop ...


----------



## JiminSA (Dec 15, 2011)

> That's the same error I posted a few replies up.


yes Chris and it's disappeared since I cleared up one of the css errors - #droppable had a height of 60x instead of 60px.


----------



## JiminSA (Dec 15, 2011)

Well the saga rolls on... I have what appears to be just a warning about a deprecated js instruction deep inside the jquery (something called adblock_start_common). But what intrigues me is that it refers to "picreplacement" in a comment - which may well be indicative, I really don't know I've attached a pic of the F12 (enjoy the beer!)


----------



## ckphilli (Apr 29, 2006)

Getting this now, I would comment the line out(or change it) and see if the drop works.

Uncaught TypeError: Cannot set property 'defaultValue' of null

Line 137:



> document.getElementById("query").defaultValue="Comments ...";


Possible change:



> $('#query').val('Comments');


----------



## ckphilli (Apr 29, 2006)

PS, you're still loading .min twice.

At the top...

At the bottom...


----------



## JiminSA (Dec 15, 2011)

> PS, you're still loading .min twice.


Thanks Chris (apologies!) - missed that!
Still doesn't work yet...


----------



## JiminSA (Dec 15, 2011)

> Getting this now, I would comment the line out(or change it) and see if the drop works.


Yes I had to insert the value into the textarea with js because apparently it's a no-no in html to have a value= ... for a form textarea.
It can't be left out conveniently and I would prefer to leave it in.
I think the error has no effect on the drag and drop though, because it was not performing way before that update.
I rather think js doesn't like to examine an element created elsewhere in the html by another js script. Is that the case?

Sorry I changed it to

```
$('#query').val('Comments ...');
```
 but it still throws the error - I will take it out and see what develops...

It's gone back to the "picreplacement" flagged error of earlier


----------



## ckphilli (Apr 29, 2006)

JiminSA said:


> *I rather think js doesn't like to examine an element created elsewhere in the html by another js script. Is that the case?*


I've done things like this before, as long as the order is good...should be fine.


----------



## JiminSA (Dec 15, 2011)

It turns out that the effect I desired in the html form for the textarea was possible without the js injectiom, so I shall leave it out permanently ... now I'm very curious about the picreplacement scenario - any ideas?


----------



## ckphilli (Apr 29, 2006)

If you are talking about the warning, I wouldn't sweat it too much. Here's more material to read if you wish...

http://stackoverflow.com/questions/...-please-use-the-standard-event-preventdefault


----------



## JiminSA (Dec 15, 2011)

cool - but it really looked the part for a while... back to the drawing board!


----------



## ckphilli (Apr 29, 2006)

I think you're on the right path, looks like you're building the not a bot page up until it breaks. If I had the environment (php) and the time I'd help more.  

If I had to guess, I'd say it has something to do with one of the little one off scripts at the bottom of the page. But it's hard to say without rebuilding the way you are.


----------



## JiminSA (Dec 15, 2011)

Thanks for coming to the front in time of need Chris - much appreciated! I'll crack it if it kills me!


----------



## ckphilli (Apr 29, 2006)

JiminSA said:


> Thanks for coming to the front in time of need Chris - much appreciated! I'll crack it if it kills me!


No worries, I'll keep checking in Jim.


----------



## JiminSA (Dec 15, 2011)

Using Chris's strip and build methodology, I eventually found it!
The menu has js scripts which conflict with drag and drop. So I dropped them built a look-alike for the menu on the contact page which doesn't do the fancy slide, but the client will live with that and now it's doing what I wanted:up:
Thank you everyone for your input on this thread! Much appreciated
Check it out...


----------



## colinsp (Sep 5, 2007)

Jim

Sorry mate you have a bit more work to do with the menu. In Firefox it is horrible flickering and overlaying one tab on another with unreadable text.

Well done getting the JS working I did say it was a conflict . Did you try the no conflict mode of jQuery.


----------



## JiminSA (Dec 15, 2011)

FF seems to be taking over where IE left off in terms of being the browser to "cater for"! Thanks for the heads up Colin!
Haven't tried the no conflict mode in jquery yet - but will do so now and see what happens - will report back!


----------



## JiminSA (Dec 15, 2011)

How's it look in FF now Colin? My css had an irrelevant position:absolute, which FF didn't like so I took it out!


----------



## JiminSA (Dec 15, 2011)

> Did you try the no conflict mode of jQuery.


to tell you the truth, it looks as if I must isolate specific js vars to "rename" and I just don't have a) the expertise and b) the inclination to go searching and will go with what I've gyppo-ed!


----------



## colinsp (Sep 5, 2007)

Jim

Fine now. I have Firefox, Opera, Safari, Chrome and IE all on my PC and view pages that I create in all of them to ensure that everything looks and acts correctly. I then follow this up on my Mac in Firefox, Safari and Chrome to make sure as well as checking it on my tablet and phone. Even then you cannot be certain that you have ALL bases covered but you have the vast majority of common users.


----------



## JiminSA (Dec 15, 2011)

Thanks so much for your help and concern Colin, I truly appreciate it!


----------



## ckphilli (Apr 29, 2006)

Glad you got it fixed Jim! Good job!

One note...and this is just my ocd acting up...but in the menu up to...on hover...the word isn't centered in the background, there's more space on the bottom than the top. Just constructive and it could be just bothering me...but I thought I'd spit it out anyway.


----------



## JiminSA (Dec 15, 2011)

Thanks Chris! Yes that irks me as well will sort it before going live! Cheers mate!


----------



## ckphilli (Apr 29, 2006)

Cheers Jim!


----------

