Do not display popup modal on a certain button click

0
votes

I do not want the modual popup to expand on a certain button click a PageContent_btnContractDiagnostico + incrementalNumber.

Here is the exemple I am followin https://codepen.io/PavelStrashevskiy/pen/JJRObL I have changed the following code 

        <div class="content">Task Content...
     <button onclick="myFunction()">Click Me!</button>

add I have added the following code in the java-script section

     function myFunction() {
      alert("Hello! I am an alert box!");
}

But insted of alert("Hello! I am an alert box!"); I want the function to prevent the popup from opening.

This my actual code

Here is how my button is generated.

 LinkButton btnContract = new LinkButton();
            btnContract.OnClientClick = "return check()";
            btnContract.Attributes.Add("class", "task-text");
            btnContract.ID = "btnContract" + i_contractColumn.stepColumnName + i_contractColumn.contractTasks.IndexOf(contract_task);
            btnContract.Click += new EventHandler(contract_Click);
            btnContract.Text = contract_details.numero_contrato;
            taskContent.Controls.Add(btnContract);

Here is how the rest of my kanban is generated. 

 public void PopulateKanban()
    {
        foreach (contractStepColumn i_contractColumn in kanban.kanbanBoard)
        {
            match_collapsedHeaders_with_view(i_contractColumn, kanban.kanbanBoard.IndexOf(i_contractColumn));
        }

        // KanbanBoard is the list of relevant columns for this page
        foreach (contractStepColumn i_contractColumn in kanban.kanbanBoard)
        {
            // Display the header of a given column
            //  match_columnHeaders_with_view(i_contractColumn, kanban.kanbanBoard.IndexOf(i_contractColumn));

            System.Web.UI.HtmlControls.HtmlGenericControl columnInKanban = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
            columnInKanban.Attributes.Add("ID", "kanbanColumnID" + kanban.kanbanBoard.IndexOf(i_contractColumn));  // + kanban.kanbanBoard.IndexOf(i_contractColumn);
            columnInKanban.Attributes.Add("class", "drag-column drag-column drag-column-step");

            kanbanBoardHtml.Controls.Add(columnInKanban);

            System.Web.UI.HtmlControls.HtmlGenericControl columnSpan = new System.Web.UI.HtmlControls.HtmlGenericControl("span");
            columnSpan.ID = "kanbanColumnSpan" + kanban.kanbanBoard.IndexOf(i_contractColumn);
            columnSpan.Attributes.Add("class", "kanban-column-header");
            columnInKanban.Controls.Add(columnSpan);

            Label ColumnStepName = new Label();
            ColumnStepName.Text = i_contractColumn.stepColumnName;
            columnSpan.Controls.Add(ColumnStepName);
        ImageButton collapseImage = new ImageButton();
        collapseImage.ImageUrl = "~/images/minimize.png";
        collapseImage.Height = 20;
        collapseImage.Width = 20;
        collapseImage.Attributes.Add("class", "second-menu-icon");
        collapseImage.OnClientClick = "hideFunction"+ (kanban.kanbanBoard.IndexOf(i_contractColumn)).ToString() + "(); return false;";
        columnSpan.Controls.Add(collapseImage);

        // Display all contracts of a given column
        System.Web.UI.HtmlControls.HtmlGenericControl columnContractList = new System.Web.UI.HtmlControls.HtmlGenericControl("ul");
        //columnContractList.ID = "columnContractList" + kanban.kanbanBoard.IndexOf(i_contractColumn);
        columnContractList.Attributes.Add("class", "drag-inner-list");
        columnInKanban.Controls.Add(columnContractList);

        foreach (contractTask contract_task in i_contractColumn.contractTasks)
        {
            //        match_contractTask_with_view(contract_task, i_contractColumn.contractTasks.IndexOf(contract_task));

            string txtUrgencyColor = "";

            contrato contract_details = new contrato(contract_task.contract_id, 1);

            System.Web.UI.HtmlControls.HtmlGenericControl ColumnContainingTasks = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
            columnContractList.Controls.Add(ColumnContainingTasks);

            System.Web.UI.HtmlControls.HtmlGenericControl dragBox = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            dragBox.Attributes.Add("class", "dragBox");

            ColumnContainingTasks.Controls.Add(dragBox);

            System.Web.UI.HtmlControls.HtmlGenericControl task = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            task.Attributes.Add("class", "task");
            task.Attributes.Add("id", "task"+ (kanban.kanbanBoard.IndexOf(i_contractColumn)).ToString());
            task.Attributes.Add("onclick", "expandCard(this, event)");

            dragBox.Controls.Add(task);

            System.Web.UI.HtmlControls.HtmlGenericControl taskMini = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskMini.Attributes.Add("class", "cardMini");

            task.Controls.Add(taskMini);

            txtUrgencyColor = contract_task.getColor().ToString();

            switch (txtUrgencyColor)
            {
                case "Color [Green]":
                    txtUrgencyColor = "header color-green";
                    break;
                case "Color [Red]":
                    txtUrgencyColor = "header color-red";
                    break;
                case "Color [Yellow]":
                    txtUrgencyColor = "header color-yellow";
                    break;
                case "Color [Orange]":
                    txtUrgencyColor = "header color-orange";
                    break;
                default:
                    txtUrgencyColor = "header color-silver";
                    break;
            }

            System.Web.UI.HtmlControls.HtmlGenericControl taskMiniHeaderColor = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskMiniHeaderColor.Attributes.Add("class", txtUrgencyColor);

            taskMini.Controls.Add(taskMiniHeaderColor);

            System.Web.UI.HtmlControls.HtmlGenericControl taskContent = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskContent.Attributes.Add("class", "content");

            taskMini.Controls.Add(taskContent);

            LinkButton btnContract = new LinkButton();
            btnContract.Attributes.Add("class", "task-text");
            btnContract.ID = "btnContract" + i_contractColumn.stepColumnName + i_contractColumn.contractTasks.IndexOf(contract_task);
            btnContract.Click += new EventHandler(contract_Click);
            // btnContract.Text = contract_task.contract_number;
            btnContract.Text = contract_details.numero_contrato;
            taskContent.Controls.Add(btnContract);

            System.Web.UI.HtmlControls.HtmlGenericControl emptyDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskContent.Controls.Add(emptyDiv);

            System.Web.UI.HtmlControls.HtmlGenericControl calenderSection = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            calenderSection.Attributes.Add("class", "contractCalendarSection");

            emptyDiv.Controls.Add(calenderSection);

            Image imgCalendarTask = new Image();
            imgCalendarTask.Height = 25;
            imgCalendarTask.Width = 25;
            imgCalendarTask.ImageUrl = "~/images/calendar.png";
            calenderSection.Controls.Add(imgCalendarTask);

            System.Web.UI.HtmlControls.HtmlGenericControl calendarText = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            calendarText.Attributes.Add("class", "task-calendar-text");
            calendarText.InnerText = dateConverter(contract_task.start_date.ToString());
            emptyDiv.Controls.Add(calendarText);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopup = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            expandPopup.Attributes.Add("class", "cardFull");
            task.Controls.Add(expandPopup);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupHeaderColor = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            expandPopupHeaderColor.Attributes.Add("class", txtUrgencyColor);
            expandPopup.Controls.Add(expandPopupHeaderColor);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupHeaderText = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            expandPopupHeaderText.Attributes.Add("class", "popupHeader");
            expandPopupHeaderText.InnerText = contract_task.contract_number;
            expandPopup.Controls.Add(expandPopupHeaderText);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupTextContent = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            expandPopupTextContent.Attributes.Add("class", "popupText");
            expandPopup.Controls.Add(expandPopupTextContent);

            System.Web.UI.HtmlControls.HtmlGenericControl contractStartDate = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            contractStartDate.InnerText = PoppupLineTextBuilder("Fecha de Llegada", contract_details.historial.arrivalDate().ToShortDateString() );
            expandPopupTextContent.Controls.Add(contractStartDate);

            System.Web.UI.HtmlControls.HtmlGenericControl StepDeadline = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            StepDeadline.InnerText = PoppupLineTextBuilder("Fecha Plazo", contract_details.historial.currentStep().deadline.ToShortDateString());
            expandPopupTextContent.Controls.Add(StepDeadline);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupTextHeaderOne = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            expandPopupTextHeaderOne.InnerText = "Información técnica";
            expandPopupTextContent.Controls.Add(expandPopupTextHeaderOne);

            System.Web.UI.HtmlControls.HtmlGenericControl componentFamily = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentFamily.InnerText = PoppupLineTextBuilder("Familia", contract_details.familia);
            expandPopupTextContent.Controls.Add(componentFamily);

            System.Web.UI.HtmlControls.HtmlGenericControl componentBrand= new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentBrand.InnerText = PoppupLineTextBuilder("Marca", contract_details.marca);
            expandPopupTextContent.Controls.Add(componentBrand);

            System.Web.UI.HtmlControls.HtmlGenericControl componentType = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentType.InnerText = PoppupLineTextBuilder("Tipo", contract_details.tipo);
            expandPopupTextContent.Controls.Add(componentType);

            System.Web.UI.HtmlControls.HtmlGenericControl componentSerial = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentSerial.InnerText = PoppupLineTextBuilder("Serial", contract_details.serial_number);
            expandPopupTextContent.Controls.Add(componentSerial);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupTextHeaderTwo = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            expandPopupTextHeaderTwo.InnerText = "Información al cliente";
            expandPopupTextContent.Controls.Add(expandPopupTextHeaderTwo);

            System.Web.UI.HtmlControls.HtmlGenericControl clientName = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            clientName.InnerText = PoppupLineTextBuilder("Cliente", contract_details.cliente.nombre_cliente);
            expandPopupTextContent.Controls.Add(clientName);

            Button btnMoreDetails = new Button();
            btnMoreDetails.Attributes.Add("class", "btnPopup");
            btnMoreDetails.ID ="btnContractPopup" + i_contractColumn.stepColumnName + i_contractColumn.contractTasks.IndexOf(contract_task);
            btnMoreDetails.Text = "Más Detalles";
            btnMoreDetails.Attributes.Add("runat", "server");
            btnMoreDetails.Click += new EventHandler(this.open_contract_click);
            expandPopup.Controls.Add(btnMoreDetails);

            System.Web.UI.HtmlControls.HtmlGenericControl LineBreak1 = new System.Web.UI.HtmlControls.HtmlGenericControl("br");
            System.Web.UI.HtmlControls.HtmlGenericControl LineBreak2 = new System.Web.UI.HtmlControls.HtmlGenericControl("br");

            expandPopupTextContent.Controls.Add(LineBreak1);
            expandPopupTextContent.Controls.Add(LineBreak2);
        }
    }
}

