2. PHPRunner General questions
  3. [SOLVED]  Jquery Plug-In Problems
This topic is locked
[SOLVED]

 Jquery Plug-In Problems

 		4/22/2013 06:37:10
PHPRunner General questions
M
 mik 62 author

I found a script with jQuery that I liked to implement in application
http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/
if I download the program locally it works fine.
if I try to add a page for example. menu.php the sticky do not move, debugging
make_draggable function (elements)

{

/ Elements is a jquery object: /
elements.draggable ({

containment: 'parent',

start: function (e, ui) {ui.helper.css ('z-index', zIndex + +);}

stop: function (e, ui) {
/ Sending the z-index and positon of the note to update_position.php via AJAX GET: /
$. Get ('ajax / update_position.php', {

x: ui.position.left,

y: ui.position.top,

z: zIndex,

id: parseInt (ui.helper.find ('span.data'). html ())

});

}

});

}
elements.draggable is the function detects an error
thanks
C
 		cgphp 4/24/2013

Make sure to include the required script reference like described at the Step 4. Jquery UI is required for dragging operations.
M
 		mik 62 author 4/24/2013

hello Cristian,
the styles.css file, I renamed styles_sty.css
I have included the following references for "compatibility"

<LINK rel=stylesheet type=text/css href="styles_sty.css">

<script type=text/javascript src="include/js/jquery.min.js"></SCRIPT>

<script type=text/javascript src="include/js/jquery-ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.resizable.js"></SCRIPT>

<script type=text/javascript src="include/yui/yui.lib"></SCRIPT>

<script type=text/javascript src="include/js/jquery.fancybox.pack.js"></SCRIPT>
while for the script I included script.js in the head section
I did something wrong, or should I put the original link?
thank very much
C
 		cgphp 4/24/2013

Check this article http://xlinesoft.com/phprunner/docs/how_to_add_external_files.htm
M
 		mik 62 author 4/24/2013

thanks Cristian

I've done what is written, but I think there is some incompatibilities, since the stickers do not move, otherwise I would not have written on the forum.
C
 		cgphp 4/24/2013

Enable firebug and check if you get errors.
M
 		mik 62 author 4/24/2013

hi Cristian

this is the error that returns firebug:
TypeError: elements.draggable is not a function

make_draggable()menu.php (riga 113)

elements =
Object[div.note, div.note, div.note]
(?)()menu.php (riga 29)

noConflict()jquery.min.js (riga 26)

inArray()
either by entering the original references, and those adapted as before.
thank you.
C
 		cgphp 4/24/2013

Check if the Jquery UI library has been loaded properly. Firebug lists as red the files not loaded properly.
M
 		mik 62 author 4/24/2013

I'm sorry cristian

but what with what I have to do js references to evidence, those in the demo or the ones I tested the PHPRunner?
thank
C
 		cgphp 4/24/2013

PHPrunner.
M
 		mik 62 author 4/24/2013

cristian

this is what I added to the menu page visual editor:
<!DOCTYPE html>

<HTML {$html_attrs}><HEAD><TITLE>{$pagetitle}</TITLE>

<META content=IE=7 http-equiv=X-UA-Compatible>

<META content="text/html; charset=utf-8" http-equiv=Content-Type><LINK rel=stylesheet type=text/css href="styles/default.css">{BEGIN rtlCSS}<LINK rel=stylesheet type=text/css href="styles/defaultRTL.css">{END rtlCSS}{BEGIN styleCSSFiles}<LINK rel=stylesheet type=text/css href="{$stylepath}">{END styleCSSFiles}{BEGIN pageCSSFiles}<LINK rel=stylesheet type=text/css href="{$pagestylepath}">{END pageCSSFiles}<!--[if IE]><LINK rel=stylesheet type=text/css href="styles/defaultIE.css">{BEGIN IEcssFiles}<LINK rel=stylesheet type=text/css href="{$stylepathIE}">{END IEcssFiles}<![endif]-->

