Strange Cross Browser Issue

mongoose0031800 · August 14, 2011

Hey All,

The following code works on all browsers when I'm testing locally on my computer. When I put it live though on my server, it works in IE, but not FF, Chrome, or Safari. I'm not sure what the issue is. The code uses Jquerys sortable function and AJAX with PHP to make a drag and drop script which allows the user to organize the items easily.

Like I said, I'm not sure what the issue is...can anyone help? Is it my PHP, my Jquery at the top, something else? I know it's probably something small and stupid. Also, I know there is a possibility this might not be a PHP problem but I don't know if thats the case for sure and I put it in this thread because no one looks at the JS or other threads too often and it just might be a PHP issue. Please don't move the thread for my sake so there is a chance I might get some help. Thanks so much!

PHPFreaks rocks!

Mongoose

<?php
//disable magic quotes
require_once('includes/disable_magic_quotes.inc.php');
?>
<!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>Change Show Order</title>
<link rel="stylesheet" type="text/css" href="styles/view.css" media="all">
<link rel="stylesheet" type="text/css" href="styles/ui-lightness/jquery-ui-1.8.15.custom.css" media="all">
<script type="text/javascript" src="javascript/view.js"></script>
<script type="text/javascript" src="javascript/calendar.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.15.custom.min.js"></script>
<style>
ul#show_list {
list-style:none;
margin:0;
padding:0;
}

ul#show_list li {
float:left;
width:153px;
padding:1px;
margin: 3px 3px 3px 0;
}

.ui-state-highlight { height: 206px; }

#info {
display: block;
padding: 10px; 
margin: 0px;
border: 1px solid #333;
background-color: #efefef;
}
/*
li.show_listing_container {
float:left;
margin:5px 0px 10px 0px;
font-family:Arial, Helvetica, sans-serif;
width:169px;
padding:0;
}

li.show_listing_container a{
width:169px;
}
*/
</style>
<script type="text/javascript"> 
$(document).ready(function() { 
  $("#show_list").sortable({ 
    handle : ".handle",
    update : function () { 
      var order = $("#show_list").sortable("serialize"); 
      $("#info").load("scripts/process_show_order.php?"+order); 
    } 
  }); 
}); 
</script>
</head>
<body id="main_body" >

<img id="top" src="images/top.png" alt="">
<div id="form_container" style="width:716px">

	<h1><a>Add Show</a></h1>
	<form id="form_200831" class="appnitro" enctype="multipart/form-data" method="post" action="">
		<div class="form_description">
			<h2>Change Show Order</h2>
			<p>Use the form below to drag and drop the shows into the order you would like them to be displayed in.</p>
			<?php require_once('includes/admin_nav.inc.php'); ?>
		</div>
		<pre style="margin:0; padding:0;"> 
			<div id="info">Drag shows to update show order.</div> 
		</pre> 
		<ul id="show_list">
		<?php
		require_once('scripts/dbconfig.php');

		$get_shows = mysql_query("SELECT * FROM shows WHERE front_page_featured = '1' ORDER BY position ASC");

		while($row = mysql_fetch_array($get_shows)) {
		?>
			<li id="listItem_<?php echo $row['id']; ?>">
				<div class="show_listing_image"><img src="images/show_images/small/<?php echo $row['picture_1']; ?>" border="0" width="153px" class="handle"></div>
				<div class="show_listing_title"><?php echo $row['title']; ?></div>
				<div class="show_listing_date"><?php echo date("l, F jS", strtotime($row['date'])); ?></div>
			</li>
		<?php
		}
		?>
		</ul>
	</form>
	<div id="footer">
	</div>
</div>
<img id="bottom" src="images/bottom.png" alt="">
</body>
</html>

PFMaBiSmAd · August 14, 2011

Your forgot to tell us what problem, error, or symptom you are seeing in front of you that leads you to believe that it does not work.

mongoose0031800 · August 14, 2011

I get no error at all. The only symptom is that in IE I can drag and drop the items, FF, Chrome, Safari I cannot. But if I'm my local on my computer the drag and drop works in all browsers.

