Develop Reference

Manipulate webpage based on user selection of popup window in asp.net website using JavaScript?

I have an asp.net website. I want to open a popup asking for user confirmation in code behind page.
I have a drop down with some values. "cancel ticket" is one of those values. So when user selects this item, I want to display a confirmation box asking user "Are you sure you want to cancel the ticket"?
I've tried some code using JavaScript,
HTML:
<asp:DropDownList ID="ddlStatus" runat="server" CssClass="selectstyle" DataTextField="Name" DataValueField="ID" onchange ="GetSelectedItem(this);" />
JavaScript :
<script type="text/javascript">
function GetSelectedItem(x) {
if (x.value == 4) {
return confirm("Are you sure you want to cancel support ticket ?");
}
}
which is displaying a popup as I want.
Now, I want to make a textbox and a label visible if user clicked on "OK" and reset dropdownlist if user clicked on "Cancel"

I've found this, i hop this help you
http://www.aspsnippets.com/Articles/Server-Side-Code-Behind-Yes-No-Confirmation-Message-Box-in-ASPNet.aspx

You would use
ClientScriptManager.RegisterClientScriptBlock
https://msdn.microsoft.com/en-us/library/bahh2fef%28v=vs.110%29.aspx

The right way to approach this is by checking the value and prompting the user in the client side via javascript (this will probably help you).
But if you insist on going through the server, you can either:
Do an ajax call and then prompt the user for confirmation,
or create another form/view to do that.

Try adding a bootstrap modal and injecting script like ClientScriptManager.RegisterClientScriptBlock (Type, String,"$(modal).modal('show')")
Do remember to add the bootstrap js and css

My suggestion is:
1- Create a invisible div with your cancel button (and/or others elements/controls you want)
<div id="div_dialog" style="display: none;" >
<h3>Do you want to cancel?</h3>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>
</div>
2- Use jquery to use your drop down as a trigger and dialog your hidden div
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
// this will open the popup when drop donw change
//(aply your filter by selected item)
$("#<%=DropDownList1.ClientID%>").change(function () {
$("#div_dialog").dialog({
dialogClass: 'DynamicDialogStyle',
height: 160,
width: 220,
title: "My modal Dialog Popup",
modal: true
});
return false;
});
// this function will do the postback and fire the event in the popup button
$('#<%=Button1.ClientID%>').click(
function() {
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
});
});
</script>
3- Instead of using ddlStatus_Tickets_SelectedIndexChanged event, handle your confirmation code in the confirmation button event click
protected void Button1_Click(object sender, EventArgs e)
{
// you code
}

Display a div on button click

I have a div, whose display is set to none. On button click, I need to show this div.
I have wrote a JavaScript function to do so, and it works but on click of the button the div is shown and again it hides. What is to be done additionally so that is remains.
JavaScript is as follows:
function show_popup() {
document.getElementById("Div1").style.display = 'block';
}
And div is as follows:
<div id="Div1" style="display:none">
The JavaScript function is called on button click as follows:
<asp:Button ID="Button3" runat="server" OnClientClick="javascript: show_popup()" Text="Button" />
Please help me out.

If I interpret your question correctly: the div resets to be hidden on page refresh or navigation. This is to be expected, the display value should be handled on the server side too.
As others have said, the problem is that when you click on the button, the page is posted to the server. If you do not want to do this, you should use a normal HTML button (with type="button"), instead of an ASP one.

Your Javascript is working, the Problem seems to be the Button implemented with ASP.
The Problem could be the Serversided implementation of the Button, here is the HTML implementation. Things are working there.
function show_popup() {
document.getElementById("Div1").style.display = 'block';
}
<div id="Div1" style="display:none">asdasdasdasdasdasd</div>
<input type="button" onclick="show_popup()" value="Show"></input>

Onclick Trigger functionality

I have a problem in understanding the functionality of onclick.For instance:-
HTML
<input type="button" onclick="yetAnotherAlert()" />
JS
<script type="text/javascript">
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("This is Chapter 2");
</script>
Over here I was expecting that once I click on the button,the function yetAnotherAlert() would be invoked.But as I open the page in my Chrome,it triggers without even clicking on the button[Onclick functionality does work here].My question is:-Why is the function getting triggered before loading the page?

Because you are calling function during page loading
yetAnotherAlert("This is Chapter 2");
Remove it. And you have to pass string during click event like this
<input type="button" onclick="yetAnotherAlert('This is Chapter 2')" />

Executing Commands Javascript

I want to execute a command by the click of a button, and not when the page loads.
function hey() {
alert('bla');
}
Do I add something to the code above or to the button?
<input type="button" value="Click Me" onclick="hey()" />

Have you taken the time to type in your question into the magical Google box yet? Surely you'll see something like this:
<input type="button" value="Click me, now" onclick="hey()" />

Say you have the function that alerts a window to the user.
<script type="text/javascript">
function showMe() {
alert('You clicked on the button');
}
</script>
<button onclick="showMe()">Button</button>
This will make sure that the function is only called when the button is clicked upon and not when the page is loaded.

Okay, so you have a code that should work for alerting something on the click of a button. But you state that the code is running on page load. You have to check you code, looking for:
An onload attribute on the body tag, something like <body onload="hey()">
A call to hey somewhere else on your js code. Look for hey().
Maybe a reference to the button followed by a call to .click()
There is something else on your code causing the function to be called, you'll have to scan your code to find out what it is.

IE8 Javascript Error

I have written a js method which runs perfectly on FF.
This js method is called on the click of a radio button.
In IE, when I click the radio button, the js method is called only when I click somewhere on the form. I have no idea about this strange behavious in IE.
Any ideas?
Thx
Here is my code.
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
HTML CODE:
<h:selectOneRadio id="pid" value="#{Bean.pid}" onchange="javascript:checkPid();">
<f:selectItem itemLabel="label1" itemValue="value1"/>
<f:selectItem itemLabel="label2" itemValue="value2" />
<f:selectItem itemLabel="label3" itemValue="value3" />
</h:selectOneRadio>
JAVASCRIPT:
<script language="javascript" type="text/javascript">
function checkPid() {
//some basic js here
//even if I just give an one-liner alert stmt here, In IE it
//shows up only when I click somewhere on the form after I click
//on the radio button
}
Thanks in advance!

Try the onclick event rather than the onchange event.
You'll need to modify your code though:
<h:selectOneRadio id="pid" value="#{Bean.pid}" onclick="checkPid(this);">
And your javascript function:
function checkPid(e) {
//do stuff with e.value
}
You should be able to validate what the user clicked on by e.value. This should work for both browsers.