html - JQuery click works after refreshing the page -


my deepest apologizes. here link of question need assistance. below query, have fixed.

please me out anyone.

drag , drop localstorage html5 not working

i prepared drag , drop widgets in html, css, jquery. drag , drop works fine. made icon show dragged widgets once dropped in place required. icon shows fine once dropped.

i wanted remove widget when click on close icon. doesn't remove widget. tried refresh page see whether works after that. , is. i'm not sure why jquery behaves way.

i tried solution. see many solutions. nothing fix problem. help?

below code have used:

/* ----- javascript ----- */  $(function() {    if (localstorage.length != 0) {      (var = 0; < localstorage.length; i++) {        var dropclass = localstorage.key(i);        var clonediv = $("." + dropclass.substr(4, dropclass.length - 4)).clone();        var droppable = $("#droppable");        droppable.append(clonediv.draggable({          helper: 'original',          revert: 'valid',          containment: "#droppable",          grid: [30, 30],          snap: true        }).resizable({          containment: "#droppable"        }));        clonediv.find('a').removeclass("displayblock");        console.log(clonediv);      }    } else {}      $(".bat_voltage").draggable({      revert: true,      grid: [30, 30]    });    $(".left_flight").draggable({      revert: true,      grid: [30, 30]    });    $(".cnt_flight").draggable({      revert: true,      grid: [30, 30]    });    $("#droppable").droppable({      drop: function(event, ui) {        var dragged = ui.draggable;        var id = dragged.attr("class").split(' ');        var droppable = $("#droppable");        var find = (droppable.find("." + id[0]));        console.log(find);        if (find.length != 0) {} else {          ui.helper.css({            'top': 0,            'left': 0,            'position': 'relative'          });          ui.helper.clone().appendto("#droppable").draggable({            containment: "#droppable",            grid: [30, 30],            snap: true          }).resizable({            containment: "#droppable"          });          droppable.find("." + id[0]).find('a').removeclass("displayblock");          localstorage.setitem("drop" + id[0], droppable);        }      }    });    $("#change").click(function() {      var bat_value = parseint($("#bat_level").val());      if (bat_value > 25) {        progressvalue(bat_value, "green");      } else if (bat_value > 15 && bat_value < 25) {        progressvalue(bat_value, "yellow");      } else if (bat_value < 15) {        progressvalue(bat_value, "red");      }    });      $(".boxclose").click(function() {      alert("remove widget");      var par = $(this).parent();      var id = par.attr("class").split(' ');      var droppable = $("#droppable");      var removing = droppable.find("." + id[0]);      removing.remove();      localstorage.removeitem("drop" + id[0]);    });  });
/* ----- css ----- */  .bat_voltage {    width: 250px;    height: 100px;    padding: 0.5em;    margin: 10px 10px 10px 0;    z-index: 1;  }  .floatleft {    float: left;  }  .left_flight {    width: 250px;    height: 100px;    padding: 0.5em;    margin: 10px 10px 10px 0;    z-index: 1;  }  .cnt_flight {    width: 250px;    height: 100px;    padding: 0.5em;    margin: 10px 10px 10px 0;    z-index: 1;  }  #droppable {    width: 50%;    height: 400px;    padding: 0.5em;    margin: 10px;    resize: both;    border: 2px;    overflow: auto;  }  #progressbar {    width: 200px;    height: 50px;    margin-top: 20px;  }  a.boxclose {    float: right;    margin-top: -10px;    margin-right: -10px;    cursor: pointer;    color: #fff;    border: 1px solid #aeaeae;    border-radius: 8px;    background: #605f61;    font-size: 21px;    font-weight: bold;    display: inline-block;    line-height: 0px;    padding: 8px 3px;    display: block;  }  .displaynone {    display: none !important;  }  .displayblock {    display: none !important;  }
<!----- html ----->  <html>    <head>      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>      <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    </head>      <body>      <form id="form1" runat="server">        <div>          <div>            <div class="bat_voltage floatleft ui-widget-content">              <a class="boxclose displayblock">×</a>              <p>battery voltage</p>            </div>              <div class="left_flight floatleft ui-widget-content">              <a class="boxclose displayblock">×</a>              <p>flight time left</p>            </div>              <div class="cnt_flight floatleft ui-widget-content">              <a class="boxclose displayblock">×</a>              <p>current flight time</p>              <div class="curflight"></div>            </div>            <div style="clear:both"></div>          </div>            <div id="droppable" class="ui-widget-header">            <p>drop here</p>          </div>        </div>      </form>    </body>  </html>

