Menu
I have a php page, wich hase some external links to js files in the head, and on body I have some selectable elements from jquery(sometimes I do not have them, because thouse elements are generated if the user is login). The problem is in the javascript I wrote, I get this error: TypeError: Object [object Object] has no method 'disableSelection'. Even if I put a ".sortable" element in the php, I still get this error. In html looks like it has no problem with that and works fine. The code that gives me the error is this:
Sorry for my english. I can put the hole code if you want but is too big. I think the problem is because the javascript is loading too fast or before of the html is generated.( I tried to put a variable in the js and that function under a if() but is not working)
The javascipt(scripturi.js):
var logat=0;
$(document).ready(function() {
$( ".sortable0" ).sortable();
$( ".sortable0" ).disableSelection();
$( ".sortableIt" ).disableSelection();
$( ".sortableIt" ).sortable(
{
stop: function(event, ui)
{
for(var i=0;i<ui.item.parent().children().length;i++)
{
var x =ui.item.parent().children()[i].id;
//update items din acest sertar
//updateItemServer(x,i)
//alert(x+ " " + i);
}
}
});
$( ".sortable" ).disableSelection();
$( ".sortable" ).sortable({ stop: function(event, ui) {reparaZindex();}});
});
function updateItemServer(x,i){
//alert(x+" "+i);
}
function incarca(){
$(document).ready(function (){
$.getJSON("http://students.info.uaic.ro/~calin.chifan/api/compartiment/list.json", function(data){
var html = [];
/* loop through array */
$.each(data, function(index, d){
addCompartiment(d.nume_comp,d.id);
});
}).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
alert("error occurred!");
});
});
}
function addCompartiment(nume,id){
$("#sortable0").append('<ul class="sortable" id'+ +'>');
}
function updateIndexServer(x,y){
//alert(x+" "+y);
//trimite id-ul x si pozitia y
}
function reparaZindex(){
$.each($(".sortable > li"), function()
{
if($(this).find('.sertar')[0])
{
$(this).find('.sertar').eq(0).css('z-index',(500-$(this).index()*2));
updateIndexServer($(this).find('.sertar')[0].id,$(this).index())
}
if($(this).find('.sortableIt')[0])
$(this).find('.sortableIt').eq(0).css('z-index',(501-2*$(this).index()));
});
}
window.onload = function() {
//incarca();
//reparaZindex();
}
It's strange that in the html I don't have this problem. After the user is logedin I want to call a function that will append some ul (.selectable) elements but so far it can't even notice that there are some elements. If you want I can give you a link to the page I work.
A little bit of the php:
<?php
ini_set('session.save_path', '/tmp/');
session_start();
$logged=0;
if(isset($_SESSION['autentificat']))
{
if($_SESSION['autentificat']==1)
$logged=1;
}
$user= $_COOKIE['user'];
echo'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
<title>Proiect Web</title>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="login.js"></script>
<script src="scripturi.js"></script>
<script src="dulap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="login.js"></script>
</head>'
;
if($logged==1)
{
echo'<body onload="loadYeslog()">';
}
else {
echo'<body onload="loadNoLog()">';
}
echo
'<div class="mainbar">
<div id="loginContainer">
<div id="loginButton"><span style="display:block;width:48px;height:27px; ">Login</span></div>
<div id="logoutButton" class="barbutton" style"cursor:pointer;"><span>Logout</span></div>';
if($logged==0)
{
echo'<div id="welcomeLabel" class="barbutton"><span>Not Logged in!</span></div>';
}
else
{
echo '<div id="welcomeLabel" class="barbutton"><span>Welcome '.$user.' !</span></div>';
}
echo '<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm" action="autentificare2.php" method="POST">
<fieldset id="body">
<fieldset>
<label for="username">
Username</label>
<input type="text" name="user"/>
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password"/>
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span><a href="recovery.php" style="color: white;">Forgot your password?</a></span>
<div id="regbut"><span>New user ? </span></div>
</form>
</div>
<div id="regbox">
<form id="registerform" action="register.php" method="POST">
<table style="margin-top:10px;">
<label for="Dusername">
REGISTAR FOARM!!! </label>
<tr>
<td>
<label for="Dusername">
Username: </label>
</td>
<td>';
?>
<input type="text" name="Duser" placeholder="Introduceti numele de cont dorit" onblur="javascript:semnaleazaExistaNume (this.value, '')" />
</td>
<td>
<span class="ascuns" id="eroareNume">Numele deja exista, alegeti altul... </span>
</td>
</tr>
<tr>
<td>
<label for="Dpassword">
Password: </label>
</td>
<td>
<input type="password" name="Dpassword"/>
</td>
</tr>
<tr>
<td>
<label for="Demail">
E-Mail: </label>
</td>
<td>
<input type="text" name="Demail"/>
</td>
</tr>
<tr>
<td>
<input type="submit" id="register" value="Register" />
</td>
</tr>
</fieldset>
</table>
</form>
</div>
</div>
</div>
<div class="box">
<ul class="sortable0" id="sortable0">
<ul class="sortable" id="sortableColona1">
<li id="sertar1" style="z-index:10">
<img id="sertar11" class="sertar" ONCLICK="openS(this)" style="position: relative;z-index:500;aligh:center;" src="img/sertar1.png">
<ul id="ui items1" style="z-index:501;position:relative;visibility:hidden;" class="sortableIt" >
<li id="item1" class="ui-state-default">1</li>
<li id="item2" class="ui-state-default">2</li>
<li id="item3" class="ui-state-default">3</li>
<li id="item4" class="ui-state-default">4</li>
<li id="item5" class="ui-state-default">5</li>
<li id="item6" class="ui-state-default">6</li>
<li id="item7" class="ui-state-default">7</li>
<li id="item8" class="ui-state-default">8</li>
<li id="item9" class="ui-state-default">9</li>
<li id="item10" class="ui-state-default">10</li>
<li id="item11" class="ui-state-default">11</li>
<li id="item12" class="ui-state-default">12</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
384
You need to place the jQuery code in the $(document).ready(); function and then it will run only when the page loads like so:
$(document).ready(function() {
// your code here
});
This will make sure it only runs when the page and all the DOM elements have completely loaded.
UPDATE:
Can you add the following code in your HTML head section as you need jQuery UI to make the relevant method call:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Make sure you include it after you have loaded jQuery, so the head section code should be like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="login.js"></script>
<script src="scripturi.js"></script>
<script src="dulap.js"></script>
<script src="login.js"></script>
First thing is to make sure you have jQueryUI loaded since the method you are calling belongs to its API. We can take things forward from there!
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
