Hi I want to access text present in all section of my application. I cannot use id because in one application there are different tables with different id's. I want to access text name whenever I place mouse on that td cell irrespective of table so I can't use id. Please suggest me a way to do this using JQuery. The text which I want to access are from asp.net aspx page.
In jquery, you can apply a hover event to every td which fetches it's text. put the text in a variable, then pass it on to your .aspx handler with ajax. here is a simple example. its a good idea to put this script block in your ready function, or near the end of your document.
jQuery
$('td').hover(function () {
//mouse over
//get the data
var tdText = $(this).text();
console.log(tdText);
//do something with the data
var jqxhr = $.ajax("handler.aspx?text=" + tdText)
.done(function () {
console.log("success");
//do something
})
.fail(function () {
console.log("error");
//do something else
});
},
function () {
//mouse out
console.log("mouse-out");
}
);
I can only help you with determining if the mouse cursor is above any td element. You will need to modify the code to fit your needs to display something useful.
HTML:
<p id="message"> </p>
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data A</td>
<td>Data B</td>
<td>Data C</td>
</tr>
</table>
JS:
addEventListener("mouseover", function(event) {
if (event.toElement.localName == 'td')
$('#message').html("You are in a table cell");
else
$('#message').html(" ");
}, false);
I also created a fiddle for you to test: http://jsfiddle.net/m3EmK/
Related
I am working on an ecommerce site where I am stuck on the cart management. Basically before login, products are kept in a session and I am trying to update the product quantity stored in the session using Ajax. I mean whenever I write in the 'Quantity To Change', the changed value should be reflected in the 'Quantity' column.
Note: I've shortened the post and figured out why it wasn't firing while debugging. Actually I was unable to get the id of the associated product. Now it passes the id. That's it. Now I've another issue - The TextBox are being created dynamically with a for loop. I used developer tools to figure out how the TextBoxes are generated dynamically and it is something like this:
For Product 1: cartDetails_0__Quantity
For Product 2: cartDetails_1__Quantity
I am wondering how to grab the quantity or values from the dynamically generated TextBoxes. If I put the generated id from HTML directly to Ajax, then it updates the quantity. Otherwise it doesn't. I've tried to use a loop in Ajax but I think, I am getting it wrong. Please see the View.
The view:
<table border="1" width="100%" cellpadding="4">
<thead>
<tr>
<th style="text-align:center;">Name</th>
<th style="text-align:center;">Price</th>
<th style="text-align:center;">Quantity</th>
<th style="text-align:center;">Quantity To Change</th>
</tr>
</thead>
<tbody>
#if (ViewBag.CartDetails != null)
{
for (int i = 0; i < cartDetails.Count(); i++)
{
<tr>
<td style="text-align: center; display:none;">#Html.DisplayFor(model => cartDetails[i].ProductId)</td>
<td id="ID" style="text-align: center;">#Html.DisplayFor(model => cartDetails[i].ProductName)</td>
<td style="text-align: center;">#Html.DisplayFor(model => cartDetails[i].Price)</td>
<td style="text-align: center;">#Html.DisplayFor(model => cartDetails[i].Quantity, new { #class = "quantityUpdate" })</td>
<td style="text-align: center;">#Html.TextBoxFor(model => cartDetails[i].Quantity, new { #class = "quantity", data_id = cartDetails[i].ProductId } )</td>
</tr>
}
}
</tbody>
</table>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var url = '#Url.Action("UpdateCart")';
$(".quantityUpdate").change(function () {
var id = $(this).data('id');
var i = 0;
$('.quantityUpdate').each(function (i, item) {
$.post(url, { id: id, Quantity: $("#cartDetails_"+i+"__Quantity").val() }, function (response) {
if (response) {
$("#TotalPrice").load(window.location + " #TotalPrice");
}
});
})
alert(id);
alert($("#cartDetails_"+i+"__Quantity").val());
});
Here is an image sample that I am trying:
$('.quantity').change(function(){
$('.quantityUpdate').val($('.quantity').val());
// put code here
});
Instant Change
$('.quantity').keyup(function(){
$('.quantityUpdate').val($('.quantity').val());
// put code here
});
If the idea is to call ajax when you change the value in .quality textbox then this is how you should do:
$('.quantity').change(function(){
//your ajax call
});
This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 8 years ago.
I have the body of a table which is appended dynamically with ajax to the table element through a partial view in ASP.NET MVC. The partial view looks something like this...
#model IEnumerable<Plan>
#{
Layout = null;
}
#foreach (var plan in Model)
{
<tr>
<td>
#plan.Name
</td>
</tr>
}
...and appended to the table element which is static in the main View...
<table id="myPlanTable">
</table>
I am trying to register an onclick event for each of these anchor elements (there are a lot currently), using the jQuery on() function like this...
jQuery('#myPlanTable').on('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {
console.log('click');
});
...but the event refuses to fire. I've checked the DOM traversal in the browser console and it's definitely correct and returns the expected DOM set.
This selection statement worked for me....
jQuery('#myPlanTable').on('click', 'tr:gt(0) > td > a.jumpToMyPlans', function () {
console.log('click');
});
I think the problem was specifying tbody in the selector, which I guess is probably also dynamically generated, though not by me, I guess by the browser or something.
When partial view is render through ajax or jquery then to bind Jquery events use "live" as following:
jQuery('#myPlanTable').live('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {
console.log('click');
});
Try this:
jQuery('#myPlanTable').on('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {
console.log('click');
});
1) Change a.jumpToMyActionPlans to a.jumpToMyPlans
2) Add ); to close your click handler
I tested this and the click worked:
$(document).on('click', '#myPlanTable a.jumpToMyPlans' , function () {
alert('click');
});
the html i used to test it was:
<table id="myPlanTable">
<tr>
<td>
PAPA
</td>
</tr>
<tr>
<td>
Sapo
</td>
</tr>
</table>
Hope this helps you!
I have been using the code from the article ASP.NET MVC: Ajax Dialog Form Using jQuery UI and it mostly works. I created a grid that lists records and each record has a link to bring up a dialog box to edit the record. After the record has been changed the save button is pressed and the grid is updated using ajax. This works great, but the problem comes after the first record save and the ajax refresh of the grid. If the link to edit the record is clicked again the dialog box doesn't come up, only the partial view is shown. I am guessing, but it appears the partial view that I am trying to bring up again doesn't recognize the parent container. Any ideas?
Display the partial view that contains the grid:
<div id="VehicleHold">
#Html.Partial("_VehicleHold")
</div>
The partial view that makes up the dialog:
#using VehicleWeb.MVCHelpers
#{
int agreementNumber = 0;
var countData = ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>;
if (countData != null)
{
if (countData.Count() > 0)
{
agreementNumber = (int)countData.DefaultIfEmpty().First().AgreementNumber;
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
<tr class="table-header">
<th>Edit</th>
<th>Delete</th>
<th>
Type
</th>
<th>
Year
</th>
<th>
Make/Model
</th>
<th>
Plate
</th>
<th>
VIN
</th>
<th>
Num Pass
</th>
</tr>
</thead>
<tbody>
#{
foreach (var item in (ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>))
{
<tr>
<td>
#Html.ImageDialogLink("UpdateVehicleHold", "Exposure", new { id = item.RID }, "Edit Hold Vehicle", "VehicleHold", Url.Action("RefreshVehicleHold/" + agreementNumber), Html.ResolveUrl("~/pics/edit-button.png"), "Edit Hold Vehicle", "600", "800", new { style = "text-decoration:none;" }, new { style = "text-decoration:none; border-style: none;" })
</td>
<td>
<div title="Vehicle Year">#item.EditType.ToString()</div>
</td>
<td>
<div title="Vehicle Year">#item.AutoYear.ToString()</div>
</td>
<td>
<div title="Vehicle Make/Model">#item.MakeModel.ToString()</div>
</td>
<td>
<div title="Vehicle Plate Number">#item.DistVehNo.ToString()</div>
</td>
<td>
<div title="Vehicle VIN">#item.IDNumber.ToString()</div>
</td>
<td>
<div title="Number Of Passengers">#item.NumOfPassengers.ToString()</div>
</td>
</tr>
}
}
</tbody>
</table>
}
}
}
I am new at asking questions here, so just let me know if you need to see more code.
EDIT:
I don't know if it the position of the jQuery files matters for this. I have been messing around with the position today and haven't found success. I do have the jQuery file on the main form that it used to wire up the dialog box. After the AJAX refreshes the DIV, the edit link seems to loose all knowledge about the any of the parent code. My latest theory is it could be something to do with this code. Could it be because it is in a ready block?
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
// Wire up the click event of any current or future dialog links
$('.dialogLink').on('click', function () {
var element = $(this);
// Retrieve values from the HTML5 data attributes of the link
var dialogTitle = element.attr('data-dialog-title');
var dialogWidth = element.attr('data-dialog-width');
var dialogHeight = element.attr('data-dialog-height');
var updateTargetId = '#' + element.attr('data-update-target-id');
var updateUrl = element.attr('data-update-url');
// Generate a unique id for the dialog div
var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
var dialogDiv = "<div id='" + dialogId + "'></div>";
// Load the form into the dialog div
$(dialogDiv).load(this.href, function () {
$(this).dialog({
modal: true,
resizable: false,
title: dialogTitle,
closeOnEscape: false,
width: dialogWidth,
height: dialogHeight,
buttons: [
{
text: "Save",
icons: { primary: "ui-icon-check" },
click: function () {
// Manually submit the form
var form = $('form', this);
if ($(form).valid()) {
$(form).submit();
$(this).dialog('close');
}
}},
{
text: "Cancel",
icons: { primary: "ui-icon-closethick" },
click: function () {
$(this).dialog('close');
$(this).empty();
}
}]
});
// Enable client side validation
$.validator.unobtrusive.parse(this);
// Setup the ajax submit logic
wireUpForm(this, updateTargetId, updateUrl);
});
return false;
});
});
function wireUpForm(dialog, updateTargetId, updateUrl) {
$('form', dialog).submit(function () {
// Do not submit if the form
// does not pass client side validation
if (!$(this).valid()) {
return false;
}
// Client side validation passed, submit the form
// using the jQuery.ajax form
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// Check whether the post was successful
if (result.success) {
// Close the dialog
$(dialog).dialog('close');
$(dialog).empty();
// Reload the updated data in the target div
$(updateTargetId).load(updateUrl);
} else {
alert('failure');
// Reload the dialog to show model errors
$(dialog).html(result);
// Enable client side validation
$.validator.unobtrusive.parse(dialog);
// Setup the ajax submit logic
wireUpForm(dialog, updateTargetId, updateUrl);
}
}
});
return false;
});
}
It some times happens when we keep the script in the main view it will bind the event for the first time but won't work after a postback, try moving the script in the partial view, if it doesn't work share some more code and will see what is wrong
I am struggling with displaying validation messages on my webpage.
I have a javascript function which does client side validation and highlights the fields with invalid values. Besides highlighting the fields, I want to display a message on my webpage which I dont know how to do.
Here is my javascript function:
$(function () {
$("#Save").click(Validate);
});
function Validate() {
var invalidValues = [];
var validValues = [];
var Code = $("#Code").val();
var Description = $("#Description").val();
var Status = $("#Status ").val();
var requiredFields = { '#Code' : Code,
'#Description' : Description,
'#Status ' : Status };
$.each(requiredFields, function (key, value) {
if (value.length == 0) {
invalidValues.push(key);
}
else { validValues.push(key); }
});
var invalidFields = invalidValues.toString();
var validFields = validValues.toString();
if (invalidValues.length > 0){
$(invalidFields).addClass("highlighted");
$(validFields).removeClass("highlighted");
return false;
}
$(validFields).removeClass("highlighted");
}
Here is my webpage:
<div>
<table>
<tr>
<th>
Code
</th>
<td>
<input maxlength="4" id="Code" type="text"/>
</td>
</tr>
<tr>
<th>
Description
</th>
<td>
<input id="Description" type="text"/>
</td>
</tr>
<tr>
<th>
Status
</th>
<td>
<input id="Status" type="text"/>
</td>
</tr>
<tr>
<th>
</th>
<td>
<button id="Save" type="button">Save</button>
</td>
</tr>
</table>
</div>
I want to display a message at the bottom of my webpage saying "Please enter valid values for: Code". I store invalid values in a variable "invalidValues "in my js function "Validate" How can I access those values in my webpage?
I also have a few questions about what is the best way of doing validations? Client side vs server side? also, is it better to display a pop-up validation message or a highlighted message embedded on webpage?
I'm not familiar enough with MVC to answer about how to use built-in validation (like plain-old ASP.Net has), assuming that MVC has it to begin with.
That little disclaimer out of the way, the code below should validate your form for required fields and throw a message on the page for your users:
$(function () {
var Validate = function Validate(e) {
var allFieldsValid = false, // boolean flag to cache result
invalidFields = [], // array for selectors
validFields = [], // array for selectors
requiredFields = [ // array of selectors to validate against
"#Code",
"#Description",
"#Status"
],
message = $('<span />').addClass('validation-message').text('* This is a required field.');
$(requiredFields.join(', ')).each(function (i, elem) {
//requiredFields.join(', ') should return "#Code, #Description, #Status"
var field = $(elem)
value = field.val();
if (value.length === 0) {
invalidFields.push(field.selector);
} else {
validFields.push(field.selector);
}
});
allFieldsValid = invalidFields.length === 0; // if there are no invalid fields, all fields must be valid
$('span.validation-message').remove(); // remove any previous validation messages
$(validFields.join(', ')).removeClass("highlighted"); // remove class from all valid fields
// add class to all invalid fields and append message
$(invalidFields.join(', ')).addClass("highlighted").append(message.clone());
if (!allFieldsValid) {
e.preventDefault(); // invalid fields, prevent event from bubbling
}
return allFieldsValid; // return result
};
$("#Save").click(Validate);
});
As far as your other questions about validation:
What is the best way of doing validations? Client side vs server side?
also, is it better to display a pop-up validation message or a highlighted message embedded on webpage?
In order:
There is no versus. There is either server-side, or both client-side and server-side. This is because you cannot rely on your users to have JavaScript enabled and therefore you cannot rely on your client-side to run. Think of client-side like a pre-filter. The purpose of client-side is to do a "precheck" and prevent unwanted data from using up bandwidth (sending to server and the "bad data" response) and from using processing cycles on the server. Client-side will also be more responsive than server-side (because there's no request-response) but that's really only a perceived performance issue for high-latency connections. Server-side will always run and so validation should always start on the server.
This is matter of preference for your users. Personally, I wouldn't code a pop-up unless someone asked me very nicely to do so, mostly because it takes focus away from the form and requires extra work (usually one click) to dismiss. A highlighted message does not have to do either of these, and some validation routines are even nice enough to put focus on the first invalid field. If there's room on the page for it, a message next to each field is handy and can look very nice. If however, space on the page is at a premium, most validation routines will put an asterisk next to the field and have all of the individual validation messages in one spot on the page.
after your table you can keep a div without anything written in it. but with an id.
And after you validaten just access that div by document.get('div_id') and then assign value to it.
Using this you can even show validation with colors like red and others.
And showing like this is better than a popup because when a softaware comes number of cliks should be minimum.
Just add place holders for your error message in your HTML. For example:
<td>
<input id="Description" type="text"/><span id="descriptionErrorPlaceholder" />
</td>
Then in your javascript, use jQuery or regular javascript to add your warning message.
$("#descriptionErrorPlaceholder").text("Warning message");
If you're already using jQuery, you may be able to get approval to user the jQuery Validation plug-in, since it comes standard with Microsoft MVC applications now whenever you start a new project. That being said, I do recognize how hard it can be to get plug-ins approved, since I'm supporting different government clients. It looks like you could add a tag with each input element, and then modify the class for that span to show and hide it, similar to what you already do when highlighting the input box.
I can't test this on my work machine, but I would think it's something like:
$(function () {
$("#Save").click(Validate);
});
function Validate() {
var invalidValues = [];
var validValues = [];
var Code = $("#Code").val();
var Description = $("#Description").val();
var Status = $("#Status ").val();
var requiredFields = { '#Code' : Code,
'#Description' : Description,
'#Status ' : Status };
$.each(requiredFields, function (key, value) {
if (value.length == 0) {
invalidValues.push(key);
}
else { validValues.push(key); }
});
var invalidFields = invalidValues.toString();
var validFields = validValues.toString();
if (invalidValues.length > 0){
$(invalidFields).addClass("highlighted");
$(validFields).removeClass("highlighted");
$(invalidFields + "Validator").addClass("showValidation");
$(invalidFields + "Validator").removeClass("hideValidation");
return false;
}
$(validFields).removeClass("highlighted");
$(validFields + "Validator").removeClass("showValidation");
$(invalidFields + "Validator").addClass("hideValidation");
}
With the HTML
<div>
<table>
<tr>
<th>
Code
</th>
<td>
<input maxlength="4" id="Code" type="text"/><span id="CodeValidator" class="hideValidation" />
</td>
</tr>
<tr>
<th>
Description
</th>
<td>
<input id="Description" type="text"/><span id="DescriptionValidator" class="hideValidation" />
</td>
</tr>
<tr>
<th>
Status
</th>
<td>
<input id="Status" type="text"/><span id="StatusValidator" class="hideValidation" />
</td>
</tr>
<tr>
<th>
</th>
<td>
<button id="Save" type="button">Save</button>
</td>
</tr>
</table>
</div>
I am stuck in a situation, web site is running in ASP.NET 1.1
I am loading a page with some data. In the page there is a Html Table.
In each row, I am loading status(active/inactive) in one and message in another .
There is a save button when clicked it should save the status and message to database.
Since the data is in Html Table I am loosing the data while button is clicked.
I tried one option of keeping the status and message at page load in a global Javascript variable. But I will loose that also when button is clicked.
JS Code to store the data :
// To store all active or inactive feature values.
var arrType = [];
var interiorValues = [arrType];
var exteriorValues = [];
var mechanicalValues = [];
var standardValues = [];
function StoreChromeVallue()
{
var $jDecode = jQuery.noConflict();
var table = document.getElementById('dlInterior');
for (var i = 1, row; row = table.rows[i]; i++)
{
for (var j = 0, col; col = row.cells[j]; j++)
{
var imagePath = $jDecode(row.cells[0]).find('img:first').attr('src');
if(imagePath == "../icon_active1.gif")
{
arrType.push("active");
}
else if(imagePath == "../icon_deleted1.gif")
{
arrType.push("deleted");
}
else
{
arrType.push("active");
}
var featureValue = $jDecode(row.cells[1]).text();
arrType.push(featureValue);
arrType.push("Interior");
interiorValues.push(arrType);
}
}
alert(interiorValues[5][0]);
}
HTML TABLE WHERE DATA IS STORE
<TABLE id="dlInteriors" Width="300" Runat="server" CellSpacing="0" CellPadding="0">
<TR>
<TD id="interiortd" vAlign="top" width="350" runat="server"></TD>
</TR>
</TABLE>
Rows are dynamically added on page load.
Please guide me how I should go ahead on this.
You cant easily get all the values/strings in your HTML page while postback. You could able to get the form fields like input, select, etc in post back using Request.params[""].
But you could try with hidden variable (here it is your alternative Viewstate for your HTML table string values)
When & What you store / how to store /how to access in post back.
You can try the below steps for above question.
Before submit a form, fire a javascript function 'saveTableValues()'
which loops your HTML table and creates the object (var) for each row.
Prepare a javascript object array (just pushing the item in for each loop)
Convert it into JSON string and assign the whole JSON string
into Hidden Field
Do post back // just return true in JS
In code behind try accessing using Request.Params[""] or
normal way like hdnField.Text if it is server side control
In Code behing use a JavaScript Serializer
or JSON.Net to convert the JSON string into some collection.
Recommending JSON.Net here
This may help you.!
Edit:
As your website is running in 1.1 not sure those serializer dll will help you. So you try in XML format instead of JSON. Not sure JSON serializer dll is exist for 1.1 framework
Create table to run at server like this
<table id="users" runat="server">
and you will be able to access it using HtmlTable class,If required create a DataTable dynamically from the table rows and save that in a session. Have a look at http://msdn.microsoft.com/en-us/li
Use Jquery to get the rows values. Then store the data into hiddenfields. This way:
<script type="text/javascript">
function getTableValues() {
var tds = $('#dlInteriors tr td')
jQuery.each(tds, function () {
var url = $(this).children('img:first').attr('src');
var text = $(this).text();
if (url)
$('#hidValuesStatus').val($('#hidValuesStatus').val() + ',' + url);
if (text)
$('#hidValuesMessages').val($('#hidValuesMessages').val() + ',' + text);
});
}
</script>
Call the javascript function on the event "OnClientClick" of your asp:button
<TABLE id="dlInteriors" Width="300" Runat="server" CellSpacing="0" CellPadding="0">
<TR>
<TD id="interiortd" vAlign="top" width="350" runat="server"><img src="icon_active1.gif" /></TD>
<TD id="TD2" vAlign="top" width="350" runat="server">message1</TD>
</TR>
<TR>
<TD id="TD1" vAlign="top" width="350" runat="server"><img src="icon_deleted1.gif" /></TD>
<TD id="TD3" vAlign="top" width="350" runat="server">message2</TD>
</TR>
</TABLE>
<asp:Button runat="server" ID="btnSubmit" OnClientClick="javascript:getTableValues()" Text="SUBMIT" />
<input type="hidden" id="hidValuesMessages" runat="server" />
<input type="hidden" id="hidValuesStatus" runat="server"/>
And in the code behind get the data from the hidden fields:
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If IsPostBack Then
If Not IsNothing(Request.Form("hidValuesMessages")) Then
Dim str As String = Request("hidValuesMessages")
End If
If Not IsNothing(Request.Form("hidValuesStatus")) Then
Dim str2 As String = Request("hidValuesStatus")
End If
End If
End Sub
Split the string and get the final values.
Hope this helps!
Regards.