try jsfiddle

here using draggable event , adding close button dynamically

so whenever want remove or want add function dynamically added element have this.

<html> <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style>   .bat_voltage {     width: 250px;     height: 100px;     padding: 0.5em;     margin: 10px 10px 10px 0;     z-index: 1;   }     .ui-widget-content,   .ui-widget-header#droppable { border: 2px solid #000; }    .floatleft {      float: left;   }  .left_flight {    width: 250px;    height: 100px;    padding: 0.5em;    margin: 10px 10px 10px 0;    z-index: 1;  }  .cnt_flight {     width: 250px;     height: 100px;     padding: 0.5em;     margin: 10px 10px 10px 0;     z-index: 1;  }  #droppable {    width: 50%;    height: 400px;    padding: 0.5em;    margin: 10px;    resize: both;    border: 2px;    overflow: auto;  }  #progressbar {     width: 200px;     height: 50px;     margin-top: 20px;  }  a.boxclose {    float: right;    margin-top: -10px;    margin-right: -10px;    cursor: pointer;    color: #fff;    border: 1px solid #aeaeae;    border-radius: 8px;    background: #605f61;    font-size: 21px;    font-weight: bold;    display: inline-block;    line-height: 0px;    padding: 8px 3px;    display: block;  }  .displaynone {    display: none !important;  }  .displayblock {    display: none !important;  } </style> <script>   $(function () {    if (localstorage.length != 0) {    (var = 0; < localstorage.length; i++) {      var dropclass = localstorage.key(i);      var clonediv = $("." + dropclass.substr(4, dropclass.length - 4)).clone();      var droppable = $("#droppable");      droppable.append(clonediv.draggable({        helper: 'original',        revert: 'valid',        containment: "#droppable",        grid: [30, 30],        snap: true      }).resizable({        containment: "#droppable"      }));      clonediv.find('a').removeclass("displayblock");      console.log(clonediv);    }   } else {}   $(".bat_voltage").draggable({    revert: true,    grid: [30, 30]  });  $(".left_flight").draggable({   revert: true,   grid: [30, 30] }); $(".cnt_flight").draggable({   revert: true,   grid: [30, 30] }); $("#droppable").droppable({   drop: function(event, ui) {     var dragged = ui.draggable;     var id = dragged.attr("class").split(' ');     var droppable = $("#droppable");     var find = (droppable.find("." + id[0]));     console.log(find);     if (find.length != 0) {} else {       ui.helper.css({       'top': 0,       'left': 0,       'position': 'relative'       });       ui.helper.clone().appendto("#droppable").draggable({       containment: "#droppable",       grid: [30, 30],       snap: true       }).resizable({         containment: "#droppable"       });       droppable.find("." + id[0]).find('a').removeclass("displayblock");       localstorage.setitem("drop" + id[0], droppable);     }    }  }); $("#change").click(function() {   var bat_value = parseint($("#bat_level").val());   if (bat_value > 25) {     progressvalue(bat_value, "green");   } else if (bat_value > 15 && bat_value < 25) {     progressvalue(bat_value, "yellow");   } else if (bat_value < 15) {     progressvalue(bat_value, "red");   } });  $("body").on('click','.boxclose',function() {   alert("remove widget");   var par = $(this).parent();   var id = par.attr("class").split(' ');   var droppable = $("#droppable");   var removing = droppable.find("." + id[0]);   removing.remove();   localstorage.removeitem("drop" + id[0]);  }); });  </script> </head> <body> <form id="form1" runat="server">   <div>     <div>       <div class="bat_voltage floatleft ui-widget-content">         <a class="boxclose displayblock">×</a>         <p>battery voltage</p>       </div>        <div class="left_flight floatleft ui-widget-content">         <a class="boxclose displayblock">×</a>         <p>flight time left</p>       </div>        <div class="cnt_flight floatleft ui-widget-content">         <a class="boxclose displayblock">×</a>         <p>current flight time</p>         <div class="curflight"></div>       </div>       <div style="clear:both"></div>     </div>      <div id="droppable" class="ui-widget-header">       <p>drop here</p>     </div>   </div> </form> </body> </html>

Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more