Here is part of the html generated

    <div class="task" id="task0" onclick="expandCard(this, event)"><div class="cardMini">
<div class="header color-red"></div><div class="content">
<a id="PageContent_btnContractDiagnostico0" class="task-text" href="javascript:__doPostBack('ctl00$PageContent$btnContractDiagnostico0','')">19050001</a>
<div>
<div class="contractCalendarSection"><img src="../images/calendar.png" style="height:25px;width:25px;"></div>
<p class="task-calendar-text">5/26/2019</p></div></div></div>
<div class="cardFull">
<div class="header color-red"></div>
<p class="popupHeader">19050001</p><div class="popupText"><pre>Fecha de Llegada:           5/2/2019</pre><pre>Fecha Plazo:                5/31/2019</pre><p>Información técnica</p><pre>Familia:                    Tarjeta</pre><pre>Marca:                      Texas</pre><pre>Tipo:                       Amp</pre><pre>Serial:                     244e2</pre><p>Información al cliente</p><pre>Cliente:                    Junior Cortenbach</pre><br><br><br><br></div><input type="submit" name="ctl00$PageContent$btnContractPopupDiagnostico0" value="Más Detalles" id="PageContent_btnContractPopupDiagnostico0" class="btnPopup" runat="server"></div></div>

Here is a visual representation of the were I dont want the popup to expand. button clicked

