AJAX not displaying inside jquery accordion

bravo14 · December 22, 2011

I have tried to populate part of a jquery accordion with content generated using AJAX, the html markup for the whole page is below, the offending section is the

<img id="img" src="images/car-outline.jpg"/>

<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> 
<html>
<head>
       <title>Trade-Bidz :: View Lot :: RENAULT SCENIC EXPRESSION 16V A MPV</title>
        <link href="style/trade-bidz.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
        <link rel="stylesheet" href="css/template.css" type="text/css"/>
        <script src="js/jquery-1.6.min.js" type="text/javascript">
        </script>
        <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
        </script>
        <script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
        </script>
        <script src="js/contrib/other-validations.js" type="text/javascript" charset="utf-8">
        </script>
        <script>
            jQuery(document).ready(function(){
                // binds form submission and fields to the validation engine
                jQuery("#formID").validationEngine();
            });
        </script>

        <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'></script>
	<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
       <script type='text/javascript' src='source/jquery.tag.js'></script>
       <link media="screen" rel="stylesheet" href="css/jquery.tag.css" type="text/css" />
       <link media="screen" rel="stylesheet" href="css/jquery-ui.custom.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="style/jquery.lightbox-0.5.css" media="screen" />
    <script>
    $("#img").tag({
canDelete: false,
canTag: false,
});
</script>


<script type="text/javascript">
    $(function() {
        $('.gallery a').lightBox();
    });
    </script>
      <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>

</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<table>
<tr>
<td colspan="2">
<div id="header">

<div id="login_form">

<form name="login" method="post" action="login.php">
<table><tr><td>Username:</td><td><input type="text" name="username"/></td></tr>
<table><tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<table><tr><td></td><td><input type="hidden" name="redirecturl" value="/lot.php?lot_id=34"/></td></tr>
<table><tr><td></td><td><input type="submit" value="Login" name="submit"/></td></tr>
</table>
</form></div>
<img src="images/logo.jpg" width="300" /></div>
</td>
</tr>
<tr>
<tr>
<td colspan="2">
<div id="nav_head">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="browse.php">Buying</a></li>
<li><a href="sell-vehicle.php">Selling</a></li>
<li><a href="contact-us.php">Contact Us</a></li>
<li><a href="terms.php">Terms</a></li>
<li><a href="my-trade-bidz.php">My Trade-Bidz</a></li>
<li><a href="how-it-works.php">How It Works</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td width="200">
<div class="left_column_box">
  <h3>Search Items</h3>
  <form method="post" action="browse.php">
  <table width="100%">
  <tr><td>Make:</td>
  <td><select name="make" onchange="reload(this.form)">
    <option selected="selected">Please select...</option>
    <option value=""></option><option value="RENAULT">RENAULT</option>    </select></td>
  </tr>
  <tr><td>Model:</td><td>
  <select name="model">
  <option>All Models</option><option value=""></option>  </select>
  </td></tr>
  <tr><td>Fuel Type:</td>
  <td>
  <select name="fuel">
  <option selected="selected">Please Select</option>
  <option value="diesel">Petrol</option>
  <option value="diesel">Diesel</option>
  </select>
  </td></tr>
    <tr><td>Sort by:</td>
  <td>
    <select name="fuel">
  <option value="end_date_time DESC">Time - Ending First</option>
  <option value="current_price ASC">Price - Cheapest First</option>
  </select>
    </td></tr>
  <tr><td></td><td><input type="submit" name="make_model_search" value="Search"/></td></tr>
  </table>
  </form>
  </div>
  <div class="left_column_box">
  <h3>Ending Soon</h3>
  There are no lots completing today  </div>
  <div class="left_column_box">
  <h3>Other Selected Lots</h3>
  <div class="mini_lot">
        <h4> </h4>
	<img src="photos/"/><br/>
	Current Bid: £0<br/>
	Time Left: Countdown will go here<br/>
	<a href="lot.php?lot_id=42">View Lot</a><br/>
        </div><div class="mini_lot">
        <h4>RENAULT SCENIC EXPRESSION 16V A</h4>
	<img src="photos/20.jpg"/><br/>
	Current Bid: £3434<br/>
	Time Left: Countdown will go here<br/>
	<a href="lot.php?lot_id=34">View Lot</a><br/>
        </div>  </div>
</td>
<td>
User ID: 0<br />
Seller ID: 39<br />
Allowed to Bid: no<br />
Allowed to Watch: no<br />

<img src="photos/20.jpg"/>
<div id="countdown">This lot ends is <span class="countdown">Insert Countdown here</span></div>
   <div id="accordion">
<h3><a href="#">Main Details</a></h3>
<div>
  <table>
