Jquery Draggable Function not working
Question
I have a JSP page where i am trying and make rows of one of the tables in my page draggable but it isn't happening . The Rows of the tables gets appended to it after an AJAX call . I have tried various combinations and everything but i can't get any of my elements to be draggable .
Here's my page
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Categories</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href='<c:url value="/static/css/header.css" />'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <style type="text/css"> table { table-layout: fixed; word-wrap: break-word; } th { text-align:center; } #serviceSelect { text-align: center; } #serviceSelect { margin: auto; width: 30%; } #removeSelect { text-align: center; } #removeSelect { margin: auto; width: 30%; } #123 { margin: auto; width: 50%; } p { font:bold; } </style> </head> <body> <jsp:include page="../shared/header.jsp"> <jsp:param value="editActionButtons" name="currentPage" /> </jsp:include> <div class="row"> <div class="text-center"> <h2>Select Service</h2> <div class="text-muted"> <h4>Choose a Service To Edit Its Action Buttons</h4> </div> </div> </div> <div class="form-group" id="serviceSelect"> <select class="form-control" id="serviceMenu"> <option value="" disabled selected>Select Service</option> <c:forEach items="${service}" var="seritem"> <option>${seritem}</option> </c:forEach> </select> </div> <br></br> <form class="form-horizontal" role="form" action="updateActionButton" method=POST id="form2"> <div class="table-responsive12"> <table class="table table-bordered table-striped table-highlight" id="tab_logic"> </table> <table class="table table-bordered table-striped table-highlight"> <tr id="submit"> <td colspan="3" align="center"> <div class="form-group"> <button type="submit" class="btn btn-success btn-md" id="submit">Submit</button> </div> </td> </tr> </table> </div> </form> <br></br> <form class='form-horizontal' role='form' action='removeActionButton' method=POST> <div class="sel" id="123"></div> </form> <form class='form-horizontal' role='form' action='addActionButton' method=POST> <div class="sel1" id="1234"></div> </form> <script type="text/javascript"> var t; $(function() { $("#serviceMenu").change(function() { var service = $("#serviceMenu").val(); loadData(service); loadTable(t); loadActionData(); remove(); add(); $("#submit").draggable(); $("#tab_logic").draggable(); $("#tab_logic tr").draggable(); }); $("#submit").draggable(); $("#tab_logic").draggable(); $("#tab_logic tr").draggable(); }); function loadData(service) { $.ajax({ type : "GET", data : { serv : service }, dataType : 'json', async : false , url : "printServiceDetails", success : function(data) { t=data; }, error : function() { alert("error"); } }); } function loadTable(num) { $('#tab_logic').empty(); for (var i=1 ;i<=num;i++) { $('#tab_logic').append("<tr><td colspan='3' align='center'><p id='addrp"+i+"'><strong>Action Button "+i+" Properties</strong></p></td></tr>"); $('#tab_logic').append("<tr><td align='center' style='width:15%'><p id='addac"+i+"'><strong>Action</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpac"+i+"'>Action</p></td><td><input type ='text' class ='form-control' id='addiac"+i+"' name ='addiac"+i+"' placeholder='Enter Action'</td> </tr>"); $('#tab_logic').append("<tr><td align='center' style='width:15%'><p id='addat"+i+"'><strong>Action Text</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpat"+i+"'>Action Text</p></td><td><input type ='text' class ='form-control' id='addiat"+i+"' name ='addiat"+i+"' placeholder='Enter Action Text'</td> </tr>"); $('#tab_logic').append("<tr><td align='center' style='width:15%'><p id='addcc"+i+"'><strong>Color Code</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpcc"+i+"'>Color Code</p></td><td><input type ='text' class ='form-control' id='addicc"+i+"' name ='addicc"+i+"' placeholder='Enter Color Code'</td> </tr>"); } } function loadActionData() { $.ajax({ type : "GET", dataType : 'json', async : false , url : "loadButtonDetails", success : function(data) { for(var i=1;i<=data.length;i++) { $("#addpac"+i.toString()).html("<strong>"+data[i-1].ac+"</strong>"); $("#addpcc"+i.toString()).html("<strong>"+data[i-1].cc+"</strong>"); $("#addpat"+i.toString()).html("<strong>"+data[i-1].at+"</strong>"); $("#addiac"+i.toString()).val(data[i-1].ac); $("#addicc"+i.toString()).val(data[i-1].cc); $("#addiat"+i.toString()).val(data[i-1].at); } }, error : function() { alert("error"); } }); } function remove(){ var htm=""; $("#123").html(htm); htm+="<div class='text-center'><h4><strong>ADD/DELETE ACTION BUTTONS</strong></h4></div>"; htm+="<select class='form-control id='removeSelect' name='removeSelect' style='width:30%;text-align:center;margin:auto'>"; for(var i=1;i<=t;i++) { htm+="<option>"+i+"</option>"; } htm+="</select>"; htm+="<div style='text-align:center'><button type='submit' class='btn btn-success btn-md' id='removeSubmit'>Remove</button> </div>"; $("#123").append(htm); } function add(){ var htm=""; $("#1234").html(htm); htm+="<div class='text-center'><h4>Enter The Details To Add A Button</h4></div>"; htm+="<table class='table table-bordered table-striped table-highlight'><tr> <th>Action</th><th>Action Text</th><th>Color Code</th></tr>"; htm+="<tr><td><input type='text' class='form-control' id='ac' name='ac' placeholder='Enter Action'></td><td><input type='text' class='form-control' id='at' name='at' placeholder='Enter Action text'></td><td><input type='text' class='form-control' id='cc' name='cc' placeholder='Enter Color Code'></td></tr>"; htm+="</table>"; htm+="<div style='text-align:center'><button type='submit' class='btn btn-success btn-md' id='addSubmit'>Add</button> </div>"; $("#1234").append(htm); } </script> </body> </html>
1 answers
solution1
0 2016-06-26 07:59:46
You have to tell jQuery-UI which DOM elements are draggable. There is a method you have to call for that. Check the docs here:
https://api.jqueryui.com/draggable/#option-addClasses
$('.yourRows').draggable()
Just select the nodes with jQuery and call the draggable method. MAKE SURE you do this after the DOM nodes are appended after your AJAX call.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery clone not working with draggable
jQuery removeClass not working with draggable
jquery draggable/droppable as a function
jquery draggable over function
Using draggable jQuery function
Jquery .draggable is not a function
Draggable function not working
jQuery UI draggable events not working
Jquery draggable not working in my code
jquery ui draggable and bxslider not working
Related Tags