I have 6 dropdowns in a aspx page. I need to populate the dropdown only when its clicked.
Initially I populated all 6 ddl in page load but there was a huge delay in loading the page so I got this option to populate the ddl only when its clicked. I couldn't find the right answer yet, tried with diff sol and query.
And i couldn't find any 'Onclick','Onmousedown','Onkeypress' in ddl.
I even tried one option shared in stackoverflow by an user.
pls find the below code and help to solve the issue.
<td class="style10" >
<asp:DropDownList runat="server" ID="ddlGM" Width="150px" AutoPostBack="True" onclick="javascript:clickHiddenButton();" onselectedindexchanged="ddlGM_SelectedIndexChanged" style="height: 22px" >
<asp:ListItem Value=0 Text="All"></asp:ListItem></asp:DropDownList><div style="display: none;">
<asp:Button ID="btnHidden" runat="server" Text="Button" />
</div></td>
<script type="text/javascript">
function clickHiddenButton() {
var btn = document.getElementById('btnHidden');
var ddl = document.getElementById('ddlGM');
if (ddl.length == 1) {
btn.click();
}
}
</script>
protected void btnHidden_Click(object sender, EventArgs e)
{
DataView dvfilters = (DataView)(Cache["FiltersData"]);
dtt = dvfilters.ToTable();
ddlGM.DataSource = dtt;
ddlGM.DataValueField = "GlobalMarket";
ddlGM.DataBind();
RemoveDuplicateItems(ddlGM);
SortDDL(ref ddlGM);
//ddlGM.Items.Insert(0, "All");
}
You can use .focus function for any element. focus function is called when the particular function get clicked or getting focus by anyway. I am putting sample code for you. You can change this code as your need.
<script>
var bDataLoded = false;
$(document).ready(function () {
var ddVal = '';
$('#ddlGM').focus(function () {
if (!bDataLoded) {
alert("hi");
$('#ddlGM').append('<option value=' + 1 + '> + Test 1 + </option>');
$('#ddlGM').append('<option value=' + 2 + '> + Test 2 + </option>');
$('#ddlGM').append('<option value=' + 3 + '> + Test 3 + </option>');
$('#ddlGM').append('<option value=' + 4 + '> + Test 4 + </option>');
bDataLoded = true;
}
$('#ddlGM').blur();
})
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList runat="server" ID="ddlGM" Width="150px" AutoPostBack="True" style="height: 22px" >
</asp:DropDownList>
</div>
</form>
Hope this will solve your problem.
Related
Here's a little thing i want to achieve. I have an asp.net FileUpload and a textbox. When a user clicks the fileUpload and selects a picture from his/her computer/device, i want the image name to be immediately displayed in a textbox before submitting . Here is what i have tried
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static">
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('txtImage').val(filename);
});
It still cant get it displayed. wHAT AM I MISING PLEASE
you are missing # in $("txtImage"). This should be like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('#txtImage').val(filename);
});
});
</script>
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"></asp:TextBox>
TextBox txtImage does not have a closing tag.
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"/>
I'm new to Jquery, any help would be appreciated for below issue that m facing.
I have a GridView, on click of a row from Gridview(lnkView) a Jquery dialog(div:#dialog) opens which contains html dropdown(#projectcode) element.I want to hide the dropdown on click of certain rows.How to do that?
Code below: HTML
<script type="text/javascript">$("[id*=lnkView]").live("click", function () {
var datesent = $(this).next().text();
var subject = $(this).text();
var row = $(this).closest("tr");
$("#body").html($(".body", row).html());
$("#dialog").dialog({
width: 700,
title: subject,
buttons: [{
id: "ok", text: "Ok",
click: function () {
$(this).dialog('close');
}
}]
});
return false;
});
</script>
<asp:GridView ID="gvEmails" runat="server" DataKeyNames="MessageNumber" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Subject">
<ItemTemplate>
<asp:LinkButton ID="lnkView" runat="server" Text='<%# Eval("Subject") %>' />
<asp:LinkButton ID="lnkDateSent" runat="server" Text='<%# Eval("DateSent") %>' />
<span class="body" style="display: none">
<%# Eval("Body") %></span>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="dialog" style="display: none" runat="server">
<span id="body"></span>
<select id="projectcode" runat="server">
<option value="">Please select...</option>
<option value="00111">Fedex - 001</option>
<option value="00112">UPS - 002</option>
</select>
<br />
</div>`
And below is the c# code
for (int i = count; i >= 1; i--)
{
Email email = new Email()
{
MessageNumber = i,
Subject = message.Headers.Subject,
DateSent = message.Headers.DateSent,
GUID = pop3Client.GetMessageUid(i),
};
SqlCommand comm = new SqlCommand("select GUID from Sample where GUID = '" + email.GUID + "' ", con);
SqlDataReader dr = comm.ExecuteReader();
if (dr.Read())
{
if (email.GUID == dr.GetString(0))
{
//The below condition what I want to achieve for a specific row which has email.GUID == dr.GetString()-- GUID
//projectcode.Attributes["disabled"] = "disabled";
// projectcode.Visible = false;
}
}
dr.Close();
con.Close();
}
If i understand you correctly you want an onclick function so when you click on a row in your gridview it will dropdown with information. When you click on it again you want it to hide.
so lets say this is one row in your gridview with aria-expanded set to true.
<tr class="toggle-display" aria-expanded="true">
<td>#information.Stuff</td>
</tr>
and here you have the message that will show in your dropdown.
<tr class="display-message">
<span>Information:</span> #information.Things
</tr>
The jquery would look like this.
$(document).ready(function () {
$(document).on('click', '.toggle-display', function (event) {
event.preventDefault();
if ($(this).next('.display-message').hasClass('expanded')) {
$(this).next('.display-message').removeClass('expanded');
$(this).attr('aria-expanded', "false");
} else {
$(this).next('.display-message').addClass('expanded', 1000);
$(this).attr('aria-expanded', "true");
}
});
I have login form
Login form
I want to show password when check box is checked. I write below code
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:TextBox runat="server" ID="txtPassword" Width="100%" TextMode="Password"></asp:TextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:CheckBoxList runat="server" ID="showHidePassword">
<asp:ListItem Value="1" Text="Show Password"></asp:ListItem>
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
And try some JQuery code
$(function(){
$("#showHidePassword").bind("click",function(){
if($(this).is(":checked")){
// then I try to remove the "TextMode=Password"
// and think may be it works but there is no method that change textmode
}
});
});
Please help.
You can try changing the type attribute on change event, you can do something like this as an example:
$(function() {
$("#showHidePassword").on("change", function() {
var checked = this.checked;
$(this).siblings('input').attr('type', function() {
return checked ? "text" : "password";
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="showHidePassword">show password
<br>
<input type="password">
Actually I use CheckBoxList and use the ID of this control. But need control of checked item. So first of all use CheckBox instead of CheckBoxList.
And write below code in head section.
$(function () {
$("#showHidePassword").bind("click", function () {
var txtPassword = $("#txtPassword");
if ($(this).is(":checked")) {
txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
txtPassword.hide();
} else {
txtPassword.val(txtPassword.next().val());
txtPassword.next().remove();
txtPassword.show();
}
});
});
function PasswordChanged(txt) {
$(txt).prev().val($(txt).val());
}
That's it.
You can try this
HTML
<input class="pwd" type="password">
<input class="chk" type="checkbox">Show Password
JQUERY
$(document).ready(function() {
$('.chk').on('click', function() {
if ($('.chk').prop("checked")) {
$('.pwd').prop('type', 'text');
} else {
$('.pwd').prop('type', 'password');
}
});
});
kindly check
https://jsfiddle.net/vzuLn88j/
Does anyone know how to use an sap ui5 control with the asp:repeater control. Everytime I try to put a button, it only shows up in the first iteration of the repeater. And not in the rest of the iterations
<asp:Repeater ID="NewsFeedID" runat="server" >
<ItemTemplate>
<script type="text/javascript">
var buttonlink = CommentsPage + "?news=" + '<%# Eval("NewsFeedID") %>';
var AddComment = new sap.ui.commons.Button({
text: "Add Comment",
icon: AddCommentIcon,
lite: true,
press: function () { window.location = buttonlink; }
}).placeAt("Comments");
</script>
<div id="Comments"></div>
</td>
</tr>
When I use this code it only shows up for the first iteration of the asp:repeater but I want it to show up for all iterations. Does it have something to do with the div id=Comments? Need help please
Your Repeater creates multiple <div> elements with the same id, which causes conflicts.
One way to fix the problem is to add a runat="server" attribute to the <div>, making it a server-side control so that ASP.NET generates a unique ID for each instance:
<div runat="server" id="Comments"></div>
Then pass the dynamically generated ID to the placeAt function:
}).placeAt("<%# Container.FindControl("Comments").ClientID %>");
You can rename every instance with the index of repeater item:
<script type="text/javascript">
var buttonlink = CommentsPage + "?news=" + '<%# Eval("NewsFeedID") %>';
var AddComment = new sap.ui.commons.Button({
text: "Add Comment",
icon: AddCommentIcon,
lite: true,
press: function () { window.location = buttonlink; }
}).placeAt("<%# "Comments"+ Container.ItemIndex+1 %>");
</script>
<div id="<%# "Comments"+ Container.ItemIndex+1 %>"></div>
I think I have figured out what happens with this program.
This is part of the markup.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="upGrid" runat="server">
<ContentTemplate>
<asp:GridView ID="dgvPeliculas" runat="server" AllowPaging="true" PagerStyle-CssClass="pgr"
CssClass="mGrid" EmptyDataText="No hay más películas" OnPageIndexChanging="dgvPeliculas_PageIndexChanging1"
EnableSortingAndPagingCallbacks="true" OnRowDataBound="dgvPeliculas_RowDataBound">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<table class="LogIn">
<tr>
<td>
<asp:UpdatePanel ID="upAlquiler" runat="server">
<ContentTemplate>
<asp:Button ID="btnAlquilar" runat="server" Text="Alquilar" CssClass="AdminButtons"
OnClick="btnAlquilar_Click" OnClientClick="javascript: Click_Alquilar(); return false" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td>
<asp:Button ID="btnNuevo" runat="server" Text="Nuevo" CssClass="AdminButtons" OnClick="btnNuevo_Click"
OnClientClick="javascript: Click_Nuevo(); return false" />
</td>
<td>
<asp:Button ID="btnEditar" runat="server" Text="Editar" CssClass="AdminButtons" OnClick="btnEditar_Click"
OnClientClick="javascript: Click_Editar(); return false" />
</td>
<td>
<asp:Button ID="btnBorrar" runat="server" Text="Borrar" OnClientClick="javascript: Click_Borrar(); return false"
CssClass="AdminButtons" />
</td>
</tr>
</table>
I have coded it in such a way that the buttons modify it when a row is selected. The rows are selected by changing the "onclick" event (changed during the RowDataBound function), and a Javascript function.
This is how I change the code behind:
protected void dgvPeliculas_RowDataBound(object sender, GridViewRowEventArgs e)
{
dgvPeliculas.CssClass = "mGrid";
if (e.Row.RowType == DataControlRowType.DataRow)
{
string rowID = String.Empty;
rowID = "row" + e.Row.RowIndex;
e.Row.Attributes.Add("id", rowID);
e.Row.Attributes.Add("onclick", "onClick(" + "'" + rowID + "'" + ")");
e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer'; this.style.backgroundColor = '#B0C5BB';");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor = '';");
}
}
This is the JavaScript function:
/
function onClick(rowID)
{
//Si no hay ninguna seleccionada
if (selected == '') {
index = rowID;
selected = document.getElementById(rowID);
selected.onmouseover = '';
selected.onmouseout = '';
selected.style.backgroundColor = 'yellow';
}
else {
//Si se deselecciona
if (selected == document.getElementById(rowID)) {
selected.onmouseover = onmouseover;
selected.onmouseout = onmouseout;
selected.style.backgroundColor = '';
selected = '';
index = '';
}
//Deseleccionar el actual y seleccionar el nuevo
else {
selected.onmouseover = onmouseover;
selected.onmouseout = onmouseout;
selected.style.backgroundColor = '';
index = rowID;
selected = document.getElementById(rowID);
selected.onmouseover = '';
selected.onmouseout = '';
selected.style.backgroundColor = 'yellow';
}
}
}
The New button shows a ModalPopupExtender, and from there it calls a JavaScript function to validate its contents, and then does a postback to code behind to check and update the database. It also appends the register on the Grid, obviously.
The Edit button and the rest through the exception. The Edit function is particular, because its functionality is similar to that of the New button. It shows the ModalPopupExtender, goes to the JavaScript function, does the postback, to the database and updates. But this one needs to have one of the rows in the Grid selected (otherwise, there's nothing to be edited). I believe this is the reason why it throws the "Invalid Postback or Callback" exception. The same condition applies to the other buttons, and all of them throw the same exception. All, except New, which doesn't need to have a row selected.
Do you think this is the reason why I'm having this problem? And if so, how can I fix it?
Sorry if you consider this a repost of one of my previous threads, but I haven't been able to fix the problem, and I think this gives me a new clue that I can't work out neither.
Thanks.