jquery select span by id - asp.net

hello guys
some times you just loose it and you cant event remember how to search that that you lost
<div>
<table cellspacing="0" rules="all" border="1" id="ctl00_DefaultContent_migrationGridView" style="height:90%;width:100%;border-collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col">Lenda</th><th scope="col">CSV Dosje</th><th scope="col">Gjendje</th><th scope="col">Datë</th><th scope="col">Njoftim</th><th scope="col"> </th>
</tr><tr>
<td>
<input type="submit" name="ctl00$DefaultContent$migrationGridView$ctl02$Button1" value="Fshije" id="ctl00_DefaultContent_migrationGridView_ctl02_Button1" />
</td><td>
<a id="ctl00_DefaultContent_migrationGridView_ctl02_CaseLinkButton" href="javascript:__doPostBack('ctl00$DefaultContent$migrationGridView$ctl02$CaseLinkButton','')" style="font-weight:bold;">mig1</a>
</td><td>
<span id="ctl00_DefaultContent_migrationGridView_ctl02_lblCSVFileName">19_71914066_2010-11-11_0849_ENG_SOFALI.csv</span>
</td><td>
<span id="ctl00_DefaultContent_migrationGridView_ctl02_Label2" style="color:Maroon;font-weight:bold;">Read</span>
</td><td>2010-12-28</td><td>
<span id="ctl00_DefaultContent_migrationGridView_ctl02_Label3"></span>
</td><td>
<a id="ctl00_DefaultContent_migrationGridView_ctl02_startStopLinkButton" href="javascript:__doPostBack('ctl00$DefaultContent$migrationGridView$ctl02$startStopLinkButton','')">Start migration</a>
<a id="ctl00_DefaultContent_migrationGridView_ctl02_checkedAllLinkButton" title="Të Kontrolluara" href="javascript:__doPostBack('ctl00$DefaultContent$migrationGridView$ctl02$checkedAllLinkButton','')">Të Kontrolluara</a>
</td>
</tr><tr>
<td>
<input type="submit" name="ctl00$DefaultContent$migrationGridView$ctl03$Button1" value="Fshije" id="ctl00_DefaultContent_migrationGridView_ctl03_Button1" />
</td><td>
<a id="ctl00_DefaultContent_migrationGridView_ctl03_CaseLinkButton" href="javascript:__doPostBack('ctl00$DefaultContent$migrationGridView$ctl03$CaseLinkButton','')" style="font-weight:bold;">mig1</a>
</td><td>
<span id="ctl00_DefaultContent_migrationGridView_ctl03_lblCSVFileName">19_71914070_2010-11-11_0850_ENG_TRUDE.csv</span>
</td><td>
<span id="ctl00_DefaultContent_migrationGridView_ctl03_Label2" style="color:Maroon;font-weight:bold;">Read</span>
</td><td>2010-12-28</td><td>
<span id="ctl00_DefaultContent_migrationGridView_ctl03_Label3"></span>
</td><td>
<a id="ctl00_DefaultContent_migrationGridView_ctl03_startStopLinkButton" href="javascript:__doPostBack('ctl00$DefaultContent$migrationGridView$ctl03$startStopLinkButton','')">Start migration</a>
<a id="ctl00_DefaultContent_migrationGridView_ctl03_checkedAllLinkButton" title="Të Kontrolluara" href="javascript:__doPostBack('ctl00$DefaultContent$migrationGridView$ctl03$checkedAllLinkButton','')">Të Kontrolluara</a>
</td>
</tr>
</table>
</div>
can somebody tell me how to iterate through spans that have this string on the id 'lblCSVFileName'
and get their values
for the first row i should get 19_71914066_2010-11-11_0849_ENG_SOFALI.csv and for the second
19_71914070_2010-11-11_0850_ENG_TRUDE.csv
:( another bad day

You can use an attribute ends-with selector for the ID and .map() to get an array of strings (the text inside each), like this:
var arr = $("span[id$='lblCSVFileName']").map(function() {
return $(this).text();
}).get();
Or, a slightly more optimized unpublished version:
var arr = $("span[id$='lblCSVFileName']").map(function() {
return $.text([this]);
}).get();
This would get you an array of values to work with, for example:
["19_71914066_2010-11-11_0849_ENG_SOFALI.csv", "19_71914070_2010-11-11_0850_ENG_TRUDE.csv"...]

The following code will give you what you need.
It gets all spans that have an ID that starts with "ctl00_DefaultContent_migrationGridView_ctl02_".
$('span[id^="ctl00_DefaultContent_migrationGridView_ctl02_"]').each(function() {
//the following will give you the text of each span
$(this).text();
});
NOTE: I would add a class to each span and do a jquery select using that.

Related

How to display properties of specific object selected via dropdown?

I wrote a query in which I get the semester class, display its values ​​as a name and get its id. Accordingly, when I select the semester I need in the drop-down list, I am given the semester that I chose. But I also need to display its duration in another field, I can do this if I create a ForEach loop and use it to extract this value, but it displays absolutely all the available values, and not the one I need. Tell me how to do it right? For display I use Spring MVC. Now the page looks like this:
I am also attaching the jsp content:
<form:form action="allSemestrsSem" method="get" id="selectSemestr" modelAttribute="semestr">
<tr>
<td style="font-size: large;">Select semester</td>
<td style="padding-left: 50px">
<select name="selectSemestr">
<c:forEach items="${semestr}" var="semestr">
<option value="${semestr.id}">${semestr.name}</option>
</c:forEach>
</select>
</td>
<td style="padding-left: 20px">
<security:authorize access="hasRole('ADMIN')">
<input type="submit" id="button" value="select" /></td>
</security:authorize>
</tr>
<tr height="80px" style="font-size: large; font-weight: bold;">
<td colspan="3">Semester duration:
<c:forEach items="${semestr}" var="semestr"> ${semestr.duration} </c:forEach>
</td>
</tr>
</form:form>
And just in case my controller is:
#RequestMapping(value = "/allSemestrsSem", method = RequestMethod.GET)
public String allSemestrs(#RequestParam(name = "selectSemestr") String selectSemestr, Model model) {
List<Semestr> semestr = service.getSemestr();
model.addAttribute("semestr", semestr);
List<Discipline> allDisciplines = service.getDisciplineSemestrId(Integer.valueOf(selectSemestr));
model.addAttribute("allDisc", allDisciplines);
return "semestr";
}

Web Scraping a Table which extends to "Next" page (without change in url) in R

I am trying to scrape the table from this page. The table has some 400 rows of which only 50 are displayed at a time.
The source code of the page shows only the first 50 items even if I open the source code when later items are displayed (after clicking next). Snippet of the source code is below:
50
</td><td>
<span id="cphBody_GridPriceData_Labdistrict_name_49">Bangalore</span>
</td><td>
<span id="cphBody_GridPriceData_LabdMarketName_49">Bangalore</span>
</td><td>
<span id="cphBody_GridPriceData_Labcomm_name_49">Potato</span>
</td><td>
<span id="cphBody_GridPriceData_LabdVariety_49">Local</span>
</td><td>
<span id="cphBody_GridPriceData_LabdVariety_49">FAQ</span>
</td><td>
<span id="cphBody_GridPriceData_LabMinPrice_49">1800</span>
</td><td>
<span id="cphBody_GridPriceData_Labmaxpric_49">1900</span>
</td><td>
<span id="cphBody_GridPriceData_LabModalpric_49">1850</span>
</td><td>
<span id="cphBody_GridPriceData_LabReportedDate_49">06 May 2020</span>
</td>
</tr><tr align="left">
<td colspan="10"><table>
<tr>
<td><input type="image" src="../images/Next.png" alt=">" onclick="javascript:__doPostBack('ctl00$cphBody$GridPriceData','Page$Next');return false;" /></td><td><input type="image" src="../images/Last.png" alt=" >>" onclick="javascript:__doPostBack('ctl00$cphBody$GridPriceData','Page$Last');return false;" /></td>
</tr>
</table></td>
</tr>
</table>
I don't know Java but from web found that V8 package in R can be used for Java rendered content on web pages. In the code above, I think the onclick="javascript:__doPostBack('ctl00$cphBody$GridPriceData','Page$Next');return false; is the part from where the next part of the table can be accessed. The __doPostBack function is defined above in the source code of the page.
I scraped the table till row 50 and extract the function code using html_nodes("script"). But couldn't get the call part of the function.
How do I get the data from next pages?
Apologies for the long post.

Checkbox not being rendered with correct gentelella css when added via javascript

I'm trying to add some rows data in a datatable, first via Pug and then later on via javascript.
I add the first rows getting data via controller call, and then adding it via pug parse:
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered bulk_action">
<thead>
<tr>
<th>
<th>Aprovado</th>
</th>
<th>Nome</th>
<th>Email</th>
<th>Data de nascimento</th>
<th>Cidade</th>
<th>Gênero</th>
<th>Escolaridade</th>
<th>Instituição de ensino</th>
<th>Semestre</th>
<th>Token</th>
<th>Selection Status</th>
</tr>
</thead>
<tbody>
for candidate in candidates
- var formatedCandidate = candidateService.formatCandidateForDataTable(candidate, newTrueCheckbox, newFalseCheckbox);
<tr>
<td>
<th>
if formatedCandidate.isCandidateApproved
<input type="checkbox" id="check-all" class="flat" checked>
else
<input type="checkbox" id="check-all" class="flat">
</th>
</td>
<td>
= formatedCandidate.name
</td>
<td>
= formatedCandidate.email
</td>
<td>
= formatedCandidate.bornDate
</td>
<td>
= formatedCandidate.city
</td>
<td>
= formatedCandidate.gender
</td>
<td>
= formatedCandidate.educationLevel
</td>
<td>
= formatedCandidate.educationInstitution
</td>
<td>
= formatedCandidate.educationSemester
</td>
<td>
= formatedCandidate.token
</td>
<td>
= formatedCandidate.selectionStatus
</td>
</tr>
</tbody>
</table>
This way, it manages to render the checkbox with the right style:
Later on, I try to update the rows via a "reload" button, getting data via a get request and then adding rows via javascript:
$.get("candidates/getCandidatesForTable", function(candidatesArray){
candidateTable.clear().draw();
candidatesArray.forEach((candidate, index) => {
debugger;
if (candidate[1]) {
candidate[1] = `<th>
<input type="checkbox" id="check-all" class="flat" checked/>
</th>`;
} else {
candidate[1] = `<th>
<input type="checkbox" id="check-all" class="flat"/>
</th>`;
}
candidateTable.row.add(candidate).draw();
});
});
Although I inserted the HTML code via javascript using the same properties as it was added via pug, the checkbox was rendered different: it is rendered, but the css style is now gone:
How should I add the a checkbox via javascript and still get the correct css styling?

Multiple foreach in Durandal

I am all new to Durandal and have been playing around with it for a few hours now. It seems very promising - but now I have run into a problem, I cannot figure out - and cannot find a solution with Google.
I have a view with three tables of data - creditCardLines, cashLines and drivingReimbursementLines. They fetch data from three different data sources - and the user can add new lines to cashLines and drivingReimbursementLines (left out the forms).
Problem: In the viewmodel, I can easily bind a list for data to the first foreach - but I cannot figure out how to bind data to the second and third.
In the activate function I make an ajax call to my server API to get the data for the first foreach - and then returns the promise, when this finishes. How do I get data for the second and third foreach here?
ViewModel:
define(function () {
var submit = function () {
this.displayName = 'Expenses';
this.creditCardLines = ko.observableArray();
var me = this;
this.activate = function () {
return $.get('/submit/GetCreditCardLines').then(function (creditCardLines) {
me.creditCardLines(creditCardLines.Data);
});
};
};
return submit;
});
View:
<section>
<h2 data-bind="html:displayName"></h2>
<h3>CreditCard lines</h3>
<table class="table">
<tbody data-bind="foreach: creditCardLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Amount"></td>
<td><input type="checkbox" data-bind="checked: ApprovedEmployee" /></td>
</tr>
</tbody>
</table>
<h3>Cash lines</h3>
<table class="table">
<tbody data-bind="foreach: cashLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Amount"></td>
</tr>
</tbody>
</table>
<!-- TODO: Generate form to add new lines -->
<h3>Driving reimbursement lines</h3>
<table class="table">
<tbody data-bind="foreach: drivingReimbursementLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Distance"></td>
<td data-bind="text: Rate"></td>
<td data-bind="text: Amount"></td>
</tr>
</tbody>
</table>
<!-- TODO: Generate form to add new lines -->
<!-- Approve and save all lines as a quote with lines -->
<input type="submit" value="Submit quote" />
</section>
This is how I've been dealing with multiple jQuery deferred calls in my view models:
return $.when(
$.get('/submit/GetCreditCardLines'),
$.get('/submit/GetCashLines'),
$.get('/submit/GetReimbursementLines'))
.then(function (creditCardLines, cashLines, reimbursementLines)
{
processCreditCardLines(creditCardLines);
processCashLines(cashLines);
processReimbursementLines(reimbursementLines);
})
.fail(function (status)
{
// Do whatever you need to if it fails
});
You don't need the process methods if you don't want them, but if you're doing anything complicated, I think it's neater to have them.
You should check out BreezeJS. It has an option to make a single Ajax call to pull multiple lookups.
Take a look at the BreezeJS docs for a detailed explanation: http://www.breezejs.com/documentation/lookup-lists

asp.net radio button grouping

I am currently having an issue with radio buttons and grouping. I have an asp radio button within a repeater control. I have the group name attribute set to "Customer". When the page loads, the radio buttons are not grouped. Instead of the id fields being set to the group name, it is setting the value fields of the radio buttons. I know that I have tried setting radio buttons up outside of a repeater control and have had the same issue. What is going on here?
aspx
<asp:Repeater ID="repCustomers" runat="server">
<HeaderTemplate>
<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
<tr>
<th> </th>
<th>Cust. No.</th>
<th>Cust. Name</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:RadioButton ID="radCustomer" GroupName="Customer" runat="server" ValidationGroup="Customer" ToolTip='<%#Eval("CustomerNumber") %>' />
</td>
<td><%#Eval("CustomerNumber")%></td>
<td><%#Eval("Name") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
output html
<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
<tr>
<th> </th>
<th>Cust. No.</th>
<th>Cust. Name</th>
</tr>
<tr>
<td>
<span title="111111"><input id="ctl00_PrimaryContent_repCustomers_ctl01_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl01$Customer" value="radCustomer" /></span>
</td>
<td>111111</td>
<td>Jeremy's Test</td>
</tr>
<tr>
<td>
<span title="222222"><input id="ctl00_PrimaryContent_repCustomers_ctl02_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl02$Customer" value="radCustomer" /></span>
</td>
<td>222222</td>
<td>My Test</td>
</tr>
<tr>
<td>
<span title="333333"><input id="ctl00_PrimaryContent_repCustomers_ctl03_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl03$Customer" value="radCustomer" /></span>
</td>
<td>333333</td>
<td>Jim Bob's BBQ</td>
</tr>
<tr>
<td>
<span title="444444"><input id="ctl00_PrimaryContent_repCustomers_ctl04_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl04$Customer" value="radCustomer" /></span>
</td>
<td>444444</td>
<td>New Hope Hamburgers</td>
</tr>
<tr>
<td>
<span title="555555"><input id="ctl00_PrimaryContent_repCustomers_ctl05_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl05$Customer" value="radCustomer" /></span>
</td>
<td>555555</td>
<td>Pied Piper Pizza</td>
</tr>
<tr>
<td>
<span title="666666"><input id="ctl00_PrimaryContent_repCustomers_ctl06_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl06$Customer" value="radCustomer" /></span>
</td>
<td>666666</td>
<td>Sandy's Subs</td>
</tr>
<tr>
<td>
<span title="777777"><input id="ctl00_PrimaryContent_repCustomers_ctl07_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl07$Customer" value="radCustomer" /></span>
</td>
<td>777777</td>
<td>Leonard's Lambchops</td>
</tr>
<tr>
<td>
<span title="888888"><input id="ctl00_PrimaryContent_repCustomers_ctl08_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl08$Customer" value="radCustomer" /></span>
</td>
<td>888888</td>
<td>Dave's Diamond Deli</td>
</tr>
<tr>
<td>
<span title="999999"><input id="ctl00_PrimaryContent_repCustomers_ctl09_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl09$Customer" value="radCustomer" /></span>
</td>
<td>999999</td>
<td>Ernie's Eatery</td>
</tr>
</table>
I finally got around this by creating a plain radio button and setting the value using an server-side eval.
<input type="radio" name="radCustomer" value='<%#Eval("CustomerNumber") %>' />
Now when the application performs a postback, I check for the value of Request.Form["radCustomer"]. This works flawlessly.
Unfortunately, this is a well known issue with radio buttons within a repeater. One of your only options would be to create a custom server control derived from the RadioButton class and override how it renders.
EDIT: Here's a sample of what the derived class may look like:
public class MyRadioButton : RadioButton
{
protected override void Render(HtmlTextWriter writer)
{
writer.Write("<input id=\"" + base.ClientID + "\" ");
writer.Write("type=\"radio\" ");
writer.Write("name=\"" + base.ID + "\" ");
writer.Write("value=\"" + base.ID + "\" />");
writer.Write("<label for=\"" + base.ClientID + "\">");
writer.Write(base.Text);
writer.Write("</label>");
}
}
I fixed it in javascript:
$(function () {
$("#divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
});
I had the same issues. I am using Literal as placeholder to render radio button onItemCreated event.
ASP.Net
<asp:Repeater ID="rpt" runat="server" OnItemCreated="rpt_OnItemCreated">
<ItemTemplate>
<asp:Literal ID="lit" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
C#
protected void rpt_OnItemCreated(object sender, RepeaterItemEventArgs e) {
Literal lit = (Literal)e.Item.FindControl("lit");
lit.Text = "<input type=\"radio\" name=\"myGroup\">";
}
I had to modify slightly the answer posted above by r3dsky.
Here's what worked for me:
$(document).ready(function () {
$(".divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
});
I would start by adding a value on my radiobutton Value='<%#Eval("CustomerNumber") %>'.
I made my radiobutton have autopostback set to true, and then in the event handler set all the other radio buttons to BE unselected.
Not ideal, but I need lots control over the visibility and enabled attributes of the radiobutton, and it seemed easier to let ASP.NET control that rather than resorting to client side script.
This is a well known bug with the ASP.NET Repeater using RadioButtons:
here best solution in my opinion
I did this:
$("input:radio").attr("name", $("input:radio").first().attr("name"));
Why? because if you replace the name property for any string you want, you will get an 'not found error'. So, you need to get the name of the first radiobutton, and rename all of them with that name. It works like a sharm ;)
My solution, similar to others:
<input id="ctlRadio" runat="server" type="radio" data-fixgroupbug="1" >
// Fixes this ASP.NET bug: if radio input is inside repeater you can't set its name.
// Every input gets set different name by ASP.NET.
// They don't behave as a group. You can select multiple radios.
function fixRadiogroupBug()
{
$('[type="radio"][data-fixgroupbug]').click(function () {
$(this).siblings('[type="radio"]').prop('checked', false);
});
}
$(document).ready(function () {
fixRadiogroupBug();
});

Resources