Unable to view image in PopUp

Question

Here i have 3 imagebuttons pan voterid and gst

when i click on any one of the imagebutton for first time it is displaying image in popup and then when i click on another imagebutton

it is displaying nothing when i refresh the page and click on another one it is displaying but when i do the same remaining two are not displaying in popup

for every image i want to view in modal popup i need to do page refreshing how can i solve this pls help me..

pls help me

Rajkiran Swain · Answer

Image 1 Image 2 Image 3 $(document).ready(function() { // Click event handler for image buttons $('.image-button').click(function() { var imageUrl = $(this).data('image'); $('#imageModal .modal-image').attr('src', imageUrl); // Set the image source $('#imageModal').modal('show'); // Open the modal }); }); .modal-image { max-width: 100%; height: auto; }

Jaya Prakash · Answer

Pls help me sir my aspx.cs protected void img_PAN_Click(object sender, ImageClickEventArgs e) { try { string imageUrl = img_PAN.ImageUrl; if (imageUrl == "" || imageUrl == "0" || imageUrl == null) { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('hide'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", " alert('image is not available') ", false); } else { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('show'); $('#imgFull').attr('src', '{imageUrl}'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false); } } catch (Exception excp) { ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", " alert('" + excp.Message.ToString() + "') ", false); } catch (Exception ex) { oExceptionManager.LogError(ex.Message, " -- In FillStatus Function Registration.aspx"); } } protected void img_AddressPF_Click(object sender, ImageClickEventArgs e) { try { string imageUrl = img_AddressPF.ImageUrl; if (imageUrl == "" || imageUrl == "0" || imageUrl == null) { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('hide'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", " alert('image is not available') ", false); } else { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('show'); $('#imgFull').attr('src', '{imageUrl}'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false); } } catch (Exception excp) { ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", " alert('" + excp.Message.ToString() + "') ", false); } catch (Exception ex) { oExceptionManager.LogError(ex.Message, " -- In FillStatus Function Registration.aspx"); } } protected void imgBusinessPrf_Click(object sender, ImageClickEventArgs e) { try { string imageUrl = imgBusinessPrf.ImageUrl; if (imageUrl == "" || imageUrl == "0" || imageUrl == null) { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('hide'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", " alert('image is not available') ", false); } else { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('show'); $('#imgFull').attr('src', '{imageUrl}'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false); } } catch (Exception excp) { ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", " alert('" + excp.Message.ToString() + "') ", false); } catch (Exception ex) { oExceptionManager.LogError(ex.Message, " -- In FillStatus Function Registration.aspx"); } } protected void img_shop_Click(object sender, ImageClickEventArgs e) { try { string imageUrl = img_shop.ImageUrl; if (imageUrl == "" || imageUrl == "0" || imageUrl == null) { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('hide'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", " alert('image is not available') ", false); } else { string script = $@" $(document).ready(function () {{ $('#ViewDocumentmodal').modal('show'); $('#imgFull').attr('src', '{imageUrl}'); }}); "; ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false); } } catch (Exception excp) { ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", " alert('" + excp.Message.ToString() + "') ", false); } catch (Exception ex) { oExceptionManager.LogError(ex.Message, " -- In FillStatus Function Registration.aspx"); } } for modal popup Close my javascript function LoadDocument(url) { debugger; $("#ViewDocumentmodal").modal("show"); var imgFull = document.getElementById("imgFull"); var hdnfilepath = document.getElementById(' '); if (url != "" && url != null && url != "0") { imgFull.src = url; hdnfilepath.value = imgFull.src; imgFull.style.display = "block"; return false; } else { $("#ViewDocumentmodal").modal("hide"); alert("Image is not available"); } }

Vishal Joshi · Answer

Hello Jaya Please share your aspx and .cs file brief code for image upload and image preview. I guess some duplicate id or reference issue.but after reviewing code we can resolve it. Thanks

Rajkiran Swain · Answer

Based on the provided code, it seems that the issue lies in the logic of displaying the image in the modal popup. The JavaScript function LoadDocument(url) is not being called from the code-behind when clicking on the image buttons. To solve the issue, you can modify the code as follows: Update the image button markup to include the onclick attribute calling the LoadDocument function: ');" /> Remove the script blocks and the call to ScriptManager.RegisterStartupScript from the code-behind img_PAN_Click and other similar event handlers. Update the LoadDocument JavaScript function to show the modal and set the image source: function LoadDocument(url) { var imgFull = document.getElementById("imgFull"); var hdnfilepath = document.getElementById(' '); if (url != "" && url != null && url != "0") { imgFull.src = url; hdnfilepath.value = imgFull.src; $("#ViewDocumentmodal").modal("show"); } else { $("#ViewDocumentmodal").modal("hide"); alert("Image is not available"); } return false; } By making these changes, the LoadDocument function will be called when clicking on any image button, passing the respective image URL. It will then set the source of the imgFull element and display the modal with the image.