Newbie to Javascript, jQuery and Ajax
Moderator: General Moderators
Re: Newbie to Javascript, jQuery and Ajax
Hello Celauran
The script is coming from this site.
Specifically I clicked Viewsource.
And - at this point - I'm with you - those files are "anyone's guess". Which is why I hesitate using the source code. I look forward to your thoughts, after you've had time to review the code.
Thanks so much - Pavilion
The script is coming from this site.
Specifically I clicked Viewsource.
And - at this point - I'm with you - those files are "anyone's guess". Which is why I hesitate using the source code. I look forward to your thoughts, after you've had time to review the code.
Thanks so much - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Looks like some custom code. You should be fine without it.
Re: Newbie to Javascript, jQuery and Ajax
Just need some clarification here, Celauran. In regards to your statement, "you should be fine without it". Do you mean I should be fine without all the files listed in the <head>?Celauran wrote:Looks like some custom code. You should be fine without it.
Code: Select all
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" media="all" />
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.utils.js"></script>
<script type="text/javascript" src="/assets/js/jquery.ui.js"></script>
<script type="text/javascript" src="/jquery_jcss_align/jquery.jcss_align.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" media="all" />
<script type="text/javascript" src="jquery.drag_drop_multi_select_alpha.js"></script>
<script type="text/javascript" src="demo.js"></script>Or....
Do you mean I should NOT use the plugin at all?
Thanks much - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
I was referring specifically to jquery.utils.js. jQuery and jQueryUI you already have, so you'll just need jquery.jcss_align.js
Re: Newbie to Javascript, jQuery and Ajax
OK - searched for /jquery.jcss_align.js in the zipped files you sent me and in the files I downloaded. I found nothing. So .... I did a google search and found this.Celauran wrote:I was referring specifically to jquery.utils.js. jQuery and jQueryUI you already have, so you'll just need jquery.jcss_align.js
Just asking, but I take it the protocol is to copy/save the script from this file onto my system and then use it in the script we have been discussing?
Thanks - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
I took a look at his site again -- paying a little more attention this time -- because it seemed odd that he wouldn't have a download available from his site. That file is actually for a completely separate project and can be ignored. Sorry I missed that the first time.
Re: Newbie to Javascript, jQuery and Ajax
So I can use the plugin without any of the files listed in his <head>?Celauran wrote:I took a look at his site again -- paying a little more attention this time -- because it seemed odd that he wouldn't have a download available from his site. That file is actually for a completely separate project and can be ignored. Sorry I missed that the first time.
Re: Newbie to Javascript, jQuery and Ajax
OK - I'll give it a shot when I finish up with some client work.Celauran wrote:Looks like this is all you need.
Thanks Celauran - you have no idea how much I appreciate your help.
Pavilion
Re: Newbie to Javascript, jQuery and Ajax
OK - the results are in - and they aren't good.
For reference - here is the plugin I'm trying to utilize:
I tried copy/pasting HTML, CSS and Javascript into a file titled mdd.php. Those source codes pasted in just fine, I pulled in references to the standard jquery files. But I couldn't get ANY activity on the page. I can't select, multi-select, drag, drop, nothing.
Then I inserted the lines for all the files we discussed earlier, downloaded some I didn't have - checked all the paths, substituted some I couldn't find on-line. The long and short of it is that NOTHING is working. Here is the mdd.php file as it stands now:
Celauran - I'm perfectly willing to let go of this particular plugin. All I want is to make the lists we have been working on mult-select. If there is a better way to go about, I'm ready to explore other possibilities. However, if I'm just not getting the correct files in this plugin - and there is a reasonable fix, that would work as well.
Bottom line - how would you make a list mult-select, drag and drop? I've got drag and drop - I just need mult-select.
Thanks Much - Pavilion
For reference - here is the plugin I'm trying to utilize:
I tried copy/pasting HTML, CSS and Javascript into a file titled mdd.php. Those source codes pasted in just fine, I pulled in references to the standard jquery files. But I couldn't get ANY activity on the page. I can't select, multi-select, drag, drop, nothing.
Then I inserted the lines for all the files we discussed earlier, downloaded some I didn't have - checked all the paths, substituted some I couldn't find on-line. The long and short of it is that NOTHING is working. Here is the mdd.php file as it stands now:
Code: Select all
<script>
/* This demo is from http://plugins.scbfolio.com/jquery_drag_drop_select/#Sources */
$(document).ready(function(){
// Set the default function
$.fn.drag_drop_multi_select.defaults.after_drop_action = function($item,$old,$new,e,ui){
// Possible param $item_instance, $old_container, $new_container, event, helper
var $target = $(e.target);
$target.find('ul').append($item);
};
// Initiate the drag & drop
$('#drag_drop').drag_drop_multi_select({
element_to_drag_drop_select:'.list ul li',
elements_to_drop:'.list',
elements_to_cancel_select:'.title'
});
// Align the selection bar
$('#drag_drop .items_selected').JCSS_align({
vertical_align:'bottom',
horizontal_align:'left'
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Drag Drop Multi Select</title>
<meta name="description" content=""/>
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="/jquery/dev/themes/custom-theme/jquery.ui.all.css" media="all" /> <!------------- path defined. Substitute for - href="/assets/css/main.css" media="all" ---->
<script type="text/javascript" src="/jquery/js/jquery-ui-1.8.18.custom.min.js"></script> <!---- path defined ----->
<script type="text/javascript" src="/jquery/dev/utilities/jquery.utils.js"></script> <!---- path defined ---->
<script type="text/javascript" src="/jquery/dev/ui/jquery-ui-1.8.18.custom.js"></script> <!---- path defined ---->
<script type="text/javascript" src="/jquery/dev/ui/minified/jquery.ui.core.min.js"></script> <!---- path defined substitute for: jquery.ui.js ---->
<link rel="stylesheet" type="text/css" href="/jquery/dev/demos/demos.css" media="all" /> <!----- path defined --->
<script type="text/javascript" src="/jquery/dev/demos/plugins/jquery.drag_drop_multi_select_alpha.js"></script><!----- path defined ---->
<!----- Comment out - don't have file: <script type="text/javascript" src="demo.js"></script> ----->
<style type="text/css">
html {height:100%;}
body {height:100%;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px solid #000;}
.ui-selectable-helper div {opacity:0.1; filter: alpha(opacity=10); width:auto; height:auto; background-color:#000;}
.ui-draggable-dragging {z-index:9999;}
#drag_drop { text-align:center; height:100%; position:relative; background-color:#fff; overflow:hidden;}
#drag_drop .container { width:570px; margin:0 auto; padding-top:10px;}
#drag_drop .list {width:150px; float:left; padding:0 20px;}
#drag_drop .list .title {font-size:15px; font-weight:bold;}
#drag_drop .list ul {}
#drag_drop .list ul li {list-style:none; background-color:gray; margin:2px; height:20px; padding-top:3px; cursor:pointer; width:140px;}
#drag_drop .items_selected {background-color:gray; color:#fff;height:16px; width:100%;}
#drag_drop .list ul li.ui-selecting {background-color:#aaa !important;}
#drag_drop .list ul li.ddms_selected {background-color:#aaa !important;}
#drag_drop .list ul li.ddms_move {background-color:#ccc !important;}
#drag_drop .list.ddms_hover {background-color:#bbb !important;}
</style>
</head>
<div id="drag_drop" class="demo">
<div class="container">
<div class="list">
<div class="title">List 1</div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
<div class="list">
<div class="title">List 2</div>
<ul>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
</ul>
</div>
<div class="list">
<div class="title">List 3</div>
<ul>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="items_selected"></div>
</div>
</html>
Bottom line - how would you make a list mult-select, drag and drop? I've got drag and drop - I just need mult-select.
Thanks Much - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Hello Celauran:
I'm back
I believe I've come up with a reasonable solution for my problem here and have been testing another jquery option. This one is its serialize selectable. For the most part it is working, and I've learned much along the way of implementation. Now, of all things, I'm hung up on the ajax stuff. I'm trying to set up a $.post and can't get it to work. Once I get the $.post working, then I can use it to send an array. But - right now I just want to get it functioning. Following is my affected script:
The javascript:
The html button:
The button works - because it triggers alert(user);.
It is my $.post that is NOT working. I made it as simple as possible to try and find my error, but to no avail. I am completely stumped.
Thanks in advance - Pavilion
I'm back
I believe I've come up with a reasonable solution for my problem here and have been testing another jquery option. This one is its serialize selectable. For the most part it is working, and I've learned much along the way of implementation. Now, of all things, I'm hung up on the ajax stuff. I'm trying to set up a $.post and can't get it to work. Once I get the $.post working, then I can use it to send an array. But - right now I just want to get it functioning. Following is my affected script:
The javascript:
Code: Select all
<script>
/* Define variables. These variables will passed in an array for INSERT into time tables. */
var timestamp = new Date().getTime();
var user = "<?=$user?>";
var segment_date = "<?=$query_date?>";
var record_date = "<?=$record_date?>";
var unique = "'" + Math.round((timestamp / (user * 10)));
var unique_sub = unique.substr(5); /* unique_sub pulls a substring from var unique */
var block_id = user + "-" + unique_sub; /* var block_id will be used as a unique identifier for all related time records, across multiple tables */
$(document).ready(function() {
$(function () {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var isolate = $(this).text();
var index = $("#selectable li" ).index( this );
var segment_time = $(this).text();
result.append(user + "," + block_id + "," + segment_date + "," + segment_time + ",Blocked," + record_date + "<br />");
});
}
});
});
});
/* This function is called from the button. It does not work if placed inside document.ready */
function displaymessage()
{
alert(user);
$.post(block_data.php,{bind_user:user.val()},function(data){
alert("Data Loaded: " + data);
});
};
</script>Code: Select all
<button id="test" onclick="displaymessage()">Test</button>It is my $.post that is NOT working. I made it as simple as possible to try and find my error, but to no avail. I am completely stumped.
Thanks in advance - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
OOOPS!!! forgot to post content of my block_data.php script. It follows:
Again - I'm trying to keep it simple at this point.
- Thanks much - Pavilion
Code: Select all
<?php
session_start();
// include database connection file, if connection doesn't work the include file will throw an error message
include '../schedule/include/db_connect.php';
echo "found block_data.php";
if (!empty($_POST['bind_user']))
{
$user = $_POST['bind_user'];
echo "found user: " . $user . "<br />";
}
?>- Thanks much - Pavilion
Re: Newbie to Javascript, jQuery and Ajax
Shouldn't the target page be in quotes?
Code: Select all
$.post('block_data.php', { bind_user: user.val() }, etc.);Re: Newbie to Javascript, jQuery and Ajax
OH MYCelauran wrote:Shouldn't the target page be in quotes?
Code: Select all
$.post('block_data.php', { bind_user: user.val() }, etc.);
Do I feel stupid now!!!!
I'll try it after finishing up with some client work.
Thanks Celauran.
Re: Newbie to Javascript, jQuery and Ajax
Celauran:
I've another question:
Why doesn't the following:
work inside the document.ready function of this script?
It doesn't work, even if I only have a simple alert command.
I thought all javascript was suppose to be contained within document.ready?
Thanks again for all your help - Pavilion
I've another question:
Why doesn't the following:
Code: Select all
/* This function is called from the button. It does not work if placed inside document.ready */
function displaymessage()
{
alert(user);
$.post(block_data.php,{bind_user:user.val()},function(data){
alert("Data Loaded: " + data);
});
};Code: Select all
<script>
/* Define variables. These variables will passed in an array for INSERT into time tables. */
var timestamp = new Date().getTime();
var user = "<?=$user?>";
var segment_date = "<?=$query_date?>";
var record_date = "<?=$record_date?>";
var unique = "'" + Math.round((timestamp / (user * 10)));
var unique_sub = unique.substr(5); /* unique_sub pulls a substring from var unique */
var block_id = user + "-" + unique_sub; /* var block_id will be used as a unique identifier for all related time records, across multiple tables */
$(document).ready(function() {
$(function () {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var isolate = $(this).text();
var index = $("#selectable li" ).index( this );
var segment_time = $(this).text();
result.append(user + "," + block_id + "," + segment_date + "," + segment_time + ",Blocked," + record_date + "<br />");
});
}
});
});
});
</script>I thought all javascript was suppose to be contained within document.ready?
Thanks again for all your help - Pavilion