End of ImageButton tag

I am currently working on this code :

<div runat="server" class="slide">
<img src="images/picto_detail.gif" onclick='<%# Eval("CampagneRappelId","hideshow(\"details{0}\")")%>' />
<div id='details<%# Eval("CampagneRappelId")%>' style="display: none;">
        <asp:ImageButton runat="server" ID="DownloadPdf" ImageUrl="~/images/download.png"  />
</div>

Within the code, there is a JavaScript function called "hideshow(div)" which simply toggles the display of an element:

function hideshow(which) {
    if (document.getElementById(which).style.display == "none")
        document.getElementById(which).style.display = 'block';
    else
        document.getElementById(which).style.display = "none"
}

However, I have encountered an issue with the asp:ImageButton. Upon clicking it, the backend code triggers a file download for the user but it also hides the "details" div with display:none. I have been unable to determine the cause of this behavior.

EDIT: I have attempted the following solution:

window.onload = function () {
    document.getElementById("DownloadPdf").onclick = function (e) {

        if (e && e.stopPropagation && someCriteriaToStopBubbling === true) {
            e.stopPropagation();
        }
        else if (someCriteriaToStopBubbling === true) {
            e = window.event;
            e.cancelBubble = true;
        }
    }
};

Your assistance in resolving this issue would be greatly appreciated. Thank you.

javascriptc#htmlcss

Answer №1

Here's a neat trick using an image to toggle the visibility of a div:

<script type="text/javascript">
    $(document).ready(function(){
        $('#toggle').on('click',function(){
            $('#content').toggle();
        });
    });
</script>

<div style="float:left;"><a id="toggle">Toggle <img src="images/arrow.png" /></a></div>

Answer №2

To prevent the PostBack from occurring, I made the following changes:

<asp:UpdatePanel ID="UpdatePanel" runat="server">
    <ContentTemplate> 
        <asp:ImageButton runat="server" ID="DownloadPdf" ImageUrl="~/images/download.png" />
    </ContentTemplate>
</asp:UpdatePanel>

After that, I placed the ImageButton inside.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Sequelize to enclose a column with double quotation marks in a where clause

I am working with a JSONB column in my database. My goal is to make a query to the database where I can check if a specific value in this JSON is true or false: SELECT * FROM table WHERE ("json_column"->'data'->>'data2')::boo ...

javascriptnode.jspostgresqlormsequelize.js

The term "Cardlist" has not been defined and is therefore causing an

