This code is from http://jsfiddle.net/EuyB8/
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#TemplateRow { display:none; }
table, tr, td, th { border: solid thin black; padding: 5px; }
</style>
<script type="text/javascript">//<![CDATA[
$(function() {
//attach the a function to the click event of the "Add Box Attribute button that will add a new row
$('#AddAttr').click(function() {
//clone the template row, and all events attached to the row and everything in it
var $newRow = $('#TemplateRow').clone(true);
//strip the IDs from everything to avoid DOM issues
$newRow.find('*').andSelf().removeAttr('id');
//add the cloned row to the table immediately before the last row
$('#BoxTable tr:last').before($newRow);
//to prevent the default behavior of submitting the form
return false;
});
//attach a remove row function to all current and future instances of the "remove row" check box
$('#DeleteBoxRow').click(function() {
//find the closest parent row and remove it
$(this).closest('tr').remove();
});
//finally, add an initial row by simulating the "Add Box Attribute" click
$('#AddAttr').click();
});
//]]>
</script>
</head>
<body>
<table id="BoxTable">
<tbody><tr>
<th>Name</th>
<th>Nationality</th>
<th>Relationship</th>
<th>Date of Birth</th>
</tr>
<tr id="TemplateRow">
<td>
<select name="BoxName" id="BoxName">
<option selected="selected" value="attr1">attr1</option>
<option value="attr2">attr2</option>
<option value="attr3">attr3</option>
</select>
</td>
<td>
<select name="BoxComparison" id="BoxComparison">
<option selected="selected" value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
<option value="Like">Like</option>
<option value="!=">!=</option>
</select>
</td>
<td>
<input name="BoxVal" id="BoxVal" type="text">
</td>
<td>
<input id="DeleteBoxRow" name="DeleteBoxRow" type="checkbox">
</td>
</tr>
<tr>
<td colspan="4">
<input name="AddAttr" value="Add Box Attribute" id="AddAttr" type="submit">
</td>
</tr>
</tbody></table>
</body>
How can I get all the values of all the generated rows and put them in a c# array?
I have a solution for you but in my oppinion its a bit hacky. Since you are mentioning c# I assume you are working on a ASP.NET application. If that's right here is one way to do it:
First place a invisible textbox control on your page. The important thing here is that you hide it by css. If you set the visible property to false it wont be on your page and you cant sore anything in it.
Once the textbox is added you make a new jquery function which adds the value of your rows into the hidden textbox control. You can eiter do it with a mousedown event on your 'submit'-button or you can do it on the go with a 'changing'-event.
The last thing you have to do is that you have to add separators to the row values that you can split them back into an array in c#.
The value of the textbox control will look like this in the end:
ValueRow1|ValueRow2|ValueRow3
Back in c# its easy to split the value into an array:
string[] myArr = textbox1.Text.Split('|');
Related
I'm Trying to open popup through jquery containing html syntax.but not getting proper idea.I have open an alert as shown below ex but how to open this HTML.The example code which i have shared gets data dynamically in mvc and on clicking that hyperlink i want to open an html page which should also contain dynamically data 'Html' code is given below.Any idea would be appreciated.
HTML
<body>
<table>
<tr>
<td>zone</td><td>Date</td>
</tr>
<tr>
<td>CreatedBy</td><td>CreatedDate</td>
</tr>
<tr>
<td>ClosedBy</td><td>ClosedDate</td>
</tr>
<tr>
<td>Pririty</td><td>IssueType</td>
</tr>
<tr>
<td>Branch/Location</td><td>IssueDescription</td>
</tr>
</table>
<select>
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
<textarea>Description</textarea>
<select>
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
<textbox>Attachment</textbox>
<input type="submit" value="submit"/>
</body>
asp.net mvc
<td id="statusdiv_#item.EscId" class="statusdiv">#Html.ActionLink(#Html.DisplayFor(model => item.Status).ToString(), "Escalation")</td>
jquery
$('.statusdiv').click(function () {
alert('hello');
});
I have added a Select element to an Asp.net page and on each option inside this element I've set the style="background-color: example_color". As outlined in this answer.
When I debug the website and hover the option it is highlighted the correct color specified in the style property, but after I select it and tab to another element on the page, the background color is the normal white color and not the blue or green color defined.
Question:
How can I set an option color after it's been selected?
Select element after it's selected:
Code:
Select element markup:
<div class="form-control">
<label class="col-md-3 control-label" for="Current Status">Status</label>
<div class="col-md-8">
<select id="Status" name="Status" onchange="" class="form-control">
<option style="background-color: blue" value="Down">Down</option>
<option style="background-color: green" value="BCR">BCR</option>
</select>
</div>
</div>
<select> elements are generally notoriously challenging to style in any kind of cross-browser sense, so keep that in mind as this may not work across all browsers. If you need that, you'll likely need to resort to a third-party library like select.css or some of the suggestions in this thread, which explicitly avoid Javascript-based solutions.
You could use the background-color property available on your options to set an explicit style attribute on the parent <select> element during change events as seen below :
<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
<option style="background-color: blue!important" value="Down">Down</option>
<option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
function colorizeMe(element){
// Use the selected value to set the color
element.options[element.selectedIndex].style.backgroundColor
element.setAttribute('style','background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
}
</script>
Example and Snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
<option style="background-color: blue!important" value="Down">Down</option>
<option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
function colorizeMe(element) {
// Use the selected value to set hte color
element.options[element.selectedIndex].style.backgroundColor
element.setAttribute('style', 'background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
}
</script>
</body>
</html>
Javascript
var form = document.getElementById('date_budget');
pop('', 'exp_upd', '95', '80');
form.action = "test.aspx";
form.target = 'exp_upd';
form.submit();
HTML
<form id="date_budget" name="date_budget" method="post">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
The above code opens a popup window, but when I change the html by adding the runat attribute, I am getting “Validation of viewstate MAC failed”, and some extra junk. the modified html is below
<form id="date_budget" name="date_budget" method="post" runat="server">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc" runat="server">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month" runat="server">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year" runat="server">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
Is there any workaround to use both the runat server and using the same element in JS, without using those asp tags something like <%= hidBT.ClientID %> I don't want that any other way.
Try to add this <pages enableViewStateMac="false"> in your web.config (or)
Try to Change this <form id="date_budget" name="date_budget" method="post"> to
this <form id="date_budget" name="date_budget" runat="server">
It shouldn't specify method or action
You can try setting the ClientIDMode="Static" on the control or in the #Page directive. That will keep the id of the form as "date_budget".
Otherwise if you don't need the ViewState on the page, then you can disable it in the #Page directive using EnableViewState="false".
I used to some thing like this in jsp.
<%#page language="java" import="java.util.*"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%# page errorPage="/showError.jsp" %>
<%
String path = request.getContextPath();
%>
<sql:query var="rs" dataSource="jdbc/production">
select id,location,zone,ifnull(DATE_FORMAT(date_recp,'%m/%d/%Y'),'00-00-0000') as date_recp,qry_id ,cust_name,qry_recvd,qry_mode,ifnull(DATE_FORMAT(start_date,'%m/%d/%Y'),'00-00-0000') as start_date,
timing,qry_type,qry_cat,qry_det,ifnull(DATE_FORMAT(date_esclation,'%m/%d/%Y'),'00-00-0000') as date_esclation,ifnull(DATE_FORMAT(date_recp_ho,'%m/%d/%Y'),'00-00-0000') as date_recp_ho,
ifnull(DATE_FORMAT(date_recp_ho,'%m/%d/%Y'),'00-00-0000') as final_date,remarks,qry_stat from cust_supp where final_date is null or final_date='0000-00-00'
</sql:query>
<html>
<head>
<title>Customer Support Search Operation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<%= path %>/js/style.css" />
<style type="text/css" title="currentStyle">
#import "<%= path%>/css/demo_table.css";
#import "<%= path%>/css/demo_table_jui.css";
#import "<%= path%>/css/jquery-ui-1.8.20.custom.css";
#import "<%= path%>/css/TableTools.css";
#import "<%= path%>/css/TableTools_JUI.css";
</style>
<script type="text/javascript" src="<%= path%>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%= path %>/js/tcal.js"></script>
<link rel="stylesheet" type="text/css" href="<%= path %>/css/tcal.css" />
<script src="<%= path%>/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="<%= path%>/js/ZeroClipboard.js" type="text/javascript"></script>
<script src="<%= path%>/js/TableTools.js" type="text/javascript"></script>
<link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=path%>/css/styles.css" rel="stylesheet" type="text/css" />
<script src="<%=path%>/js/tinybox.js" type="text/javascript"></script>
<script src="<%= path%>/js/send_data.js"></script>
</head>
<div class="brand" style="background:url('<%=path%>/images/head.jpg') no-repeat ;"></div>
<body>
<div class="forms">
<form style="height:450pt;width:95%;margin-left:5pt;margin-top:0" name ="form" action="<%=path%>/Download">
<input type="hidden" name="query" value="q0" />
<input type="hidden" name="dwld" value="cust_supp" />
<table width="95%" id="dataTable" class="display">
<thead>
<tr>
<th width="20pt"><b>S.no</b></th>
<th><b>Query ID</b></th>
<th><b>Zone</b></th>
<th><b>Location</b></th>
<th><b>Customer Name</b></th>
<th><b>Query Received</b></th>
<th><b>Date of Receipt</b></th>
<th><b>Mode of Query</b></th>
<th><b>Start Fall-Up Date</b></th>
<th><b>Timing</b></th>
<th><b>Query Type</b></th>
<th><b>Query Category</b></th>
<th><b>Query Details</b></th>
<th><b>Date of Escalation</b></th>
<th><b>Date of Receipt HO/Client/Bank</b></th>
<th><b>Final Date</b></th>
<th><b>Remarks</b></th>
<th><b>Query Status</b></th>
<th><b>Update</b></th>
</tr>
</thead><tbody>
<c:forEach var="row" items="${rs.rows}">
<tr>
<td>${row.id}</td>
<td><span>${row.qry_id}</span></td>
<td><span>${row.zone}</span></td>
<td><span>${row.location}</span></td>
<td><span class="editable">${row.cust_name}</span></td>
<td><select name="query_rcvd" >
<option value="${row.qry_recvd}" selected>${row.qry_recvd}</option>
<option value="Client">Client</option>
<option value="HO">HO</option>
<option value="Other">Other</option>
</select></td>
<td align="right"><input type="text" name="date" class="tcal" value="${row.date_recp}" /></td>
<td><select name="mode" >
<option value="${row.qry_mode}" selected>${row.qry_mode}</option>
<option value="phone">Phone</option>
<option value="E-mail">E-mail</option>
</select></td>
<td><input type="text" name="date" class="tcal" value="${row.start_date}"/></td>
<td><span class="editable">${row.timing}</span></td>
<td><select name="nature">
<option value="${row.qry_type}" selected>${row.qry_type}</option>
<option value="ECS Debit">ECS Debit</option>
<option value="ECS Credit">ECS Credit</option>
<option value="ASP">ASP</option>
<option value="MF">MF</option>
<option value="Retail">Retail</option>
</select></td>
<td><select name="category">
<option value="${row.qry_cat}" selected>${row.qry_cat}</option>
<option value="Status of the Transaction" >Status of the Transaction</option>
<option value="Mandate Related Queries">Mandate Related Queries</option>
<option value="Mandate Re-submission Cases">Mandate Re-submission Cases</option>
<option value="Wrong Reason Code Given By The Bankers">Wrong Reason Code Given By The Bankers</option>
<option value="Txn bounced at our end but cust bank a/c debited">Txn bounced at our end but cust bank a/c debited</option>
<option value="Extra debit in the bank account">Extra debit in the bank account</option>
<option value="Credit Query">Credit Query</option>
<option value="R7">R7 Report</option>
</select></td>
<td><span class="editable">${row.qry_det}</span></td>
<td><input type="text" name="date" class="tcal" value="${row.date_esclation}"/></td>
<td><input type="text" name="date" class="tcal" value="${row.date_recp_ho}"/></td>
<td><input type="text" name="date" class="tcal" value="${row.final_date}"/></td>
<td><span class="editable">${row.remarks}</span></td>
<td><span class="editable">${row.qry_stat}</span></td>
<td><input type="button" class="tab_buttons" value="Update"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</div>
</body>
</html>
That creates a page from MySql DB which contains select and input elements within a html table, Now I want to achieve the same in an aspx page. I tried to add dynamically from code behind, but that's completely mixing c# with html, I don't want that, As I am new, someone suggested me spark, they said it worked like jstl which I used above, I tried but spark is not getting into my head, a simple simple simple example plsss. Or any other better way to achieve that. MVC not involved in this so that I can use razor.
Thank you
I'm having problems with the dropdownlist button.. the buttons looks weird..
Here is the image: http://imgur.com/9zHNM
HTML markup:
<td class="style 4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany"
id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany"
style="height:25px;width:167px;">
</td>
CSS markup:
.style4
{
width: 185px;
}
What could be the problem?
Edit: problem resolved, it was the padding of the select in one my CSS
i have resolved it with this style
<td class="style 4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany"
id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany"
style="height:25px;width:167px;padding:0 0;padding-top:0;paddingright-:0;padding- bottom:0;padding-left-value:0; ">
</td>
It's kinda hard to help you without a living demo but, what if you adjust the same style on the class .style4 and the style of the select?
Set them both at width: 185px; for example.
Hope it helps!
Your CSS properties in .style4 will not have any effect, because you've set the class attribute value to style 4. Remove the whitespace :)
Btw.: Your HTML has some errors.
Here is the valid one:
<td class="style4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany" id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany" style="height:25px;width:167px;">
<option value="one">ONE</option>
<option value="two">TWO</option>
<option value="three">THREE</option>
</select>
</td>
Numbers only for CSS classes and IDs are not allowed.