<LINK rel=stylesheet type=text/css href="styles_sty.css">
<script type=text/javascript src="include/js/jquery.min.js"></SCRIPT>

<script type=text/javascript src="include/js/jquery-ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.resizable.js"></SCRIPT>

<script type=text/javascript src="include/yui/yui.lib"></SCRIPT>

<script type=text/javascript src="include/js/jquery.fancybox.pack.js"></SCRIPT>



<META name=GENERATOR content="MSHTML 10.00.9200.16521">

<script>

$(document).ready(function(){

/ This code is executed after the DOM has been completely loaded /
var tmp;
C
 		cgphp 4/24/2013

If you read the article above you will see that the script references must be added after the <END body> tag (at the end of the page not in the header).
M
 		mik 62 author 4/24/2013

thanks Cristian

I followed your suggestion, now with firebug the files are loaded,

but the stickers do not move, sin would give a touch of class.
you are still a large
C
 		cgphp 4/25/2013

Check if you get errors in the Firebug console when you try to drag an element.
M
 		mik 62 author 4/29/2013

my code:
colSpan=3><!--%%bottom%%--></TD></TR></TBODY></TABLE>{$footer}{END body}

<link rel="stylesheet" type="text/css" href="styles_sty.css" />
<script type=text/javascript src="include/js/jquery.min.js"></SCRIPT>

<script type=text/javascript src="include/js/jquery-ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.resizable.js"></SCRIPT>

<script type=text/javascript src="include/yui/yui-min.js"></SCRIPT>

<script type=text/javascript src="include/js/jquery.fancybox.pack.js"></SCRIPT>

<script>

$(document).ready(function(){

/ This code is executed after the DOM has been completely loaded /
var tmp;
$('.note').each(function(){

/ Finding the biggest z-index value of the notes /

tmp = $(this).css('z-index');

if(tmp>zIndex) zIndex = tmp;

})
/ A helper function for converting a set of elements to draggables: /

make_draggable($('.note'));
/ Configuring the fancybox plugin for the "Add a note" button: /

$("#addButton").fancybox({

'zoomSpeedIn' : 600,

'zoomSpeedOut' : 500,

'easingIn' : 'easeOutBack',

'easingOut' : 'easeInBack',

'hideOnContentClick': false,

'padding' : 15

});
/ Listening for keyup events on fields of the "Add a note" form: /

$('.pr-body,.pr-author').live('keyup',function(e){

if(!this.preview)

this.preview=$('#fancy_ajax .note');
/ Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: /

this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));

});
/ Changing the color of the preview note: /

$('.color').live('click',function(){

$('#fancy_ajax .note').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));

});
/ The submit button: /

$('#note-submit').live('click',function(e){
if($('.pr-body').val().length<4)

{

alert("The note text is too short!")

return false;

}
if($('.pr-author').val().length<1)

{

alert("You haven't entered your name!")

return false;

}
$(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');
var data = {

'zindex' : ++zIndex,

'body' : $('.pr-body').val(),

'author' : $('.pr-author').val(),

'color' : $.trim($('#fancy_ajax .note').attr('class').replace('note',''))

};
/ Sending an AJAX POST request: /

$.post('ajax/post.php',data,function(msg){
if(parseInt(msg))

{

/ msg contains the ID of the note, assigned by MySQL's auto increment: /
var tmp = $('#fancy_ajax .note').clone();
tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});

tmp.appendTo($('#main'));
make_draggable(tmp)

}
$("#addButton").fancybox.close();

});
e.preventDefault();

})
$('.note-form').live('submit',function(e){e.preventDefault();});

});
var zIndex = 0;
function make_draggable(elements)

{

/ Elements is a jquery object: /
elements.draggable({

containment:'parent',

start:function(e,ui){ ui.helper.css('z-index',++zIndex); },

stop:function(e,ui){
/ Sending the z-index and positon of the note to update_position.php via AJAX GET: /
$.get('ajax/update_position.php',{

x : ui.position.left,

y : ui.position.top,

z : zIndex,

id : parseInt(ui.helper.find('span.data').html())

});

}

});

}