xyph · August 14, 2011

This TOTALLY seems like a server-side issue.

WatsonN · August 14, 2011

What you need to do is on the server make sure all the files are where the page is looking and that it can be opened by the script

mongoose0031800 · August 14, 2011

What you need to do is on the server make sure all the files are where the page is looking and that it can be opened by the script

That is one of the first things I did. That's a pretty normal step in the beginning of my debugging process and should be of any experienced developer in my opinion, but thanks for the help!

Mongoose

jcbones · August 14, 2011

Did you open the firefox error console, and see if the javascript is throwing an error?

WatsonN · August 15, 2011

That is one of the first things I did. That's a pretty normal step in the beginning of my debugging process and should be of any experienced developer in my opinion, but thanks for the help!

Just covering the basics

mongoose0031800 · August 15, 2011

Yes I've checked firebug and it appears it is throwing no errors. Like I said, it works in FF as long as it is local on my computer...only when I put it live does it quit working. All the required files are on the server and are accessible. Nothing makes any sense. I've also made a post in the jQuery forum but haven't gotten any response.

Mongoose

mongoose0031800 · August 15, 2011

Firebug did give me errors. The errors keep referring to this line.

$(document).ready(function() {

Any idea? Or is there anything I can provide to help narrow this down?

PFMaBiSmAd · August 15, 2011

You haven't exactly stated what about it does not work.

Is the data displayed on the page? Can you click on an item and drag it to a new position? Is the updated position not being saved to the server so that the next time the data is displayed it is back to the original starting position?

Define: 'it quits working' so that someone who is not standing right next to you could help you with what you saw when you try it.

Can you post a link to the site? Does your page require you to be logged in (for all we know you have disabled cookies from your live domain in the browsers that it does not work in and you are not actually logged in.)

mongoose0031800 · August 15, 2011

I'm sorry, I should have been more specific..I've just been pulling so much hair out of my head that I wasn't thinking.

Here is a link - http://sharpenedconception.com/development/jumpin_jupiter/admin_show_order.php

Login is disabled for development purposes. The drag and drop doesn't function when it is live. If it's local it does. It acts like the required files are not on the server or the code isn't coded properly but I've checked all of this and everything checks out fine.

Also, maybe this will help, a while back I ran into a problem that really sticks out in my mind and I think was along the same lines of what is going on here.

I had some javascript or jQuery that wasn't working. It was the same issue, it worked on my local machine but not when I put it live no matter where it was. Finally, after much hair pulling, I did something simple but I can't remember what it was. I think I changed some " or ' to the opposite ' or " in the <script> tags or did something else to the <script> tags. I don't know...I can't remember and I've been searching through old code to try and get a hint as to what it was but I've had no luck either. Maybe this will help.

The link below seems like he had the same problem I had a while back and fixed it the same way but I don't fully understand what he did to fix it.

http://stackoverflow.com/questions/3065904/jquery-draggable-not-working-in-chrome-safari

Please let me know if any of this helps at all.

**EDIT

Now in the jQuery forum someone else said that the drag and drop at the link I provided works fine for him in Chrome. Can someone else test this in Chrome or any other browser besides IE? I just tested it again in Chrome (cleared cache), FF, Safari and it still doesn't work for me.

mongoose0031800 · August 15, 2011

I just had someone else tell me it works fine for him in FF 3.6...sounds like a cache issue. But I disabled cache and I still don't have it working in FF so I'm going try downgrading from FF 5.0 to FF 3.6 and see what happens although that shouldn't matter since it works in FF 5.0 locally. This is really strange..

mongoose0031800 · August 15, 2011

No luck still. This has to be a cache issue..

PFMaBiSmAd · August 16, 2011

Your site, at the link you posted, currently works for me in FF6.

I did however try your original posted code on my development system and it would not let me select and drag an item when the following line was in the code - handle : ".handle",. Removing that line allowed me to select and drag items. I don't know if that was because I didn't have all the code needed to duplicate the offending page or if that particular line is a problem in itself.

Sign In

Strange Cross Browser Issue

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information