Unable to view image in PopUp

Jaya Prakash

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajkiran Swain3y ago

Accepted answer

$(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;
}

Rajkiran Swain3y ago
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:
1. Update the image button markup to include the onclick attribute calling the LoadDocument function:
1. Remove the script blocks and the call to ScriptManager.RegisterStartupScript from the code-behind img_PAN_Click and other similar event handlers.
2. 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('<%= hdnfilepath.ClientID %>');
    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.

Jaya Prakash3y ago

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 = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", "", false);
        }
        else
        {
            string script = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false);

        }
    }
    catch (Exception excp)
    {
        ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", "", 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 = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", "", false);
        }
        else
        {
            string script = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false);

        }
    }
    catch (Exception excp)
    {
        ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", "", 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 = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", "", false);
        }
        else
        {
            string script = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false);

        }
    }
    catch (Exception excp)
    {
        ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", "", 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 = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ErrorMSg", "", false);
        }
        else
        {
            string script = $@"";
            ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, false);

        }
    }
    catch (Exception excp)
    {
        ScriptManager.RegisterStartupScript(FieldsPanel, FieldsPanel.GetType(), "ErrorMSg", "", false);
    }
    catch (Exception ex)
    {

        oExceptionManager.LogError(ex.Message, " -- In   FillStatus Function Registration.aspx");
    }
}

for modal popup

my javascript

function LoadDocument(url) {
    debugger;
    $("#ViewDocumentmodal").modal("show");
    var imgFull = document.getElementById("imgFull");
    var hdnfilepath = document.getElementById('<%= hdnfilepath.ClientID %>');
    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 Joshi3y ago
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