More in this section

Forums / Developing with Sitefinity / Drag and drop, JSON in sitefinity

Drag and drop, JSON in sitefinity

2 posts, 0 answered
  1. Rebecca
    Rebecca avatar
    1 posts
    24 Sep 2012
    21 Nov 2012
    Link to this post
    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.


    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",

    /*$( "#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 });
    //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();
    //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
  2. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    31 May 2017
    26 Nov 2012
    Link to this post

    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
2 posts, 0 answered