I have a question about repeater objects in asp.net.
In html and script parts I have this code below.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyEdit);
function MyEdit() {
jQuery(function($) {
//editables on first profile page
$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>' +
'<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>'
//editables
//text editable
$('#rptQuestionTitle')
.editable({
type: 'text',
name: 'username'
});
$('#rptQuestionDescription')
.editable({
type: 'text',
name: 'username'
});
});
}
MyEdit();
<asp:Repeater ID="rptQuestionRepeater" runat="server">
<HeaderTemplate>
<table class="table table-bordered">
<tr>
<th style="width: 50px">No</th>
<th style="width: 200px; height: auto">Question</th>
<th style="width: 400px; height: auto">Description</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%#Eval("Sort")%>
</td>
<td><span class="editable editable-click" runat="server" id="rptQuestionTitle"><%#Eval("Text") %></span></td>
<td><span class="editable editable-click" runat="server" id="rptQuestionDescription"><%#Eval("Description") %></span></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
I am trying to do an editable table. I have to be able to edit each row. But as you can see my script codes, I can only assign id's to be editable. I need to have class editable.
In ASP.NET repeater each element has different Id's thanks to the repeater. My edit JS code works just for one row because I've assigned the id's by myself as in the JS and Repeater.
But after second row the ID's are automatically changed into something like repeater's counter.
So my real question is, apart from editing with equal ID's in the script, how can I edit my rows in repeater which they will have different ID's. I think I need to use foreach() but not sure how to do it.
I want to have my all rows editable when I just type their class ".editable" or I can create another class, it doesn't really matter. All I want is an ID free solution.
I wasn't able to run your code at the snippet. Bu try using $('.editable') instead of the id $('#rptQuestionTitle'). If the plugins is ready to receive an array and work with it, it'll work.
Related
I am trying to show selected values of a dropdown in my ui.
<tr class="odd" rowid="1" height="50">
<td>
<select disabled name="item[]" id="item_1" class="dropdown required" tabindex="18">
<?php echo $itemOption;?>
</select>
</td>
<td >
<a href="javascript:void(0);" style="height:40px; width:45px" class="button add_new_row ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-focus" data-role="button" ><span class="ui-button-text" style="padding:0;" disabled>+</span></a>
</td>
</tr>
and in jquery I need to get this tr for replicating my dropdown. Here is my jquery
var thisRow = $(this).closest('tr');
newid=parseInt(thisRow.attr('rowid'))+1;
var count = $('.dataTable input.timepicker').length + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
But I am getting undefined for thisRow. What may be the reason. Some one please correct me.
You should call this script using any action like bind up in function or trigger on any event etc.
Where you want to call this??
Let have an example, suppose I have a HTML like
<div id="div1">
<span class="test">Call Closest Division</span>
</div>
<div id="div2">
<span class="test">Call Closest Division</span>
</div>
and I want to get closest division when click on span. My script look like this
$('.test').click(function(){
var id = $(this).closest('div').attr('id');
alert(id);
})
Don't forgot to include jquery library.
Working demo
I have a table as below and am trying to open a pop-up window with the link '/ledesInvoiceErrors.do?InvoiceId='+parentInstanceId' when user clicks on Invoice number columns of table (INV1 and INV2) instead of going to the hyper link associated with invoice number fields.
http://jsfiddle.net/pmgguwob/3/
<div class="listTable expanded">
<table class="searchResults {id:321}">
<thead>
<tr class="tipAdded">
<th class="first unsortable ui-state-default ui-state-hover ui-state-active"></th>
<th data-name="Invoice Number" class="typeString ui-state-default ui-state-hover sort asc ui-state-active" id="sort_invoiceNumber">
Invoice Number
</th>
<th data-name="Invoice Total" class="typeMoney last ui-state-default ui-state-hover ui-state-active sort" id="sort_invoiceTotal">
Invoice Total
</th>
</tr>
</thead>
<tbody class="">
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV1
</div>
<input value="65" name="invoices0.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=51;parentFieldName=invoices">
INV1
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
15.25 USD
</div>
</td>
</tr>
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV2
</div>
<input value="66" name="invoices1.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=55;parentFieldName=invoices">
INV2
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
111.25 USD
</div>
</td>
</tr>
</tbody>
</table>
Am a very beginner of jQuery and I dont really know how to achieve this. Could anyone please me with this?
Note: I dont have liberty of modifying the hyperlinks associated with Invoice number fields since these links are generated from our internal framework. but I can embed jquery script on my page to override the hyperlinks
SOLUTION UPDATED
http://jsfiddle.net/pmgguwob/10/
To override your hyperlink's behaviour, you can do something along the lines of:
$(function(){
// you may have to narrow down the selector here to a specific class or 'td'
$(".searchResults a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
window.open(url, 'window name', 'window settings');
return false;
});
});
Updated Fiddle
In this case, something like this (fiddle):
$("a").click(function (e) {
e.preventDefault();
var mills = (new Date).getTime();
window.open($(this).attr("href"), mills);
//$("body").append("#" + $(this).attr("href") + "#");
});
I'm using mills to give each window a new handle, so you don't reuse a window and potentially confuse your user by reloading a window that's hidden from them. The last line is just to show the URL it's using for testing; you might want to massage that value a little, but I believe it's right as is.
I know window.open isn't new and cool, but its options let you control the new window's appearance with likely enough granularity. You could jQuery that up instead if you wanted.
I am trying to hide a button in a table column based on another column value, there's a table column field call "Archive" and if that value is true, I want to hide a button from another column. The code below I have however only hides the button in the first row and ignore subsequent rows. Please kindly assist. Thanks.
<table class="table table-striped table-bordered">
<tr>
<td width="8%" class="table_pink" style="background-color:#ED4085">Name</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Email</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Country</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Time</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">WrongAtQuestion</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">Winner?</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">CreatedDateTime</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">Hidden</td>
<td width="20%" class="table_pink" style="background-color:#ED4085">Action</td>
</tr>
#foreach (var item in Model)
{
if (item.Archive)
{
<script type="text/javascript">
$('#hideButton').hide();
</script>
}
<tr>
<td>#item.Name</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#item.Time</td>
<td>#item.WrongAtQuestion</td>
<td>#item.IsWinner</td>
<td>#item.CreatedDateTime</td>
<td>#item.Archive</td>
<td><a class="btn btn-primary" href="#" id="hideButton" onclick="deleteEntry('#item.Id', '#item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a></td>
</tr>
}
</table>
Well the first problem is that you are creating invalid html. The id attribute is supposed be unique, but in every row you're outputting an anchor with id="hideButton".
When you then use $('#hideButton') it will find (in most browsers) the first element with that id, not all of them. But even if duplicate ids were allowed, there's nothing to tie the script with $('#hideButton').hide() to any particular row - just because the script block happens to precede the row doesn't make a connection between them.
I'd suggest instead that you get rid of that script block entirely, and then use a server-side if inside the td element with the link to only include the link if item.Archive is false. Then you wouldn't need any JS/jQuery/CSS. I'm not familiar with the server-side language you're using, but in pseudo code it might look something like this:
<td>
#if(!item.Archive){
<a class="btn btn-primary" href="#" onclick="deleteEntry('#item.Id', '#item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a>
}
</td>
Another alternative would be to use server-side code to add class="archive" to the relevant anchor elements, and then use this jQuery:
$(document).ready(function() {
$("a.archive").hide();
});
(Or if you need to do other operations depending on the archive status you might like to put the class on the tr element and use $("tr.archive a.btn").hide();.)
I have gridview with four columns. All the data inside is generated in RowDataBound event using Literals
eg.
<asp:TemplateField HeaderText="" >
<ItemTemplate>
<asp:HiddenField ID="ID" Value='<%#Eval("id")%>' runat="server" />
<asp:Literal ID="ltrImage" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
and
<asp:TemplateField HeaderText="" HeaderStyle-HorizontalAlign="Center"
ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Literal ID="lrtBrief" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
In one of these Literals I am creating a <a> tag and I want to find the <%#Eval("id")%> value in click event of the <a> tag.
I did try something like this but didn't work
$('.contactLink').click(function () {
var grd = $('#MainContent_cphMain_DisplayResults1_gvDisplay');
var txt = $(grd).find("cells[1].innerHTML").html();
});
HTML Looks Like this
<td align="center" style="width:5%;">
<input id="MainContent_cphMain_DisplaySearchResults1_gvListing_Listing_0" type="hidden" value="1" name="ctl00$ctl00$MainContent$cphMain$DisplaySearchResults1$gvListing$ctl02$Listing">
<table class="contact">
<tbody>
<tr>
<td valign="top">
<h3>Test</h3>
<h3>
<a id="hlContact" class="contactLink format" runat="server">Contact</a>
<a id="hlViewF" class="viewLink format" href="CategoriesSearch.aspx?ID=1" runat="server">View </a>
</td>
</tr>
</tbody>
</table>
</td>
Any help will be appreciate
Thanks
Note that you're missing a closing h3 around your two links.
$(".contactLink").click(function() {
var value = $(this).closest("table") // Get the <a>'s closest <table>
.siblings(":hidden") // <hidden>
.val();
});
Fiddle for reference.
if I understand your question right:
In one of these Literals I am creating a tag and I want to find
the <%#Eval("id")%> value in click event of the tag.
I would say something like this would do the trick
$('a').live("click", function () {
alert($(this).attr("id"))
});
I made this invoice page.
There is a repeater that generates a table.
There are invoice item descriptions coming into td tags encapsulated with div tags
like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td class="griditem text">
<div class="invoiceDescription" id='<%# "item-" + Eval("ID") %>' value='<%# Eval("ID") %>' onclick="InvoiceItemClicked(this);">
<%# Eval("Description") %>
</div>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:n}", Eval("Quantity"))%>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:c}", Eval("UnitCost"))%>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:c}", Eval("Total"))%>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
If you see the first line, I call a javascript onclick. The function is like this (uses jQuery):
function InvoiceItemClicked(elm) {
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.value = $(elm).text();
$(elm).html(textbox);
}
This is the first time I try to do sth like this, and it worked in the first shot. It transforms lines into textboxes with same text set into them. But the problem is when the generated textbox is clicked (focus), the text inside it disappears.
I will also appreciate any other best practices to do this inline editing. I need to then update the items via webservices etc..
Thanks in advance.
yep my bad!
function InvoiceItemClicked(elm) {
var b = $(elm).hasClass('invoiceDescriptionEditing');
if(!b)
{
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.setAttribute('id', 'txt');
$(textbox).css('width', '550px');
textbox.value = $(elm).text();
$(elm).html(textbox);
$(elm).removeClass('invoiceDescriptionEditable');
$(elm).addClass('invoiceDescriptionEditing');
}
}
this is aight! :)