Click here to Skip to main content
14,391,651 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi, I need onclick event inside img tag inside popup.body.innerhtml.
I tried with the following code, but click event is not firing with the below code.
I couldnot call either JavaScript function or server side function.
Can you please help.
Thank you.
code:
oPopup.document.body.innerHTML = '<a href="#"><td> <img ID="im1"  alt="im1" height="350" runat="server" onclick="image1()" src="Source/Images/' + s[1] + '" /></td><td><img ID="im2" alt="im2" height="350px"  onClick="" src="Source/Images/' + s[2] + '" /></td><td><img alt="im3" ID="im3"height="350px"  onClick="" src="Source/Images/' + s[3] + '" /></td></a>';

In that image onclick I couldnot call any function either client side or server side.
Any suggestions?
Posted
v3
Comments
   
So, you are saying that the function image1() is not firing, right?
If yes, then please post all the relevant codes.
This much of code is not sufficient.
santulas 19-Dec-12 3:52am
   
ya exactly. i need to call a function from onclick of img tag which is inside popup.document.body.innerhtml.

some more code: function richToolTip(Target) {

if (Target.title!='') {

var oPopup = window.createPopup();

var popupBody = oPopup.document.body;



popupBody.style.backgroundColor = "#f0f8ff";

popupBody.style.border = "solid black 1px";

var i = Target.title.indexOf(",");

if (i > 0) {

var n = Target.title;

var s = new Array();

s = n.split(",");

var nodevalue = s[0];

var img1 = s[1]; var img2 = s[2];

var img3 = s[3];



document.getElementById('<%=hiddenfield1.ClientID%>').value = nodevalue;



oPopup.document.body.innerHTML = '<td> <img ID="im1" alt="im1" height="350" önclick="javascript:image1()" src="Source/Images/' + s[1] + '" /></td><td><img ID="im2" alt="im2" height="350px" önClick="" src="Source/Images/' + s[2] + '" /></td><td><img alt="im3" ID="im3"height="350px" önClick="" src="Source/Images/' + s[3] + '" /></td>';

}

popupBody.style.overflow = "auto";

oPopup.show(300, 160, 750, 400, "");

}
}


dats my javascript funcn.
   
Sorry I tried, but I need the HTML code also. Please provide.
Thanks...
[no name] 19-Dec-12 2:48am
   
You are keeping more then one image tags inside a single anchor tag. This is wrong.
Can you please specify what you exactly want to do here?
santulas 19-Dec-12 3:57am
   
Even I dont need that anchor tag..even if I remove the anchor tag same issue persists. I need to call a function from onclick of an img tag.to ur kind notice the img tag is inside popup.document.body.innerhtml as I ve shown in the code.
[no name] 19-Dec-12 5:16am
   
Try like this once.
oPopup.document.body.innerHTML = '<table><tr><td> <img ID="im1" alt="im1" height="350" önclick="javascript:image1()" src="Source/Images/' + s[1] + '" /></td><td><img ID="im2" alt="im2" height="350px" önClick="" src="Source/Images/' + s[2] + '" /></td><td><img alt="im3" ID="im3"height="350px" önClick="" src="Source/Images/' + s[3] + '" /></td></tr></table>';
santulas 19-Dec-12 5:41am
   
thanks fr d reply. ive tried already..but i couldnt get.I dont need even the table..I can simply place the img tag in popup.document.body.innerhtml.any other suggestion will be more helpful.
Zaf Khan 20-Dec-12 17:54pm
   
Hello did you check the sample I posted? It does EXACTLY what you asked for, to recogniseand raise an event on the mouse click on an image object in a popup in javascript?
Rate this:
Please Sign up or sign in to vote.

Solution 1

Here is a solution


<html>
<head>
	<title></title>
	<script type="text/javascript">
	<!--
		var oPopup = window.createPopup()
		function goPop(oHeight) {
			var oPopupBody = oPopup.document.body;
			var lefter = event.offsetY + 100;
			var topper = event.offsetX + 100;
			oPopupBody.innerHTML = stylediv.innerHTML;
			oPopup.show(topper, lefter, 400, oHeight, document.body);
			document.body.onmouseup = closePopup;
		}
		function closePopup() {
			oPopup.hide();
		}
		function fillPopup(titler, texter, linker) {
			oTitle.innerText = titler;
			oText.innerText = texter;
		}
		// -->
	</script>
	<script type="text/javascript">
	<!--
		function Button1_onclick() {
			goPop(300);
		}
	// -->
	</script>
</head>
<body>
	<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
	<div id="stylediv" style="display:none">
		<script type="text/javascript">
		<!--
			function FollowLink_onclick() {
				window.parent.open("www.google.com", "_blank")
			}
		// -->
		</script>
		<div style="position:absolute; top:0; left:0; border:1px solid #6699cc; width:400; height:300px; z-index:3;">
			<div id="oTitle" style="position:relative; width:100%; background:#ffffff; height:32px; font-weight:bold; padding:5px; font-size:10pt;">Title of tip</div>
			<div id="oText" style="padding:5px">
				<img id="FollowLink" alt="Click Me" src="http://s.codeproject.com/App_Themes/Std/Img/logo250x135.gif" style="width: 48; height: 48;" onclick="window.parent.open('http://www.google.com', '_blank')" />
			</div>
		</div>
	</div>
</body>
</html>
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

<html>
<head>
    <title></title>
    <script type="text/javascript">
    <!--
        var oPopup = window.createPopup()
        function goPop(oHeight) {
            var oPopupBody = oPopup.document.body;
            var lefter = event.offsetY + 100;
            var topper = event.offsetX + 100;
            oPopupBody.innerHTML = stylediv.innerHTML;
            oPopup.show(topper, lefter, 400, oHeight, document.body);
            document.body.onmouseup = closePopup;
        }
        function closePopup() {
            oPopup.hide();
        }
        function fillPopup(titler, texter, linker) {
            oTitle.innerText = titler;
            oText.innerText = texter;
        }
        // -->
    </script>
    <script type="text/javascript">
    <!--
        function Button1_onclick() {
            goPop(300);
        }
    // -->
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
    <div id="stylediv" style="display:none">
        <script type="text/javascript">
        <!--
            function FollowLink_onclick() {
                window.parent.open("www.google.com", "_blank")
            }
        // -->
        </script>
        <div style="position:absolute; top:0; left:0; border:1px solid #6699cc; width:400; height:300px; z-index:3;">
            <div id="oTitle" style="position:relative; width:100%; background:#ffffff; height:32px; font-weight:bold; padding:5px; font-size:10pt;">Title of tip</div>
            <div id="oText" style="padding:5px">
                <img id="FollowLink" alt="Click Me" src="http://s.codeproject.com/App_Themes/Std/Img/logo250x135.gif" style="width: 48; height: 48;" onclick="window.parent.open('http://www.google.com', '_blank')" />
            </div>
        </div>
    </div>
</body>
</html>
   
Rate this:
Please Sign up or sign in to vote.

Solution 3

You should go for JQuery live function.When ever you are having dynamic code injected from javascript or server side code to UI.

$("#im1").live('click',function(){
    alert("im1 click worked...");
});

This should definitely solve your problem...
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month