We Keep Coding

What is the essential part of code to make draggable function to work well using Jquery UI?

I was trying to create draggable function from jquery ui but its not working. I think its have something wrong with my jquery coding. Can you guys check it out for me?
todo.init = function (options) {
options = options || {};
options = $.extend({}, defaults, options);
$.each(data, function (index, params) {
generateElement(params);
});
$.each(codes, function (index, value) {
$(value).droppable({
drop: function (event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Changing object code
object.code = index;
// Generating new element
generateElement(object);
// Updating Local Storage
data[id] = object;
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
});
});
$("#" + options.deleteDiv).droppable({
drop: function(event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Updating local storage
delete data[id];
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
})
};
var generateElement = function(params){
var parent = $(codes[params.code]),
wrapper;
if (!parent) {
return;
}
wrapper = $("<div />", {
"class" : defaults.todoTask,
"id" : defaults.taskId + params.id,
"data" : params.id
}).appendTo(parent);
$("<div />", {
"class" : defaults.todoHeader,
"text": params.title
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDate,
"text": params.date
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDescription,
"text": params.description
}).appendTo(wrapper);
$("." + defaults.todoTask).draggable();
wrapper.draggable({
start: function() {
$("#" + defaults.deleteDiv).show();
},
stop: function() {
$("#" + defaults.deleteDiv).hide();
},
revert: "invalid",
revertDuration : 200
});
};
This is a Todo Application, like on the pic provided. I want the notes on Pending to be draggable to In Progress.
JsFiddle link
note: the code seems can't be process here while in my localhost it works well except that dragging function.

My problem is solved. I did search for jquery ui not working and i found out that because of compatibility. So they told me to use touch point to make it work. and it did :) Therefore it's not about my coding for it matters.. here's the link for my solution touchpunch.furf.com

Json + google maps v3: display multiple json fields

just a quick question.. I have this map and need to add more fields *Confirmed=seen in the json file... cheers!!
$.getJSON( 'geojson/test.json', function(data) {
$.each( data.features, function(i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': (marker.donor)}, this);
});
});
});
index-->http://gk5tudio.cu.cc/bin/json/index.html and
json -->http://gk5tudio.cu.cc/bin/json/test.json

I suggest putting the information in some div elements and then adding that to content value.
.click(function() {
var html = '<div>' + marker.donor + '</div><div>Confirmed: ' + marker.confirmed + '</div>';
$('#map_canvas').gmap('openInfoWindow', { 'content': html }, this);
});

is your question how to add marker.confirmed to the infobox ?
try:
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(marker.latitude, marker.longitude),'bounds': true }).click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': (marker.donor+''+marker.confirmed)}, this); }); });

How to make infowindows have tabs in Google Map?

How can I make the my infoWindows have tabbed content? I tried things like:
google.maps.event.addListener(this, "domready", function(){ $("#info").tabs() });
*also tried to use infoWidnwow, infowindow, and iw instead of this keyword
and
.ready(function(){ $("#info").tabs();});
and
.bind('domready', function(){ $("#info").tabs(); });
None of these worked.
Code for creating markers and infowindows:
$('#map').gmap(mapOptions).bind('init', function(){
$.post('getmarkers.php', function(json){
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes){
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds':true } ).click(function(){
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
});
});
});
});
});
Somehow I need to tell this part:
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
To tab the content that I pass to openInfoWindow.

There is a free jquery plugin that takes care of multiple tabs, positioning of each and styling i just found that has an intuitive interface for customization. Here is a demo
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Remove the first three snippets you posted and use this:
$('#map').gmap(mapOptions).bind('init', function() {
$.post('getmarkers.php', function(json) {
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes) {
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds': true
}).click(function() {
var ts = $.now();
$('#map').gmap('openInfoWindow', {
"<div id='" + ts + "info'>... your tab content ..."
}, this);
$('#' + ts + 'info').tabs();
});
});
});
});
});​
I created a unique string and used it to give the div a unique id, then used that to make the tabs.