<tr>
<td>Make/Model</td><td>RENAULT SCENIC EXPRESSION 16V A MPV</td></tr>
<tr>
<td>Date of Manufacture:</td><td></td></tr>
<tr>
<td>Date of First Registration:</td><td></td></tr>
<tr>
<td>Colour:</td><td>GREEN</td></tr>
<tr>
<td>Number of Doors:</td><td>5</td></tr>
<tr>
<td>Engine Size:</td><td>1598</td></tr>
<tr>
<td>Fuel Type:</td><td>PETROL</td></tr>
<tr>
<td>Gearbox Type:</td><td>TIPTRONIC AUTOMATIC</td></tr>
<tr>
<td>Previous Keepers:</td><td>1</td></tr>
<tr>
<td>BHP:</td><td>115.10</td></tr>
<tr>
<td>Emissions:</td><td>0.00</td></tr>
<tr>
<td>Tread Depths:</td>
<td>F/O/S 0mm F/N/S 0mm</td>
</tr>
<tr>
<td></td>
<td>R/O/S 0mm R/N/S 0mm</td>
</tr>
<tr><td>Service History:</td><td>0</td></tr>
<tr><td>Vehicle Condition:</td><td>Please select V	</td></tr>
<tr><td>MOT Date:</td>
  	<td>0000-00-00</td>
</tr>
</table>
</div>
    <h3><a href="#">Photos</a></h3>
<div>
        <div class="gallery">
        <ul><li><a href="photos/20.jpg"><img src="photos/20.jpg" title=""/></a></li></ul>
       </div>	</div>
<h3><a href="#">Damage</a></h3>
<div>
        <img id="img" src="images/car-outline.jpg"/>
</div>
<h3><a href="#">Seller Details</a></h3>
<div>
        Seller Details Here
  	</div>
     </div>

  <div>
  
      
  <table width="60%">
  <tr><td width="40%">Current Price</td><td>£3434</td></tr>
  <tr><td>Current High Bidder</td><td>Boyce Autos<input type="hidden" name="high_bidder" value="42" readonly="readonly" /></td></tr>
  </table>You need to <a href="login.php">login</a> to be able to bid on this item  </div>

    <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        <div class="fb-like" data-send="true" data-show-faces="false" data-font="arial"></div>

</td>
</tr>
<tr>
<td colspan="2">

</td>
</tr>
<tr>
</body>
<script>
	$(document).ready(function(){

		$("#img").tag({
			save: function(width,height,top_pos,left,label,the_tag){
				$.post("ajax.php",{'action':'save','width':width,'height':height,'top':top_pos,'left':left,'label':label},function(id){
					the_tag.setId(id);
				});
			},
			remove: function(id){
				$.post("ajax.php",{'action':'delete','id':id});
			}
		});

		$.getJSON("ajax.php",{'action':'list','lot_id':34},function(tags){
			$.each(tags, function(key,tag){
				$("#img").addTag(tag.width,tag.height,tag.top,tag.left,tag.label,tag.id);
			});
		});

	});
</script>
</html>

If I take the <img id="img" src="images/car-outline.jpg"/> out of the accordian then the image is displayed, so it suggests that there is a conflict on the page somewhere, any help you can provide will be much appreciated.

bravo14 · January 6, 2012

Is anybody able to help me with this, I am not sure if it is easy to solve or if it is not possible.

trq · January 6, 2012

The problem here is that you have posted too much code. Narrow your problem down to a reasonable example and someone might actually look at it.

bravo14 · January 16, 2012

Point taken, I have cut down the code, so below is the initialisation of the jqueryaccordion and the image tagging

    <script>
    $("#img").tag({
canDelete: false,
canTag: false,
});
</script>


<script type="text/javascript">
    $(function() {
        $('.gallery a').lightBox();
    });
    </script>
      <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>

Below is the code for the accordian

<div id="accordion">
<h3><a href="#">Main Details</a></h3>
<div>
  Vehicle details are going here	</div>
    <h3><a href="#">Photos</a></h3>
<div>
        <div class="gallery">
Photos are showing here
       </div>	</div>
<h3><a href="#">Damage</a></h3>
<div>
        <img id="img" src="images/car-outline.jpg"/>
</div>
<h3><a href="#">Seller Details</a></h3>
<div>
        Seller Details Here
  	</div>
     </div>

  <div>

The problem is, if I take the img tag outside of the accordian then the image shows correctly, but it doesn't show when inside the accordian, if you need any more then please let me know.

Sign In

AJAX not displaying inside jquery accordion

Recommended Posts

bravo14

Link to comment

Share on other sites

bravo14

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

bravo14

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information