get previous or next cell value of table in jquery [duplicate] - javascript

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
How i get appointment time (From time,To time) in jquery
see jsfiddle
i am selecting time slot by dragging on time slot cell.
after selecting time slot i enter name in textbox then patient appointment is allotted for that time slot.
i have to insert patient name like(abc),start time like(8:00AM 0) and end time like(8:00AM 30) in database.
how can i get these three values in jquery.

In my opinion, there is a lot of work to make the timetable look great and give a good user experience on various browsers.
Maybe you could use the jQuery full calendar ( http://arshaw.com/fullcalendar/) and customize it to fit your needs.
Here is a demo for creating time events on a single day:
http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html

With some slight html modifications such as adding a class to the time cells and some data attributes, you can take advantage of jQuery.data() and use classes to simplify locating cells
<td class="csstablelisttd time" data-hour="9" data-minute="45"> 45 </td>
When a "slot" has been booked, add a class to it that identifies it is booked. Storing the name of the patient to the time cell as data allows you to then do something like:
$('button').click(function() {
var msg = 'No Bookings',
$booked = $('.booked');
if ($booked.length) {
msg = [];
$booked.each(function() {
var data = $(this).data()
msg.push(data.hour + ':' + data.minute + ' - ' + data.patient)
})
msg = msg.join('\n');
}
alert(msg)
})
Here is a much simplifed, but working version using click event on the time cell. Your mouse selection method didn;t seem to work and a click is more user friendly. This won't complete your whole app, but should give you some ideas going forward
http://jsfiddle.net/vrW2n/27/

Use the new HTML5 time element (documentation). Then it is easy to fetch the time with jQuery.
Here is a complete example on how to fetch the first selected cell, and the last selected cell. Do the selection after the user has clicked the update button.
<!doctype html>
<html>
<head>
<script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
</script>
<script
src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js">
</script>
<script>
$(function () {
var start = $("td.csstdhighlight:first > time").attr("datetime");
var end = $("td.csstdhighlight:last > time").attr("datetime");
});
</script>
</head>
<body>
<table border="1">
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:00:00">00</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:15:00">15</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:30:00">30</time>
</td></tr>
<tr><td><time datetime="2000-01-01 08:45:00">45</time></td></tr>
</table>
</body>
</html>
Note that if you want to support Internet Explorer 8 or below you need to make sure that IE treats the new HTML5 time element as supposed to. The easiest option is to include the Modernizr library as in the sample above, or if you want the details you can read the blog post How to get HTML5 working in IE and Firefox 2.

Related

cannot INSERT getElementbyID value into SQL Table

Dear Stackoverflow members,this question might seem very trivial and honestly I search for an answer however although there are similar queries around, none of the solutions delivered seem to work on what I am trying to achieve. I will put forth a generic snippet to understand what I am trying to achieve.
var dd = addday.getDate() + xdays; //addition of days to user input date
document.getElementById("Days").value= displaydate;//loading date to Days
where displaydate is in the following format:
var displaydate = dd+'/' + mm + '/' + y; //showing date format
and value shown in real time is displayed in the following input (disabled) box:
<label><b>Expiry Date:</b></label><input type="text" name="Days2" id ="Days2" disabled>
All the above is in a form. What I want to achieve thereafter is that when the user presses submit, that value attained and displayed by the getElementById is inserted in a table.
$addquery2="INSERT INTO 3pxdef_tb(defRef,tlpID,RaisedBy,RaisedDate,defDesc,defCAT,expDate,closedBy,closedDate,acID)VALUES('$_POST[def]','$_POST[tlptsel]','$_POST[raisedby]','$_POST[draised]','$_POST[des]','$_POST[catsel]','$_POST[Days]','$_POST[clby]','$_POST[closeddate]','$acindex')";
Unfortunately this is not working since an undefined index is being returned by the system.
Can I ask your assistance in this matter?
Thanking you so much.
There are two errors or I should say mistakes in your code first
Disabled input tags cannot be posted
see this for more information
Disabled form inputs do not appear in the request
Second
Just like what Luigi D'Amico said
You're Calling "Days" as id in your JS code but in your html code you have "Days2" as an ID and Name. Rename your Days2 into Days. Your php script also uses that one.
You say:
document.getElementById("Days").value
But the html tags id is "Days2"
<input type="text" name="Days2" id ="Days2"
Let us know if this was the issue or if it was just a typo

Javascript : find first unchecked box and retrieve information from row

So I am trying to find a way to extract data from the first row where the checkbox from the first column is unchecked. I know this may sound like a true beginner question but I couldn't manage to find how to do it despite searching for quite a few hours.
Here a step-by-step of my goal to clarify :
Find the first checkbox which is unchecked;
Retrieve information from another column (inner html) but from the corresponding row and an attribute ("name") of the checkbox;
Without opening it on-screen, use the attribute of the checkbox (partial URL) to open completed URL and retrieve more information into MySQL;
Check the checkbox;
Rince and repeat
I am only looking for info concerning step one and two, the rest is there for clarification. I do not have prior experience in Javascript writing prior my last few days of Internet browsing, the only coding I've done were statistical analysis in R.
Any help would be highly appreciated.
Thank you very much!
Nikola
Well, you can use the same class for every checkbox (i.e. rowcheck):
<input type="checkbox" class="rowcheck" id="CbRow_1" name="test" value="test">
And then you loop through the checkboxes:
$(".rowcheck").each(function (index, element) {
if ($(element).prop("checked")) {
//Get the row number from ID
var rownumber = $(element).prop("id").split("_")[1];
//Now you do stuff with the other element
$("#element_" + rownumber).html("whatever")
}
});

Select multiple items with javascript / asp.net

This is what I have so far I have a view that displays date that I have not reported a time for.
My idea is to tick the dates I want to report a time, so I can report time for multiple dates, and if I did check a date I do not want to report for I just uncheck that box.
I have that working, (kinda) The problem is if i want to select a date, i'll always have to select the first in the list before I can check any other date.
Like this:
That works great as long as I always choose the first date in the list.
But that is not what I am looking for, I want the option so I can report any data without having to check the first date first.
This would not work because I did not check the first date:
This is my script:
var dateArr=new Array();
function SetDate(dt) {
if(document.getElementById("isoDate").checked) {
if(dateArr.indexOf(dt)<0){ //Check if date is already added. if not add it to array.
dateArr.push(dt);
}
else{
var index=dateArr.indexOf(dt);
if (index > -1) {
dateArr.splice(index, 1);//Remove from array if checkbox uncheck
}
}
$('#date').val(dateArr.join(" ")); //Add space separated string to the #date element.
}
}
And this is my view where I get the dates:
#foreach (var date in ViewBag.MissingDays)
{
var isoDate = date.ToString("yyMMdd");
<div class="col-md-1">
<input type="checkbox" id="isoDate" name="isoDate" value="#isoDate"onclick="javascript:SetDate('#isoDate');" />
#isoDate
</div>
}
There are some observations regarding your code, like is not a good practice to have multiple items with the same id(i could actualy say that is a bad practice, i am talking about the checkboxes, the same name should be enough) or lines like:
if(document.getElementById("isoDate").checked)
that ruins everything(this i think it is the real source of your problem since the result is the first element and not being checked will step to else)
Seeing that you use jquery, here you have a small sample of how this should look like.

How to filter rows in database

I have a small line of code here...
if(todaysDate!==date_encoded_time){
str +='<div id='div_label'>'+recipe_arr[x].recipe_name+''+'</div>';
}else {
str +='<div id='div_label'>'+recipe_arr[x].recipe_name+'NEW ITEM'+'</div>';
}
for todaysDate, I'm getting the value of current date or the date today and for the date_encoded_time, it's the date that was stored in a database. What I'm trying to do here is when todaysDate matched date_encoded_time, it will show on the app 'NEW ITEM'; but every item says 'NEW ITEM', so how can I select a specific row or display a specific item that will tell the user that it's new, using JS and not PHP..? By the way it's already connected to the database wherein I used AJAX, but I just need to get the latest record that was added on the database.
Any thoughts? Anyone?
Thanks!
Try embeding a specific class on each elements and catch up them using jQuery.
I assume the code below is PHP code.
if (todaysDate!==date_encoded_time){
str +='<div id='div_label'>'+recipe_arr[x].recipe_name+''+'</div>';
}else {
str +='<div id='div_label' class="theClass">'+recipe_arr[x].recipe_name'</div>';
}
Then pick up and manipulate them by jQuery like this.
<script type="javascript">
$(".theClass").ready(function(){
// Manipulation as you would like.
$(this).html("NEW ITEM");
});
</script>
I didn't check that code but hope this will help you.

Javascript, Jquery, Cross browser issues, Frustration

I am a predominantly PHP developer. I realize in this day and age specialization in one scripting language doesn't cut it, but the fact remains that my skills at JavaScript and jQuery are pretty green. I am a novice at best. I can create my own code but Cross Browser compatibility remains a huge issue with my work in JavaScript.
Anyway, I have a script that filters products according to categories/subcategories. This is how it works: you select a category and the javascript in the background does its thing to filter the subcategories so that the options displayed are the ones pertaining to the parent category- a combination of these two filters the product line.
Here is my code:
function scategories(){
//get the category option value from the category drop down bar
var cat = (document.getElementById('categories').value);
//get all the options from the subcategory drop down bar
var subcat = document.getElementsByClassName('subcategories');
var n=0;
//if the category bar option is set to 0 display everything
if(Number(cat)==0){
Show();
}
//filter the subcategories
while(subcat.item(n)){
//if there is no match b/w the subcategories option and the categories id FILTER
if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="none";
}else{
//else display the subcategory
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="list-item";
}
n++;
}
}
This code is pretty self explanatory I would say. I also have a shiftfocus function that shifts the focus from the current option selected in the subcategory to the default one which is 'none' whenever a new category is picked. This basically resets the subcategory.. here's the code:
function shiftfocus(){
document.getElementsByClassName('subcategories')
.item(0)
.removeAttribute("selected");
document.getElementsByClassName('subcategories')
.item(0)
.setAttribute("selected","selected");
}
Shiftfocus is called onChange and scategories is called onClick.
Problem 1:
1) Firefox: Shiftfocus doesn't shift the focus to the default option even though I can see it adds the 'selected' attribute.
2) Safari: Does not work at all.
EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was
creating havoc in IE. Should have double checked before bothering you
guys. Sorry. Problem 1 still persists.
Problem 2:
I understand none of us developers particularly like internet explorer. But I am willing to believe I have made a mistake here. I have some jQuery that fetches data from a script in another file via the native POST function and appends it to a table with the id "content". This works fine on every browser, except IE. If I try going back to IE 7,8 compatibility mode the results are a little better (the data shows up broken in pieces though) and in IE9 compatibility mode nothing is appended at all! Here's the code:
$.post("bagcontents.php", {
"Bid": $(this).attr('bid')
},
function(data){
$("#content").empty().append(data);
roundNumber();
$('#processorder_hidden').attr('value',currentBid);
});
//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
<form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
<table id="content">
</table>
<input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />
</form>
</div>
Any help will be appreciated. I tried outputting the fetched results with alert, alert(data), and the script is fetching everything just fine. Its the just the append part that fails :|
Here are some suggestions and hope you find them somewhat useful.
Problem: 1
Instead of having the shiftfocus() set the to a specific value, have you tried using .val('') just to clear it out. I can imagine that this will default to the first option.
Problem: 2
This will be hard to debug without knowing what data is coming back from the server. Might be bad formatting or some syntax error on the rendered output.

Categories

Resources