The reason is when the user clicks on that button it redirects directly to the detailed page so there is no need to show the popup. The javascript I have tried with check prevents the button from redirecting.

1
javascriptasp.netwebforms
To get all your elements where no modal has to be shown, give them a dynamically generated tag or id. Then you can simply return false. in the ShowModalPopup for all those elements. A better solution, IMO, is to not call the function in the HTML click attribute. – M M
Can you show me how to do that with my code? – Junior Cortenbach
This thread will help you - stackoverflow.com/questions/7347786/… – M M
It is not a rea html <a></a> it is generated in code behind with asp.net. The <a></a> is actually a LinkButton sorry for the confusion. – Junior Cortenbach
The cleaner way is to create two functions - one that simply returns false on click, and other that actually shows the popup. I can see in your updated code you have a way of dynamically generating IDs. Can you figure out which IDs do not need to show popup and which need to show? Then simply call a suitable method to show popup or just return false. – M M

1 Answers

1
votes

After going through your codepen, here is what I think will help you achieve what you are seeking.

Replace this code

<div id="task1" class="task" onclick="expandCard(this, event)">

with this code

<div id="task1" class="task" onclick="newWindow('www.google.com')">

and create a new function in your JS code as below

function newWindow(url){
  window.open(url);
}

The idea is to create two functions - one for when you want to open the popup and another when you want to redirect to a new url. If you want a third option which does nothing, create a third function similar to the above and simply return false from the function. E.g.

function doNothing(){
  return false;
}