</script>
</BODY></HTML>
this is the error that displays firebug
TypeError: proto.plugins is undefined

add()ui.js (riga 1)

module = "resizable"
option = "alsoResize"
set = Object { start=function(), resize=function(), stop=function()}

(?)()ui.resizable.js (riga 591)

$ = function()

undefined = undefined
ui.resizable.js()ui.resizable.js (riga 814)

[Interrompi per questo errore]
...le,option,set){var proto=$.ui[module].prototype;for(var i in set){proto.plugins[...
C
 		cgphp 4/29/2013

Add the css reference before the closing head tag:

<link rel="stylesheet" type="text/css" href="styles_sty.css" /></head>


The Yui and jQuery libraries are already loaded by PHPrunner. Change your code as follows:


colSpan=3><!--%%bottom%%--></TD></TR></TBODY></TABLE>{$footer}{END body}

<script type=text/javascript src="include/js/jquery-ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.js"></SCRIPT>

<script type=text/javascript src="include/ui.resizable.js"></SCRIPT>

<script type=text/javascript src="include/js/jquery.fancybox.pack.js"></SCRIPT>

</BODY></HTML>


Paste the following code in the "Javascript onload" event of the page where you want to see the sticky notes:



var zIndex = 0;

function make_draggable(elements)

{

/* Elements is a jquery object: */



elements.draggable({

containment:'parent',

start:function(e,ui){ ui.helper.css('z-index',++zIndex); },

stop:function(e,ui){



/* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
$.get('ajax/update_position.php',{

x : ui.position.left,

y : ui.position.top,

z : zIndex,

id : parseInt(ui.helper.find('span.data').html())

});

}

});

}
/* This code is executed after the DOM has been completely loaded */
var tmp;



$('.note').each(function(){

/* Finding the biggest z-index value of the notes */

tmp = $(this).css('z-index');

if(tmp>zIndex) zIndex = tmp;

});
/* A helper function for converting a set of elements to draggables: */

make_draggable($('.note'));



/* Configuring the fancybox plugin for the "Add a note" button: */

$("#addButton").fancybox({

'zoomSpeedIn' : 600,

'zoomSpeedOut' : 500,

'easingIn' : 'easeOutBack',

'easingOut' : 'easeInBack',

'hideOnContentClick': false,

'padding' : 15

});



/* Listening for keyup events on fields of the "Add a note" form: */

$('.pr-body,.pr-author').live('keyup',function(e){

if(!this.preview)

this.preview=$('#fancy_ajax .note');



/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */

this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));

});



/* Changing the color of the preview note: */

$('.color').live('click',function(){

$('#fancy_ajax .note').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));

});



/* The submit button: */

$('#note-submit').live('click',function(e){



if($('.pr-body').val().length<4)

{

alert("The note text is too short!")

return false;

}



if($('.pr-author').val().length<1)

{

alert("You haven't entered your name!")

return false;

}



$(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');



var data = {

'zindex' : ++zIndex,

'body' : $('.pr-body').val(),

'author' : $('.pr-author').val(),

'color' : $.trim($('#fancy_ajax .note').attr('class').replace('note',''))

};





/* Sending an AJAX POST request: */

$.post('ajax/post.php',data,function(msg){



if(parseInt(msg))

{

/* msg contains the ID of the note, assigned by MySQL's auto increment: */



var tmp = $('#fancy_ajax .note').clone();



tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});

tmp.appendTo($('#main'));



make_draggable(tmp)

}



$("#addButton").fancybox.close();

});



e.preventDefault();

});



$('.note-form').live('submit',function(e){e.preventDefault();});
M
 		mik 62 author 5/3/2013

hello cristian

apologies for the absence, I've been away on business.
here is the error that returns with Chrome, following your directions
Uncaught TypeError: Object [object Object] has no method 'draggable' globalevents.js:17

Uncaught TypeError: Cannot read property 'start' of undefined ui.js:1
Works to you?