Умеете ли вы читать этикетку товара?
•Download as PPT, PDF•
0 likes•971 views
The user is trying to implement a tabbed container that displays different images for each tab clicked using Prototype.js. When a tab is clicked, an AJAX request retrieves the image from a PHP file but the image only blinks and does not display. The user provided their code and is seeking help to resolve the issue.
![−> Ajax using prototype.js blinks image but doesn't display it... Help
cursor:pointer;
border:0px ;
border−bottom:0;
}
#tabbed_content {
height:350px;
clear:both;
border:0px ;
}
</style>
</head>
<body>
<div id="container">
<div class="tabul" id="tab1"><img src="img/tab_software_selected.jpg" width="68" height="17" /></div>
<div class="tabul" id="tab2"><img src="img/tab_ease_light.jpg" /></div>
<div class="tabul" id="tab3"><img src="img/tab_customize_light.gif" /></div>
<div id="tabbed_content"></div>
</div>
<script type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabul');
for (var i = 0; i < tabs.length; i++) {
$(tabs[i].id).onclick = function () {
getTabData(this.id);
}
}
}
function getTabData(id) {
var url = 'process_image.php';
var pars = 'id=' + id ;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onComplete: showResponse} );
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$('tabbed_content').style.display = 'block';
$('tabbed_content').innerHTML = newData;
return false;
}
init();
</script>
</body>
</html>
Sincerely,
−> Ajax using prototype.js blinks image but doesn't display it... Help 2](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Умеете ли вы читать этикетку товара?
Similar to Умеете ли вы читать этикетку товара? (20)
More from Оксана Одариченко
More from Оксана Одариченко (20)
Умеете ли вы читать этикетку товара?
- 1. −> Ajax using prototype.js blinks image but doesn't display it... Help −> Ajax using prototype.js blinks image but doesn't display it... Help Source: http://newsgroups.derkeiler.com/Archive/Comp/comp.lang.javascript/2010−01/msg01335.html • From: Steve JORDI <stevejordiK__I_L_LSP_AM@xxxxxxxxxxx> • Date: Thu, 21 Jan 2010 15:04:46 +0100 Hi, I'm trying to implement a tabbed container on my main page which will display a different image in a DIV for each tab pressed. The problem is that I reproduce some working code I found on the web but the image just blinks and disappear. It's not in a form submitting anythings, so I didn't find a way to use a "return false;" to keep the image displayed. Any help on the following code? (directories are correct: 'js' contains prototype.js 1.6.0.3 and all the rest, the pics are in the same "." directory) The images are to be displayed in "<div id="tabbed_content"></div>" Thanks for any tip. −−−−−−−−−−− <!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> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <title>MyTitle</title> <style type="text/css"> #container { width:450px; color: white; } ..tabul { width:50px; margin−right:10px; padding:4px; text−align:center; float:left; −> Ajax using prototype.js blinks image but doesn't display it... Help 1
- 2. −> Ajax using prototype.js blinks image but doesn't display it... Help cursor:pointer; border:0px ; border−bottom:0; } #tabbed_content { height:350px; clear:both; border:0px ; } </style> </head> <body> <div id="container"> <div class="tabul" id="tab1"><img src="img/tab_software_selected.jpg" width="68" height="17" /></div> <div class="tabul" id="tab2"><img src="img/tab_ease_light.jpg" /></div> <div class="tabul" id="tab3"><img src="img/tab_customize_light.gif" /></div> <div id="tabbed_content"></div> </div> <script type="text/javascript"> function init () { var tabs = document.getElementsByClassName('tabul'); for (var i = 0; i < tabs.length; i++) { $(tabs[i].id).onclick = function () { getTabData(this.id); } } } function getTabData(id) { var url = 'process_image.php'; var pars = 'id=' + id ; var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onComplete: showResponse} ); } function showResponse (originalRequest) { var newData = originalRequest.responseText; $('tabbed_content').style.display = 'block'; $('tabbed_content').innerHTML = newData; return false; } init(); </script> </body> </html> Sincerely, −> Ajax using prototype.js blinks image but doesn't display it... Help 2
- 3. −> Ajax using prototype.js blinks image but doesn't display it... Help Steve JORDI (Remove the K_I_L_LSPAM from my email address) −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− 1197 Prangins Email: stevejordiK_I_L_LSPAM@xxxxxxxxxxx Switzerland WWW: www.sjordi.com −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− Volcanoes at www.sjordi.com/volcanoes MovieDB at www.sjmoviedb.com −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− . −> Ajax using prototype.js blinks image but doesn't display it... Help 3