I created a CardList and attempted to add cards into the list using map, but encountered an error import React from 'react'; import Card from './Card'; const CardsContainer = ({robots}) => { const cardComponents = robots.map((r ...

javascriptreactjsnpm

Managing Modules at Runtime in Electron and Typescript: Best Practices to Ensure Smooth Operation

Creating an Electron application using Typescript has led to a specific project structure upon compilation: dist html index.html scripts ApplicationView.js ApplicationViewModel.js The index.html file includes the following script tag: <script ...

javascripttypescriptecmascript-6electron

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

Activate the horizontal scrollbar within each flex item when it is stretched beyond its original width

My goal is to have both the child-1 (blue) and child-2 (black) retain their original width when the sidebar appears by enabling horizontal scrolling upon clicking anywhere in the demo below. document.body.onclick = () => document.querySelector(&apos ...

htmlcssflexbox

Use jQuery to assign a value of "true" when a checkbox is

Can you guide me on how to use jQuery to implement a click function that sets the status value to 'true' if a checkbox is checked, and 'false' if it's not checked? If Checkbox 1 is checked, Status 1 should be set to true. Similarl ...

javascriptjquery

Ways to eliminate the existing image during an image upload process

When a user decides to change their profile picture, I want the link in the database to be updated and the new image moved to the upload folder. The code should also remove the previous image associated with that specific user from the upload folder. The ...

phpjqueryhtmlajaxpdo

retrieve JSON object from deferred response of AJAX request

After utilizing Ajax to send an item to a SharePoint list, I aim to incorporate the jsonObject received in response into a list of items. Located in AppController.js $scope.addListItem = function(listItem){ $.when(SharePointJSOMService.addListIte ...

javascriptjqueryajaxangularjsdeferred

Today, I am experimenting with HTML5 File Upload using Capybara and Selenium Webdriver in Ruby

I have encountered a problem with a simple modal that allows users to upload a file using a browse button. Due to some unknown issue, possibly related to the fact that it is an HTML5 file input and the browser adds its own functions to it, testing this has ...

ruby-on-railsrubyhtmlselenium-webdrivercapybara

Creating a CSS design where the border is contained within an element, especially when the border radius is specified

The concept of the title might be a bit confusing, but let me clarify. I am attempting to replicate this particular effect (taken from a .png file): This is essentially half a cycle with a black line inside it. Despite numerous attempts, I have been un ...

htmlcsscss-shapes

Do not show empty pages in Mpdf display

I utilized Mpdf to generate a three-page PDF document. The first and third pages consistently contain data, but the presence of data on the second page varies. I prefer not to display the second page if it is empty. Here's the code structure: html = ...

phphtmlmpdf

Developing desktop applications with Angular 2 using NWjs

Looking to create an Angular 2 Desktop App using NWjs. Where can I find the entry point? Could someone provide some examples of developing Angular 2 Desktop Apps with NW.js? ...

javascriptangularnwjs

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

Having trouble echoing this PHP code due to issues with single quotes, causing the HTML to end prematurely. Any suggestions on how to fix this? function button($conn){ $sql = "SELECT * FROM table"; $result= mysqli_query($conn, $sql); while($r ...

javascriptphphtmlcss

Is it possible to view the object sent from AJAX to PHP in PHP using a debugger?

I'm facing an issue where I am making an AJAX call to a PHP file, sending a JSON object as a parameter from JavaScript. The PHP file is supposed to perform some logic with the object and return it using json_encode('whatever');. However, the ...

javascriptphpjqueryjsonajax

Updating your Heroku app (Node.js) from a GitHub repository - a step-by-step guide

I attempted to deploy my React app using the following process: git status git remote add origin <repo link> git commit -m "node js" git add . Unfortunately, this method did not work for me. Can anyone provide guidance on how to update a ...

javascriptnode.jsreactjs

The loop within a loop is causing excessive lag and is on the verge of crashing the

I need help with optimizing the performance of my app that retrieves json data. The json file contains nearly one thousand words structured like this: {"THEMES":{"THEME1":["ITEM1","ITEM2","ITEM3"],"THEME2":["ITEM1",...]...}} The size of the file is aroun ...

javascriptjsonangularjs

Effectively detect the 'scrollend' event on mobile devices

When implementing the -webkit-overflow-scrolling: touch; style on a mobile element, dealing with scroll events can be quite challenging as they are triggered by various actions such as 'flicking', 'panning' and when the scroll comes to ...

javascriptjqueryioscordovahammer.js

The element's position remains unchanged after the .click re-event in the function

Welcome to my first attempt at using jQuery! Please bear with me as I navigate through this learning process. Here's the challenge: I have a series of elements in my HTML. <div class="garden"> <div class="point left">&#9668;</d ...

javascriptjqueryhtmlcss

JavaScript's click() function cannot be used on text areas

Currently, I am in the process of creating a script for automating comments. During step one, I encountered an issue where the code is expected to simulate a click on this text area within a red box, but unfortunately nothing happened. Initially, I attem ...

javascripthtmlcss

How to perfectly center a dropdown menu using CSS across different web browsers

I am dealing with a dropdown menu that is auto-generated by WordPress, so altering the HTML structure is not an option. However, I have the flexibility to adjust the CSS styling to correct an alignment issue in my dropdown menu. Currently, I'm facing ...

htmlcss