Conflict: when loading childpage, JavaScript is not working

I am trying to integrate this particular app in my website.
When I load it as content to my main page my jquery menu from the main page stops working. It seems there is a conflict here.
Here is the script from the childpage:
<script type='text/javascript'>
$(function() {
var bucharest = new google.maps.LatLng(44.436055, 26.097593),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 13,
center: bucharest,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").mouseenter(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Bucharest level
// map.setZoom(10);
}
// Move (pan) map to new location
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map,
icon: "images/marker.png"
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
map.setZoom(14);
});
// Fill more info area
$("#more-info")
.find("h2")
.html($el.find("h3").html())
.end()
.find("p")
.html($el.find(".longdesc").html());
// No longer the first time through (re: marker clearing)
first = false;
}
});
$("#locations li:first").trigger("mouseenter");
});
Here is the script for the menu in main page:
$(document).ready(function() {
$("ul#nav li a").addClass("js");
$("ul#nav li a").hover(
function () {
$(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
$(this).animate({backgroundPosition:"(0 -5px)"}, 150);
},
function () {
$(this).animate({backgroundPosition:"(0 -149px)"}, 200);
}
);
});
Is there a conflict between these two?
Thank you!

I think there is an error in your first document.ready
here : $(function() {
So the second document.ready
this one : $(document).ready(function() {

jQuery autocomplete: matchContains not working

I have jQuery and the autocomplete plugin setup. Autocomplete works fine and various options I set like width and lookup work okay. But the one thing that does not work is the matchContains option. According to the doc "Whether or not the comparison looks inside (i.e. does "ba" match "foo bar") the search results. Important only if you use caching. Don't mix with autofill." But it is not looking inside the search results. For example, "ba" will not find "foo bar".
<script type="text/javascript" src="styles/prosilver/template/jquery.js"></script>
<script type="text/javascript" src="styles/prosilver/template/jquery.autocomplete.js"></script>
<script type="text/javascript">
// <![CDATA[
/* Zeno */
function translatestyle(text)
{
var val = document.getElementById('query').value;
var lang = '{S_USER_LANG}'.substring(0,2);
var list = "{TRANS_LIST}";
var arr = list.match(val);
if ( arr == null )
{
alert('That is not a valid translation term.');
}
else
{
insert_text('[translate='+lang+']'+val+'[/translate]');
document.forms[form_name].elements[text_name].focus();
}
}
var a2;
jQuery(function() {
var onAutocompleteSelect = function(value, data) {
$('#selection').html('<img src="\/global\/flags\/small\/' + data + '.png" alt="" \/> ' + value);
alert(data);
}
var options = {
serviceUrl: '/projects/autocomplete/service/autocomplete.ashx',
matchContains: true,
width: 300,
delimiter: /(,|;)\s*/,
onSelect: onAutocompleteSelect,
deferRequestBy: 0, //miliseconds
};
a2 = $('#query').autocomplete({
matchContains: true,
width: 300,
delimiter: /(,|;)\s*/,
lookup: "{TRANS_LIST}".split(',')
});
$('#navigation a').each(function() {
$(this).click(function(e) {
var element = $(this).attr('href');
$('html').animate({ scrollTop: $(element).offset().top }, 300, null, function() { document.location = element; });
e.preventDefault();
});
});
});

I'm not familiar with that particular plugin, but you may want to try switching to the JQuery UI Autocomplete library. It's quite good, and does search inside the way you want.

Checkout this website. its got a working example and codes for it.
http://www.ajaxdaddy.com/demo-jquery-autocomplete.html
what i think: what you are missing might be the onfindvalue event and method to handle the event

Example:
source: function (request, response) { // Contains
var searchString = request.term,
items = [];
// OPTIONS
// Search for items with "searchString"...
// Example:
items.push('test 1');
items.push('foo');
items.push('var');
response(items); // Items
}