 |
|
|
I've hit a wall trying to use javascript to write a table with some image tags. I'm looping through an array of image names, then setting their src attribute. The function is creating the <img> tags, but all that displays is the 'missing image' thumbnail. The function is fired via a button. Below is my code.
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex">
<title>Testing Javascript</title>
<script type="text/javascript">
function getImages() {
// Declare variables
var allImages, vRow, vCell, vText, vImg;
var vCnt, i, j, x, y;
var vTable = document.createElement("TABLE");
var vTBody = document.createElement("TBODY");
// Insert vBody into vTable
vTable.appendChild(vTBody);
// create an array
var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
// count values in the array
vCnt = images.length;
// loop through the array of images and answers
for (i=0; i < vCnt; i++)
{
// create a row
vRow = document.createElement("TR");
// create a TD tag
vCell = document.createElement("TD");
// create IMG element
var image = images[i];
vImg = document.createElement("IMG");
vImg.setAttribute("src", "images/" + image);
// insert the img tag into the td tag
vCell.appendChild(vImg);
// insert the cell into the row
vRow.appendChild(vCell);
// insert the row into the table
vTBody.appendChild(vRow);
}
// add the table to the doc
var vTableContainer = document.getElementById("vTableContainer");
vTableContainer.appendChild(vTable);
}
// end updatePage()
</script>
</head>
<body bgcolor = "#FFFFFF">
<h2>Javascript and Images</h2>
<div id="parentDiv">
<p>
Trying to set the image source with js...
</p>
<div id="childDiv">
<form method="GET">
<input type="button" value="DISPLAY IMAGES" onClick="getImages();" />
</form>
</div>
<div id="vTableContainer"></div>
</div>
</body>
</html>
|
|
|
|
|
|
|
|
|
|
Dean, Thanks for the reply. I've been working with the jquery api just a bit today, and I really like it. Thanks for the reference!
|
|
|
|
|
|
|
Please vote if you found my answer useful.
thanks 
|
|
|
|
|
|
|
I just checked about setAttribute. It seems that only Firefox implemented it properly.
JQuery is a very good choice. for your information you can also use
imgobject.src='my/image/source.jpg'; //it will do fine
|
|
|
|
|
|
|
(1) Please don't use names of collections for private vars
so var images = new Array();
better var arArrayOfImagesObjects=new Array();
images is al pre-dfined collection: document.images
see http://msdn.microsoft.com/en-us/library/ms537461.aspx
(2) To set scr:
valueof .src is not same like pure string
preload image
var imgObjekt1=new Image(); // height and width if you want
imgObjekt1.src='whatYouWant.jpg'; // maybe with path
vImg = document.createElement("IMG"); // check pionter !
if(vImg!=null)
{
// append into object (into child of body) // append into collection images automatically
// check pointer of appended object, use e.g. var imgAppendedImgObject
if(imgAppendedImgObject!=null)
{imgAppendedImgObject.src=imgObjekt1.src; // will be (now) rendered in body
// don't use setAttribute("src", "images/" + image);
}
}
(3) FIRST optimize your code during edit and THEN check errors at run time.
to createElement and appendChild
check always pointers != null
if you use a collection like images check too
declare vars inside of function --> local vars
declare vars inside of for{} --> declare 1 time outside of for and use inside
declare constants like "image1.jpg" outside of function --> use global code e.g. at begin of js-file (easy find and edit in js-file).
|
|
|
|
|
|
|
Would someone please tell me why this js won't display images in IE 7, but works perfectly in Firefox? I'm using Windows XP, and I've double-checked all my settings in IE 7. Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
<SCRIPT LANGUAGE="JavaScript">
window.onload = fnWrite;
function fnWrite()
{
var vTable = document.createElement("TABLE");
var vTBody = document.createElement("TBODY");
var vRow, vCell, vDiv, vImg;
var i;
var images = new Array();
images[0] = "images/treble_f1.JPG";
images[1] = "images/treble_c1.JPG";
images[2] = "images/treble_d1.JPG";
images[3] = "images/treble_e1.JPG";
vTable.appendChild(vTBody);
vRow = document.createElement("TR");
vTBody.appendChild(vRow);
vCell = document.createElement("TD");
vRow.appendChild(vCell);
for (i=0; i<images.length; i++)
{
vDiv = document.createElement("DIV");
vCell.appendChild(vDiv);
vImg = document.createElement("IMG");
vImg.src = images[i];
vImg.setAttribute("alt", "image");
vCell.appendChild(vImg);
}
vTableContainer.appendChild(vTable);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Javascript Won't Work in IE 7</H1>
<div id="vTableContainer"></div>
</BODY>
</HTML>
|
|
|
|
|
|
|
Try moving the line
window.onload = fnWrite;
after the fnWrite() function block.
Unrequited desire is character building. OriginalGriff
I'm sitting here giving you a standing ovation - Len Goodman
|
|
|
|
|
|
|
Thanks for the reply, however that did not fix this problem. The IE browser does display the little thumbnail box, which tells me the image tag is there, but this line of code
vImg.src = images[i];
for some reason is not setting the source for the image. I've even tried hard coding in the source with no luck.
|
|
|
|
|
|
|
Sorry, it was a bit of a stab in the dark, but I know that there are some strange inconsistencies between IE and the other browsers.
Unrequited desire is character building. OriginalGriff
I'm sitting here giving you a standing ovation - Len Goodman
|
|
|
|
|
|
|
Thanks for the reply. Well, I removed the javascript from the HTML page and put it in a js file, and now it works. Go figure... Thanks a lot, Microsoft. :(
|
|
|
|
|
|
|
This[^] may help explain things.
Unrequited desire is character building. OriginalGriff
I'm sitting here giving you a standing ovation - Len Goodman
|
|
|
|
|
|
|
I've just tried your code with MS-IE7 on WXP and it works for me! I have a similar problem with code generated on the fly and displayed using IE.navigate using automation - the images come up with the red [x] box or the 4 symbol box but if I show the source, save it, run the saved version the images come up correctly. Are you using IE automation or simple file opening?
|
|
|
|
|
|
|
A massive problem of Microsoft
If you want reders animated gifs then that will by chrashed by Internet Explorer
preload img with '?' after suffix (:gif?) have no result: animated gif even not rendered.
e.g.
// X00 is an existing image object
// X01 is an existing preloaded image object with filled .src of an animated gif
X00.src=X01.src+'?'; // only if IE exists
X00.src=X01.src; // for opera etc.
preload image
var imgObjekt1=new Image(); // height and width if you want
imgObjekt1.src='animated.gif'; // maybe with path, but not with '?'
vImg = document.createElement("IMG"); // check pionter !
if(vImg!=null)
{
// append into object (into child of body) // append into collection images automatically
// check pointer of appended object, use e.g. var imgAppendedImgObject
if(imgAppendedImgObject!=null)
{imgAppendedImgObject.src=imgObjekt1.src+'?'; // will be (now) rendered in body in IE
}
}
|
|
|
|
|
|
|
Hi,
i am not able set the args.isValid as false for JS function...which is not having custom validator..
find the code below:
<asp:LinkButton runat="server" ID="btnApply" TabIndex="1" CssClass=" primary" OnClientClick = "return ApplyClick(this);" >
JS Code:
function Applyclick(args) {
if (errMsg != null) {
args.IsValid = false;
}
return false;
}
thanks in advance
modified 2 Feb '12.
|
|
|
|
|
|
|
I am sorry I dont know asp.net but yet
what is args and who is calling ApplyPromotionClick ???
I know I am coward since the day I know that fortune favors the brave
|
|
|
|
|
|
|
Sorry function name should be applyclick
|
|
|
|
|
|
|
In that case Check your Firefox or Chrome error message. I cant recall any html object property IsValid. I think you need to say more clearly what you need
I know I am coward since the day I know that fortune favors the brave
|
|
|
|
|
|
|
Hello everyone, I would like to know if you can help me out in a simply task yet I cant get my way around it.
Ive manage to update a single DIV but cant update a php file with several different DIV.
Data is comming from a mysql query using a separate php file.
This is what ive got, please can you help me write a simple code to recover more than one piece of data from a mysql query and update all the divs of an html,php file?
<pre lang="Javascript"> <<pre lang="xml">html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
setInterval(get,1000);
function get() {
$.post('data.php', {
},
function(output){
var datosobtenidos = $('#age').html(output);
document.getElementById('diesel').innerHTML = datosobtenidos; //"ADIOS";
});
}
</script>
</head>
<body>
<h2>JavaScript Auto Refresh Page</h2>
<p>This code will refresh you page in 6 seconds. We have used OnLoad() Event function to call our function.
Note : Please don’t use a lot of auto refresh page because it is kind of annoying and your sever bandwidth will be decreasing, one way you are increasing hits to server.
<p>
<div id="age"></div>
<br />
<br />
<div id="diesel"></div>
</p>
</body>
</html
>
|
|
|
|
|
|
|
Call your page twice with two different parameter.
1. age
2. diesel
when age would reply then update the age div
when diesel would reply then update the diesel div
|
|
|
|
|
|
|
Guys; I called the function RequestTheServer() in client-side, but no request reatched the server.
But when I replaced the data property ctl00$ContentPlaceHolder1$txtValue in function GetData() to txtValue_text every gone OK.
Please see the code below:
function RequestTheServer() {
$.ajax({
type: "POST",
url: '/Default.aspx',
data: GetData(),
});
}
function GetData() {
var data = {
__EVENTTARGET: '__Page',
__EVENTARGUMENT: 'LRep',
ctl00$ContentPlaceHolder1$txtValue: $get('ctl00_ContentPlaceHolder1_txtValue').value
};
return data;
}
I am wondering why this happened with me since it doesn't look logical.
Help people,so poeple can help you.
|
|
|
|
|
|
|
In the posted AJAX request the data will be sent as name value pairs. To make any sense of the parameters one must know which parameter is which and this is usually done by giving a name to this parameter. You have three parameters here and the first two are called __EVENTTARGET and __EVENTARGUMENT. I guess in your Default.aspx these parameters are evaluated to figure out what is to be done. The name of your third parameter was given in a way that suggests it is some kind of client side ID the way it is rendered by ASP.NET, but in order for your code to figure which parameter to retrieve you would never use the client side ID for the parameters name as this ID is allowed to change and can thus not be used to identify a parameter when it is processed at the server side.
From what you've told us one can only assume that when your server side code (Default.aspx) retrieves the third parameter it tries to fetch it by its name and that name must be txtValue_text.
Regards,
Manfred
"With sufficient thrust, pigs fly just fine."
Ross Callon, The Twelve Networking Truths, RFC1925
|
|
|
|
|
|
|
Sir;
Consider the code in Using JQuery ajax with UpdatePanels[^].
I use __EVENTTARGET and __EVENTARGUMENT to cause a regular postback which i can catch with IPostBackEventHandler.RaisePostBackEvent().
now consider a textbox with id of "txtValue" used to get a value from the user to be used to evaluate other data list. this textbox would be rendered as
<input type="text" id='<%= txtValue.ClientID %>' name='<%= txtValue.UniqueID %>' /> and when a form containing the text box is submitted .NET puts the request value of Request.Form(txtValue.UniqueID) in the property txtValue.Text.
So, I am trying to put txtValue.UniqueID in the request data to use txtValue.Text regularly.
Help people,so poeple can help you.
|
|
|
|
|
|
|
The point of using an UpdatePanel is to produce asynchronous partial page updates. JQuery AJAX is also used for asynchronous processing and can be used to update the page. I don't see the point of trying to use them both. You could just trigger the UpdatePanel.
No comment
|
|
|
|
|
|
|
Sir Mark Nischalake;
Sometimes we face problems so we should use alternative ways to solve them. I know that UpdatePanels and asynchronous post-backs are the opposite of JQuery ajax, but sometimes we should use them together
To clarify the idea please consider this article Asynchronous File Upload[^]
No Comment either, not even a Like 
Help people,so poeple can help you.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin