I am listing my data in an ItemTemplate.Then inside the ItemTemplate, i have two div tags as follows:
<ItemTemplate>
<div id="contentdiv">
<h4 id="titleresult"><%# Server.HtmlEncode(Eval("Name").ToString())%></h4>
</div>
<div id="showclick" class=hideAll>
<p class="brief"><%# Server.HtmlEncode(Eval("LegalName").ToString())%></p>
<p class="brief"><%# Server.HtmlEncode(Eval("FirstName").ToString())%></p>
<p><%# Server.HtmlEncode(Eval("LastName").ToString())%></p>
</div>
</ItemTemplate>
Then i have the css to define the hideAll class so that when the page loads, the data in this div tag is hidden until the user clicks on the contentdiv link.
.hideAll { display:none }
.displayAll { display:block; top:0px}
Then finally i have the javascript part for firing the click event.
<script type="text/javascript">
function showResults(UserID) {
var contentdiv= document.getElementById('contentdiv');
var showclick = document.getElementById('showclick');
<%
long id =0;
DataAccess dataAccess = new DataAccess();
Data = dataAccess.GetCounterParty(id);
%>
var UserID = <%=dataAccess.GetCounterParty(id) %>
contentdiv.style.visibility = "visible";
$(showclick).removeClass('hideAll');
}
</script>
The UserID is the id of every element in the list. The problem is, the click affects only the first element no matter which other element i click on the list.
In html id is used to refer to one element.
If you use it multiple times the browser would default to the first element.
You should use a class selector. Something like:
$(".contentdiv").click(function(){
$(this).next().removeClass('hideAll');
});
Here is a working example. I used toggleClass though, it seems more appropriate to me.
An id is a unique identifier, you cannot have two or more things on the same page with the same identifier and expect things to work properly. Make your identifiers unique, and bind to the click event using a class selector instead.
you should use class instead of id, id are unique, which only exist in 1 page, class can exist in multple div
some idea for u
html
<div class="showclick hideAll">
script
$('.showclick').on('click', function(){
$(this).toggle(); //toggle to show or hide, can be any element u want to toggle instead of this
});
Related
I'm looking for a JavaScript-free way to dynamically add div elements inside a certain element of an aspx web page according to data passed to i.
I'm looking for something similar to razor c# where you can even create loops and write c# code that directly effects the content of the page.
It appears that razor c# doesn't work unless the page is a .cshtml page, so I'm kinda lost here since I don't want to use JavaScript.
Is there a better approach to it?
Say, below is the placeholder div
<div id = "maindiv">
<asp:PlaceHolder ID ="maindivs" runat="server">
</asp:PlaceHolder>
</div>
Then you may add divs to your placeholder div like below
protected void addmainDiv(int m)
{
for(int i = 0; i< m; i++)
{
System.Web.UI.HtmlControls.HtmlGenericControl newdivs = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
newdivs.Attributes.Add("class", "maindivs");
newdivs.ID = "createDiv";
newdivs.InnerHtml = " I'm a div, from code behind ";
maindivs.Controls.Add(newdivs);
}
}
If you want to create HTML dynamically in .aspx then you can create your html code in your .cs (backend file)
string htmlAsStringToShow = "<div>" + variable + "</div>";
Then show its content in your .aspx page like this :
<%= htmlAsStringToShow %>
Currently I am working on one web application in asp.net.
Application received data from web-service in json format. Requirement is to develop controls dynamically, I did it using html controls. I dynamically created list of label & stored values in it. Now I want to add filter on the top of that list so that it can filter data based on vales entered in the textbox.
I want something like below textbox list of data like item1, item2 and so on, based on value entered in textbox. I need to filter data.
How I can achieve this?I tried to use list.js but it didn't work.
<% foreach (var item in (List<string>)Session["list"])
{
%>
<%--<li><label onclick="redirect('<%:item %>')"><%: item %></label><br/></li>--%>
<li><%:item %></li>
<% } %>
Add texbox with onkeyup event handler, set some id to ul e.g. id="list"
<input type="text" onkeyup="filter(this)" />
<ul id="list">
<li>a</li>
<li>abc</li>
<li>bcd</li>
<li>abc</li>
</ul>
Add the following script (source) and a reference to jquery
<script>
function filter(element) {
var value = $(element).val();
$("#list > li").each(function() {
if ($(this).text().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
Demo: http://jsbin.com/hahodetu/1/edit?html,output
I want to display the details of particular record on same page, user can choose the product from the list of Product name and as soon as user clicks on the links the details of the specific product should display on the other side of the page i.e. othe div. I tried it by creating partial View and Ajax but the details are not displayed on the separate page a new blank page is opened with the name of Partialview and the records are displayed there, but i want details on the same page.ProductName are comming from database, first time the page loads it must contains the details of first record by default, that is working OK. Please try to solve this problem. Thanks
HomeController.cs
public class HomeComtroller:Controller
{
dbProductEntity Productdbentity=new dbProductEntity();
public ActionResult ProductDetails(int id)
{
var query=Productdbentity.tbl_product.First(c=>c.ProductId==id);
return PartialView("PartialView",query);
}
public ActionResult Product()
{
return View(dbentity.tbl_product.ToList());
}
PartialView.cshtml
#model MvcProject.Models.tbl_product
<label> #Model.ProductName </label>
<label> #Model.ProductDesc </label>
Product Page
#model List<MvcProject.Models.tbl_product>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$(div.product a").click(function(e){
var url=this.ref;
$get(url,{},function(data) {
$('#product-detail').html(data);
});
});
});
</script>
</head>
<body>
<div class="product">
<ul class="list">
#foreach(var item in Model)
{
<li><a href="#Url.Action("ProductDetail","Home",new {id=item.ProductId})">
#item.ProductName</a></li>
}
</ul>
<div class="product-detail">
#{Html.RendererPartial("PartialView",Model.FirstOrDefault());}
</div>
</div>
</body>
</html>
You should cancel the default action of the anchor by returning false from your .click event handler:
$(document).ready(function() {
$(div.product a").click(function(e) {
var url=this.ref;
$get(url,{},function(data) {
$('#product-detail').html(data);
});
});
return false; // <-- That's the important bit you were missing
});
If you do not return false from the .click handler, the browser will simply follow the linking to which your anchor is pointing stopping any javascript execution you might have started. Returning false ensures that the browser will not redirect away from the current page, leaving you the possibility to execute an AJAX request and update the current view.
I think you are missing "." after the "$" in first line in below code. And in second line, since "product-detail" is a class name so in jQuery selector use "." (not "#") before class name. Below is the corrected code:
$.get(url,{},function(data) {
$('.product-detail').html(data);
});
For more have a look at http://api.jquery.com/jQuery.get/
You have to stop the default behavior of click event on a link.
<script>
$(function(){
$("div.product a").click(function(e){
e.preventDefault();
var url=this.ref;
$('.product-detail').load(url);
});
});
</script>
I am developing a customizable drop down lists using HTML and JQuery, this drop down lists are containing a hidden html div tag and input text element. If the user click on the input element the jquery code shows the hidden div tag and allow him to choose one of the list items which are embedded inside the hidden div tag. After the user chose his desire item a JavaScript code runs and reflect his chosen item to the text element. here is the html code:
<input type="text" readonly="true" class="reg-content-datacell-textfield" style="cursor:pointer;width:270px;float:left;display:inline-block" id="txtSector" name="txtSector" />
<br />
<div id="ddlSector" style="left:26px;" class="ddlist">
<ul>
<%
MainDatabaseOperationsClass.DatabaseOperations databaseOperations = new MainDatabaseOperationsClass.DatabaseOperations();//db connection class
string sqlStatement = "select * from Dbtsniper02.dbo.Sectors";//get all database sectors
System.Data.SqlClient.SqlDataReader sqlDataReader = databaseOperations.getDataFromDBAsSQLDataReader(sqlStatement);//execute sql statement
while (sqlDataReader.Read())
{
%>
<li class="ddlListSector"><% Response.Write("(" + sqlDataReader[0].ToString() + ") " + sqlDataReader[1].ToString()); %></li>
<%
}
%>
</ul>
JavaScript Code:
$(document).click(function (event) {
if ($(event.target).parents().index($('#ddlSector')) == -1) {
if ($('#ddlSector').is(":visible")) {
$('#ddlSector').slideToggle();
}};
$(document).ready(function () {
$("#txtSector).click(function (e) {
$("#ddlSector").slideToggle();
e.stopPropagation();
return false;
});
$("#ddlSector").click(function (e) {
//disallow hide the current drop down list when you click on it direcly
e.stopPropagation();
return false;
});
$(".ddlListSector").click(function (e) {
//relect you selection of the drop down list to the parent input text field
if ($('#ddlSector').is(":visible")) {
document.getElementById('txtSector').value = '';
document.getElementById('txtSector').value = $(this).html();
$('#ddlSector').slideToggle();
}
});});
Now, my question is if I've others drop down lists like the above one, how I can Update their items data according to the user choice from the above drop down list. I'm gonna do that via change the sql statement according to the value of the text element associated with the desired drop down list but I do not know how I can trigger the event for update only the div tag content if the user select one of the drop down list items
Thank you very much, I'm highly appreciate your cooperation
It sounds like you want to use an AJAX call inside the ddlListSector click event listener. Make a server file that will expect the value selected and return the list of values you want (probably using a sql command). The AJAX could return plain text, JSON, or even full markup depending on how involved you want the front end to be. In the success callback of the AJAX call, update the contents of whatever other drops you have. It looks like your already using jQuery, so I recommend their docs.
I have an ASP usercontrol name ListItem. Each ListItem has 2 ASP controls on it : a label lblIndex and a button btnAction
On my page, I load 10 ListItem into a panel and set lblIndex on each ListPanel an appropriate index.
ListItem 1 : lblIndex.value = '#1'
ListItem 2 : lblIndex.value = '#2'
...
ListItem 10 : lblIndex.value = '#10'
How do I write Javascript that, each time when I click the button on a ListItem, the appropriate lblIndex's value will appear(through an Alert()). I.e. when I click the btnAction on the 2nd ListItem, the text '#2' will come out.
Thank you
to facilitate your life, use jQuery when writing javascript.
in that in mind, let's assume that your ListItem control outputs a ul list with an id... make sure that you had a class, let's imagine that you named list-item so at the end you will have:
<div id="ListItem_1" class="list-item">
...
</div>
Now, you say you some sort of a button inside that list...
<div id="ListItem_1" class="list-item>
<input id="ListItem_1_Button_1" type="button" value="I'm a Button" />
</div>
Once again, explicit give that button a class name, for example: inside-button
I don't know how you have all texts, but I'll again assume that will be a hiiden field with the text to alert ...
some thing like:
<div id="ListItem_1" class="list-item>
<input id="ListItem_1_Button_1" type="button" value="I'm a Button" />
<input id="ListItem_1_Hidden_1" type="hidden" class="text" value="Text to run" />
</div>
and assuming you have 10 lists with several buttons you can simple write:
$(".inside-button").bind("click", function() {
// a button was clicked, let's do something
});
that 1st line says: "Foreach DOM element that has a class name of inside-button attach the click event"
and inside you fire what you want to do
From your question, you only want to perform something on that list:
$(this) // that will be the .inside-button element, so the Button
.closest(".list-item") // get me the closest DOM element with a class name of "list-item"
.find(".text") // find the DOM elemnt with the class name "text"
.val(); // let's see what value that element has
then you can alert() it.
All together:
$(".inside-button").bind("click", function() {
// a button was clicked, let's do something
var txt = $(this).closest(".list-item").find("text").val();
alert( txt );
});