Jump to content

AJAX not displaying inside jquery accordion


bravo14

Recommended Posts

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.

 

 

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.