onclick of img tag inside popup.body.html

Question

0.00/5 (No votes)

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:

ASP.NET

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 18-Dec-12 19:42pm

santulas

Updated 18-Dec-12 20:07pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Dec-12 2:09am

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Dec-12 8:06am

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?

3 solutions

Add a Solution

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

Zaf Khan · Answer 1 · 2012-12-19T19:55:00

Here is a solution

HTML

<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>

Kirti Garg · Answer 2 · 2013-08-05T19:51:00

XML

<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>

Jitendra Sabat · Answer 3 · 2013-08-05T20:21:00

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.

JavaScript

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

This should definitely solve your problem...

Posted 5-Aug-13 20:21pm

Jitendra Sabat

onclick of img tag inside popup.body.html

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

onclick of img tag inside popup.body.html

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us