Drag and drop, JSON in sitefinity
Below is my JS script. The drag and drop is working, and the counter (only in preview mood), but the url in the JSON is not working, when displaying it only shows the one in the body/markup and then the whole page refreshes.
sf52.globeuniversity.edu/.../program-finder2
Thanks,
Rebecca
var maxitems = 2;
var courses = [
//key : value, key : value
"name":"Sales and Marketing", "attrs": ["Assertive", "Team Player", "Problem Solver", "Good Communicator", "Outgoing", "Writing Skills", "Passionate", "Good Listener", "Hard-Working", "Thick-Skinned", "Stress Management", "Enjoys Challenges", "Persistant"], "img" : "/Images/program-finder/sales-and-marketing.jpg",
"name":"criminal justice", "attrs": ["Multi-Tasker", "Assertive", "Team Player", "Confident", "Analytical", "Flexible Personality", "Patient", "Observant", "Trust Worthy", "Thick-Skinned", "Stress Management", "Quick Reactor"], "img" : "/Images/program-findercriminal-justice.jpg",
"name":"accounting", "attrs": ["Detail Oriented","Analytical", "Problem Solver", "Organized", "Good Listener", "Independent", "Time Management", "Professional", "Enjoys Challenges", "Logical"], "img" : "/Images/program-finder/accounting.jpg",
"name":"health care management", "attrs": ["Multi-Tasker", "Detail Oriented", "Assertive", "Confident", "Problem Solver", "Good Communicator", "Writing Skills", "Flexible", "Compassionate", "Likes to Learn", ], "img" : "/Images/program-finder/healthcare-management.jpg",
"name":"business", "attrs": ["Multi-Tasker","Team Player", "Confident", "Anaytical", "Problem Solver", "Organized", "Good Communicator", "Outgoing", "Writing Skills","Trust Worthy", "Stress Management", "Quick Reactor" ], "img" : "/Images/program-finder/business.jpg",
"name":"digital video", "attrs": ["Team Player", "Analytical", "Creative", "Good Communicator", "Flexible", "Patient", "Passionate", "Thick-Skinned", "Resourceful", "Stress Management", "Persistant"], "img" : "/Images/program-finder/digital-video.jpg",
"name":"IMGD", "attrs": ["Detailed Oriented", "Problem Solver", "Creative", "Good Communicator", "Visual", "Patient", "Passionate", "Thick-Skinned", "Resourceful", "Enjoys Challenges", "New Things"], "img" : "/Images/program-finder/IMGD.jpg",
"name":"Health Fitness", "attrs": ["Confident", "Outgoing", "Passionate", "Good Communicator", "Compassionate", "Independent", "Trust-Worthy", "Self-Motivated", "Enjoys Challenges"], "img" : "../Images/program-finder/health-fitness.jpg",
"name":"IT", "attrs": ["Detailed Oriented", "Team Player", "Analytical", "Problem Solver", "Patient", "Resourceful", "Quick Reactor", "Logical", "Enjoys Challenges", "Likes to Learn", "Persistant"], "img" : "/Images/program-finder/IT.jpg",
"name":"Massage Therapy", "attrs": ["Confident", "Good Communicator", "Personable", "Flexible", "Visual", "Good Listener", "Compassionate", "Observant", "Independent", "Time Management", "Self-Motivated", "Likes to Learn"], "img" : "/Images/program-finder/message-therapy.jpg",
"name":"Media Business", "attrs": ["Multi-Tasker", "Confident", "Good Communicator", "Creative", "Visual", "Passionate", "Patent", "Hard-Working", "Independent", "Thick-Skinned", "Resourceful", "Persistant"], "img" : "/Images/program-finder/engineer.jpg",
"name":"Medical Assistant", "attrs": ["Team Player", "Personable", "Good Communicator", "Writing Skills", "Flexible", "Good Listener", "Compassionate", "Observant", "Trust Worthy", "Stress Management", "Qiuck Reactor", "Likes to Learn"], "img" : "/Images/program-finder/medical-assistant.jpg",
"name":"parelegal", "attrs": ["Multi-Tasker", "Detailed Oriented", "Analytical", "Organized", "Writing Skills", "Good Listener", "Hard-Working", "Trust Worthy", "Time Management", "Professional", "Resourceful", "Logical"], "img" : "/Images/program-finder/parelegal.jpg",
"name":"vet-tech", "attrs": ["Multi-Tasker", "Detailed Oriented", "Team Player", "Organized", "Outgoing", "Compassionate", "Hard-Working", "Observant", "Thick-Skinned", "Self-Motivated", "Quick Reactor", "Likes to Learn"], "img" : "/Images/program-finder/vet-tech.jpg",
"name":"game and application", "attrs": ["Problem Solver", "Detailed Oriented", "Creative", "Visual", "Passionate", "Hard-Working", "Independent", "Resourceful", "Enjoys Challenges", "Logical", "Persistant"], "img" : "/Images/program-finder/game-and-application.jpg",
"name":"architecture", "attrs": ["Confident", "Detailed Oriented", "Problem Solver", "Organized", "Vissual", "Passionate", "Good Listener", "Time Management", "Logical", "Likes to Learn"], "img" : "/Images/program-finder/architecture.jpg",
"name":"engineer", "attrs": ["Analytical", "Detailed Oriented", "Problem Solver", "Creative", "Vissual", "Hard-Working", "Passionate", "Time Management", "Logical", "Resourceful", "Self-Motivated", "Enjoys Challenges"], "img" : "/Images/program-finder/engineer.jpg"
//each section is a key 0 to max#... array inside of a array with value
]
$(function()
$( "#list1, #sortable" ).sortable(
connectWith: ".sortablelist",
change:dropin
).disableSelection();
/*$( "#sortable" ).sortable(
revert: true
)
.droppable (
drop: dropin
);
$( "ul, li" ).disableSelection();
//alert (courses["engineer"][1])*/
);
function dropin(event, ui)
//alert($("#sortable li").length);
//this is where you total amt to drag into selected area
if ($("#sortable li").length == maxitems +5)
//alert ("maxtimes");
$( "#list1, #sortable" ).sortable( disabled: true );
$("#submitbtn").removeAttr("disabled");
//listAttr ()
/*function resetList()
$("#list1, #sortable").sortable('option','refreshPositions',true);
*/
function listAttr ()
//bestmatch will equal courses
var bestmatch;
//matches equal attrs and li items
var matches = 0;
//loop through each course
$(courses).each(function(key, value)
var attrs = value.attrs;
var counter = 0;
//alert (value.attrs[0]);
//var attr = $(this).text();
//loop each chosen attr
$("#sortable li").each(function()
var traits = $(this).text();
//alert(this.attrs[0])
//loop through all attr of this course
$(attrs).each (function (i, val)
//if it matches will add to the counter
if (traits == val)
//alert ('yes');
counter ++;
);
);
//alert (counter);
//compare to the top match and see if its more or less
if (counter > matches)
//if larger then set as best match by this point counter equals total li matches
bestmatch = value;
matches = counter;
);
//alert (bestmatch);
//id from the images pulling from json name to img pathway
$("#career").attr("src", bestmatch.img).show();
// JavaScript Document
Hi,
Would it be possible for you to elaborate on what is the exact problem? Where did you place this source code? Furthermore, could you please tell us what are you trying to achieve? Any additional information will be much appreciate.
All the best,
Stefani Tacheva
the Telerik team