|
I've spent days looking for a way to use jQuery drag & drop with table rows but have only been able to find ways to save/update the database for list items, not rows. The other issue I have is that my page only has one row and pulls from a database with a repeat region loop that creates new rows so I have no way to create id's for each new row. If anyone can help me out with a script that would update my database after a jQuery drag & drop, I'd really appreciate it. Here's an example of my code that works except for the updates:
<pre lang="PHP">
<?php require_once('Connections/dragdrop.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
$maxRows_rsView = 10;
$pageNum_rsView = 0;
if (isset($_GET['pageNum_rsView'])) {
$pageNum_rsView = $_GET['pageNum_rsView'];
}
$startRow_rsView = $pageNum_rsView * $maxRows_rsView;
mysql_select_db($database_dragdrop, $dragdrop);
$query_rsView = "SELECT * FROM records";
$query_limit_rsView = sprintf("%s LIMIT %d, %d", $query_rsView, $startRow_rsView, $maxRows_rsView);
$rsView = mysql_query($query_limit_rsView, $dragdrop) or die(mysql_error());
$row_rsView = mysql_fetch_assoc($rsView);
if (isset($_GET['totalRows_rsView'])) {
$totalRows_rsView = $_GET['totalRows_rsView'];
} else {
$all_rsView = mysql_query($query_rsView);
$totalRows_rsView = mysql_num_rows($all_rsView);
}
$totalPages_rsView = ceil($totalRows_rsView/$maxRows_rsView)-1;
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src="jquery-1.7.1.min.js"></script>
<script src="jquery.tablednd_0_5.js" type="text/javascript"></script>
<!-- Add in the jQuery draggability -->
<script type="text/javascript">
$(document).ready(function() {
$("#table-1").tableDnD();
});
</script>
</head>
<body>
<table id="table-1" width="600" border="1" cellpadding="5">
<tr>
<td>ID</td>
<td>Rank</td>
<td>Text</td>
<td>Listing ID</td>
</tr>
<?php do { ?>
<tr id="1">
<td><?php echo $row_rsView['recordID']; ?></td>
<td><?php echo $row_rsView['Rank']; ?></td>
<td><?php echo $row_rsView['recordText']; ?></td>
<td><?php echo $row_rsView['recordListingID']; ?></td>
</tr>
<?php } while ($row_rsView = mysql_fetch_assoc($rsView)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($rsView);
?>
|
|
|
|
|
btvbill wrote: If anyone can help me out with a script that would update my database after a jQuery drag & drop, I'd really appreciate it. Here's an example of my code that works except for the updates:
most of the code in your post is PHP so not sure what you are looking for help on? usually my experience has been people post questions about things they have tried and need help getting it to work.
still wanting to help and considering you are using jQuery I found the following:
http://datatables.net/forums/discussion/1077/drag-drop-rows/p1[^]
I use datatables [^] in my development and I am sure you can fashion it to what you are trying.
that or you can wait for the datagrid component that will come from the jQuery folks sometime soon. http://wiki.jqueryui.com/w/page/34246941/Grid[^]
best of luck... 
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
System:
Visual Studio 2010
.Net 4.0
JQuery 1.4.2
I will start this off with a caveat that I am by no-means a javascript guy and am pretty new to JQuery.
I'm writing a page that has a several-step process to scheduling an appointment. We are accomplishing this using a multi-view control to navigate through the several step process.
Like any good user-friendly site, I have set up a pop-up message in javascript that alerts the user if they try to navigate away from the page or refresh the page, close their browser, etc. before they finish scheduling their appointment that they will lose any unsaved data (much like the person who posted just before myself).
To get around the navigation buttons for the multiview triggering the onbeforeunload event, I use the following, triggered by the onClientClick event of the buttons:
<script type="text/javascript">
LinkBit = true;
window.onbeforeunload = function () {
if (LinkBit) {
return "Leaving this page will cause all unsaved data to be lost";
}
LinkBit = true;
}
function TurnOffMessage() {
LinkBit = false;
}
</script>
The next problem we ran into is that one of our controls within the multiview, an ASP:Calendar was triggering the onbeforeunload event, causing the popup to occur when the user was trying to select a date.
To get around this we used the following JQuery within the control with the calendar wrapped in a div tag with the ID of "calendar":
<div id="calendar">
<asp:Calendar ID="CalendarforAppointments" runat="server" miscStyling/Events>
</asp:Calendar>
</div>
<script type="text/jscript">
$("#calendar a").bind('click', function () {
TurnOffMessage();
return true;
});
</script>
This solution is dangerously close to solving my problem. My issue that I'm coming to you all for help is that the above JQuery does not affect the month navigation on the calendar control so the popup still pops-up when the user tries to change which month they're viewing.
If I use the above on the main page and wrap the control in the same div it ends up killing all pop-up functionality.
I appreciate any help you all can provide.
"The shortest distance between two points is under construction"
-Noelie Altito
|
|
|
|
|
The first question would be is $("#calendar a") finding the elements and applying the click event?
No comment
|
|
|
|
|
AeonBlue wrote: <script type="text/jscript">
$("#calendar a").bind('click', function () {
TurnOffMessage();
return true;
});
</script>
I am guessing that the above code is located in the head of your html document. The bind won't work because the document (html) has not been loaded yet.
Simple solution - move your javascript code down towards the end of the file. In general I place jQuery script right before the closing of the body tag.
while it is permitted to put javascript in the head of your document best practices generally dictate that you place code for working with the document at the end prior to closing the body.
this will assure that "most" everything is currently in the document. the exception being any html generated code from jQuery (plugins, etc.).
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Thanks, that was indeed a very good guess. I did, however, notice my error shortly after posting this and moved it to the bottom of the main page and achieved the same results as I had before: Clicking the days doesn't affect the pop-up but clicking the months does.
"The shortest distance between two points is under construction"
-Noelie Altito
|
|
|
|
|
the reason being is because the asp:Calendar is a server rendered control.
so changing the month causes the need for the control to be re-rendered. personally I have never been a big fan for many of the asp controls. since you are using jQuery might I recommend you use a jQuery plugin and just eliminate the need for a server rendered control??
here is one that I use - http://trentrichardson.com/[^]
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Hi,
i have an popup which is an aspx page and when i click on browser close button..., the system should check if there is any unsaved data in the form or not. If there is any unsaved data then the message should be displayed (Do you want to leave..?) with OK and Cancel button...
On click of the OK button, the data should not be saved and the user should be returned parent form ie popup should be closed and return to the parent form.On click of the cancel button, the control should return to the Pop.
I had tried the below code...
window.onbeforeunload = close;
function close() {
var result=confirm("Do you really want to close this window");
if (result) {
return true;
}
else {
location.href = document.URL;
}
}
The above code is not working ie the popup is getting closed even on click of closse button....
and when clicked on OK it is dispalying another msgbox with leave this page and Stay on this page buttons...
Please help me regarding the same...
|
|
|
|
|
I wish the following may solve u issue.
<script language="javascript">
function close() {
var flgDataUnsaved = false;
if ( flgDataUnsaved ){
event.returnValue = "Do you really want to close this window";
}else{
event.returnValue = true;
}
}
window.onbeforeunload = close;
</script>
and u can put a "save" button on your popup page. The user can save the data themselves.
Good day,Good job,Good life
|
|
|
|
|
I believe this line
event.returnValue = "Do you really want to close this window";
should be
event.returnValue = confirm("Do you really want to close this window");
|
|
|
|
|
I have the following code in my aspx page. for some reason disabled=true/false not working, any idea why?
function chkboxlistchecking(chkMed,chkBeh,chkReports)
{
// Go through all items of a check list control
var cbkSelect = document.getElementById(chkMed);
var cbkAdd = document.getElementById(chkBeh);
var cbkEdit = document.getElementById(chkReports);
if(cbkSelect.checked == true || cbkAdd.checked == true )
{
cbkEdit.checked=true;
cbkEdit.disabled=true;
}else
{
cbkEdit.checked=false;
cbkEdit.disabled=true;
}
}
|
|
|
|
|
You have coded
cbkEdit.disabled=true;
twice. Is this what you mean to do?
Unrequited desire is character building. OriginalGriff
I'm sitting here giving you a standing ovation - Len Goodman
|
|
|
|
|
mistypo.. still not working
|
|
|
|
|
Exactly what is not working?
Unrequited desire is character building. OriginalGriff
I'm sitting here giving you a standing ovation - Len Goodman
|
|
|
|
|
What are you passing into the function? Are you passing the name of the elements as strings, or passing in as the actual object.
|
|
|
|
|
I am passing checkbox.ClientID
|
|
|
|
|
Hi,
please alert the value of cbkEdit, and check whether it is a valid object or not.And make sure that the ID is same.
|
|
|
|
|
if you look at my code I setting up checked=True/False and it working, only disabled not working.
|
|
|
|
|
I think u should check the Checklist.clientID. The following code works both in IE and Chrome.
<script type="text/javascript" language="javascript">
function chkboxlistchecking(chkMed, chkBeh, chkReports) {
// Go through all items of a check list control
var cbkSelect = document.getElementById(chkMed);
var cbkAdd = document.getElementById(chkBeh);
var cbkEdit = document.getElementById(chkReports);
if (cbkSelect.checked == true || cbkAdd.checked == true) {
cbkEdit.checked = true;
cbkEdit.disabled = true;
} else {
cbkEdit.checked = false;
cbkEdit.disabled = true;
}
}
</script>
<input id="ch_s" type="checkbox">Select</input>
<input id="ch_a" type="checkbox">Add</input>
<input id="ch_e" type="checkbox">Edit</input>
<br /><button onclick="javascript:chkboxlistchecking('ch_s','ch_a','ch_e');">check</button>
anyway , u can move cbkEdit.disabled=true out of the if statement.
function chkboxlistchecking(chkMed, chkBeh, chkReports) {
var cbkSelect = document.getElementById(chkMed);
var cbkAdd = document.getElementById(chkBeh);
var cbkEdit = document.getElementById(chkReports);
cbkEdit.checked = (cbkSelect.checked == true || cbkAdd.checked == true)
cbkEdit.disabled = true;
}
Good day,Good job,Good life
|
|
|
|
|
|
And what is the problem? What have you tried?
No comment
|
|
|
|
|
I have got the radio buttons to total up ok, I need some kind of code to get just one picture instead of all 4 in the results page
Any chance you could have a look Mark
|
|
|
|
|
I'm not meaning to be evasive but it is really a very simple if statement. You have a go at it yourself, then ask for help if you have problems
No comment
|
|
|
|
|
Hey Mark, I appreciate that, but im am stuck with were to start, can one of the pictures be shown subject to the total that is created by a user? using javascript?
I am learning currently learning javascript basics but struggling with making a script work for this project
|
|
|
|
|
Here is a hint
if(Foo < 5)
{
...
}
else if(Foo > 5 && Foo < 10)
{
...
}
Does that give you any thoughts?
No comment
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
