Dropdown remains empty -populating with json data - asp.net

Hi im populating dropdown on change event of another dropdown from sql server using json data,
I got json data when i checked in firefox
but still my dropdown remains empty
Could somebody please help me what im doing wrong here
here is my code
function OnCathwordPopulated(response) {
var xx = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$("#<%=ddlCatchword.ClientID %>").removeAttr("disabled");
$("#<%=ddlCatchword.ClientID %>").children().remove();
$("#<%=ddlCatchword.ClientID %>").empty().append("<option selected='selected' value='0'>Please select</option>");
var listItems = "";
for (var i = 0; i < xx.length; i++) {
var val1 = xx[i];
var text1 = xx[i];
listItems += "<option value='" + val1+ "'>" + text1 + "</option>";
} $("#<%=ddlCatchword.ClientID%>").html(listItems);
}
I used another method also
here is
$("#<%=ddlCatchword.ClientID%>").append($("<option></option>").val(val1).text(text));

I have tried this method to test out data
var h = ' <select name="test" id="ss" class="country" data-native-menu="false">';
h = h + listItems;
var w = window.open(); $(w.document.body).html(h);
And it opens new dropdwon with all json data in new window..
I dont know what strange thing is wrong ...
please note im using jquery mobile using asp.net

Modded the code to remove properly. I'm assuming this is selecting the correct list based off the code above. Also, a fiddle for example: http://jsfiddle.net/Tkt2B/
$("#<%=ddlCatchword.ClientID %>").removeAttr("disabled");
$("#<%=ddlCatchword.ClientID %>").find("option").remove().end()
$("#<%=ddlCatchword.ClientID %>").append("<option selected='selected' value='0'>Please select</option>");
var listItems = "";
for (var i = 0; i < xx.length; i++) {
var val1 = xx[i];
var text1 = xx[i];
listItems += "<option value='" + val1+ "'>" + text1 + "</option>";
}
$("#<%=ddlCatchword.ClientID%>").append(listItems);

it solved by using following trick,
$("#<%=ddlCatchword.ClientID%>").html(listItems); $("#<%=ddlCatchword.ClientID%>").selectmenu('refresh', true);
Got it working with the help from http://ozkary.blogspot.no/2010/12/jquery-mobile-select-controls-populated.html
Thanks!

Related

Disable the NavGrid buttons in JQGrid when grid is empty

I want to Disable the NavGrid buttons in JQGrid when grid is empty.
I am using the following code, but buttons are not getting disabled.
var rowCount = jQuery('#gridID').jqGrid('getGridParam', 'reccount');
if (rowCount == 0) {
$("view_" + "#gridID").addClass('ui-state-disabled');
$("refresh_" + "#gridID").addClass('ui-state-disabled');
}
Any help on this is highly appreciated.
I have resolved the above issue. See my below code:
var rowCount = jQuery('#gridID').jqGrid('getGridParam', 'reccount');
if (rowCount == 0) {
var grid = $("#gridID"),
gid = $.jgrid.jqID(grid[0].id);
var $viewBtn = $('#view_' + gid);
$viewBtn.addClass("ui-state-disabled");
var $refreshBtn = $('#refresh_' + gid);
$refreshBtn.addClass("ui-state-disabled");
}

DevExpress ASPxComboBox Items Color Change from Code Behind

I have a ASPxComboBox for which I'm binding data based on 2 conditions.
Now,I need to show Color for items in combobox based on condition.
My Code :
var dataMainBranchUsers = (from xx in VDC.SURVEY_USER_DETAILS
where xx.BRANCH_ID == 1 && (xx.USER_LEVEL == 2 || xx.USER_LEVEL == 5)
select new
{
xx.USER_NAME,
xx.USER_ID,
xx.USER_LEVEL
}).ToList();
DataTable dtMainBranchUsers = LINQToDataTable(dataMainBranchUsers);
for (int i = 0; i < dtMainBranchUsers.Rows.Count; i++)
{
string strlevel = dtMainBranchUsers.Rows[i]["USER_LEVEL"].ToString();
string struser = dtMainBranchUsers.Rows[i]["USER_NAME"].ToString();
if (strlevel == "2")
{
dtMainBranchUsers.Rows[i]["USER_NAME"] = struser + " - Admin";
}
else
{
dtMainBranchUsers.Rows[i]["USER_NAME"] = struser + " - Survey User";
}
}
Cmb_UserName.TextField = "USER_NAME";
Cmb_UserName.ValueField = "USER_ID";
Cmb_UserName.DataSource = dtMainBranchUsers;
Cmb_UserName.DataBind();
Now, I need to differentiate based on USER_LEVEL and show colors.
Is this possible?
From DevExpress
I'm afraid, the ASPxListBox (which is the part of the ASPxComboBox) doesn't allow to set specific color for each item.
I suggest you to use the ASPxDropDownEdit. This control allows to put anything in its DropDownWindowTemplateContainer.
For example, you can put the ASPxGridView and set color for each row using the HtmlRowPrepared event handler.
See here.

I have generated the random number using below code in Selenium RC, but it is not working in Webdriver

For random number generation in Selenium RC, I have the code but it is not working properly in Webdriver. If I use the below code in webdriver, it is returning null. Please find the code below in webdriver
String Randnum = (String) ((JavascriptExecutor) driver).executeScript("var d=new Date().getFullYear()+new Date().getDate().toString()" +
"+new Date().getDay()" +
"+new Date().getHours()" +
"+new Date().getMinutes()" +
"+new Date().getSeconds()" +
"+new Date().getMilliseconds()");
Please help me out on this... Help will be appreciated.
Why can't you try the same thing using Java?
Calendar currentDate = Calendar.getInstance();
SimpleDateFormat formatter= new SimpleDateFormat("MM_dd_yyyy_hh_mm_ss");
String randomName = formatter.format(currentDate.getTime());
You are missing the return statement. Without, the javascript will run but not return anything.
String Randnum = (String) ((JavascriptExecutor) driver).executeScript("return new Date().getFullYear() + new Date().getDate().toString() + new Date().getDay() + new Date().getHours() + new Date().getMinutes() + new Date().getSeconds() + new Date().getMilliseconds()");
the javascript code below
function displayRandum()
{
var d = new Date().getFullYear()+new Date().getDate().toString() + new Date().getDay() + new Date().getHours()+new Date().getMinutes() + new Date().getSeconds()+new Date().getMilliseconds();
alert(d);
}
works perfectly. Can you try in your Selenium code, to keep everything in one line (no extra "+" and " characters).
Edit: (missed return statement. Saw Arran's reply and realized it).
function returnRandum()
{
var d = new Date().getFullYear()+new Date().getDate().toString() + new Date().getDay() + new Date().getHours()+new Date().getMinutes() + new Date().getSeconds()+new Date().getMilliseconds();
return d;
}

Change color of past events in Fullcalendar

I'm trying to implement this solution to "grey out" past events in Fullcalendar, but I'm not having any luck. I'm not too well versed in Javascript, though, so I assume I'm making some dumb mistakes.
I've been putting the suggested code into fullcalendar.js, inside the call for daySegHTML(segs) around line 4587.
I added the first two lines at the end of the function's initial var list (Why not, I figured)—so something like this:
...
var leftCol;
var rightCol;
var left;
var right;
var skinCss;
var hoy = new Date;// get today's date
hoy = parseInt((hoy.getTime()) / 1000); //get today date in unix
var html = '';
...
Then, just below, I added the other two lines inside the loop:
for (i=0; i<segCnt; i++) {
seg = segs[i];
event = seg.event;
classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
if (isEventDraggable(event)) {
classes.push('fc-event-draggable');
}
unixevent = parseInt((event.end.getTime()) / 1000); //event date in Unix
if (unixevent < hoy) {classes.push('fc-past');} //add class if event is old
if (rtl) {
if (seg.isStart) {
classes.push('fc-corner-right');
}
...
Running this code results in a rendered calendar with no events displayed and an error message: Uncaught TypeError: Cannot call method 'getTime' of null
The "null" being referred to is, apparently, event.end.getTime(). But I'm not sure I understand what exactly is going wrong, or how things are being executed. As written, it seems like it should work. At this point in the code, from what I can tell, event.end contains a valid IETF timecode, but for some reason it's "not there" when I try to run it through getTime()?
This isn't a mission-critical tweak for me, but would still be nice—and I'd like to understand what's going on and what I'm doing wrong, as well! Any help greatly appreciated!
If you are using FullCalendar2 with Google Calendar, you will need to use the version of the code below. This uses Moment.js to do some conversions, but since FC2 requires it, you'll be using it already.
eventRender: function(event, element, view) {
var ntoday = new Date().getTime();
var eventEnd = moment( event.end ).valueOf();
var eventStart = moment( event.start ).valueOf();
if (!event.end){
if (eventStart < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
} else {
if (eventEnd < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
}
}
As per FullCalendar v1.6.4
Style past events in css:
.fc-past{background-color:red;}
Style future events in css:
.fc-future{background-color:red;}
There's no need to fiddle with fullcalendar.js. Just add a callback, like:
eventRender: function(calev, elt, view) {
if (calev.end.getTime() < sometime())
elt.addClass("greyclass");
},
you just have to define the correct CSS for .greyclass.
Every event has an ID associated with it. It is a good idea to maintain your own meta information on all events based on their ids. If you are getting the events popupated from a backend database, add a field to your table. What has worked best for me is to rely on callbacks only to get the event ids and then set/reset attributes fetched from my own data store. Just to give you some perspective, I am pasting below a section of my code snippet. The key is to target the EventDAO class for all your needs.
public class EventDAO
{
//change the connection string as per your database connection.
//private static string connectionString = "Data Source=ASHIT\\SQLEXPRESS;Initial Catalog=amit;Integrated Security=True";
//this method retrieves all events within range start-end
public static List<CalendarEvent> getEvents(DateTime start, DateTime end, long nParlorID)
{
List<CalendarEvent> events = new List<CalendarEvent>();
// your data access class instance
clsAppointments objAppts = new clsAppointments();
DataTable dt = objAppts.SelectAll( start, end);
for(int i=0; i<dt.Rows.Count; ++i)
{
CalendarEvent cevent = new CalendarEvent();
cevent.id = (int)Convert.ToInt64(dt.Rows[i]["ID"]);
.....
Int32 apptDuration = objAppts.GetDuration(); // minutes
string staffName = objAppts.GetStaffName();
string eventDesc = objAppts.GetServiceName();
cevent.title = eventDesc + ":" + staffName;
cevent.description = "Staff name: " + staffName + ", Description: " + eventDesc;
cevent.start = (DateTime)dt.Rows[i]["AppointmentDate"];
cevent.end = (DateTime) cevent.start.AddMinutes(apptDuration);
// set appropriate classNames based on whatever parameters you have.
if (cevent.start < DateTime.Now)
{
cevent.className = "pastEventsClass";
}
.....
events.Add(cevent);
}
}
}
The high level steps are as follows:
Add a property to your cevent class. Call it className or anything else you desire.
Fill it out in EventDAO class while getting all events. Use database or any other local store you maintain to get the meta information.
In your jsonresponse.ashx, retrieve the className and add it to the event returned.
Example snippet from jsonresponse.ashx:
return "{" +
"id: '" + cevent.id + "'," +
"title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
"start: " + ConvertToTimestamp(cevent.start).ToString() + "," +
"end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
"allDay:" + allDay + "," +
"className: '" + cevent.className + "'," +
"description: '" +
HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" + "},";
Adapted from #MaxD The below code is what i used for colouring past events grey.
JS for fullcalendar pulling in Json
events: '/json-feed.php',
eventRender: function(event,element,view) {
if (event.end < new Date().getTime())
element.addClass("past-event");
},
other options ....
'event.end' in my Json is a full date time '2017-10-10 10:00:00'
CSS
.past-event.fc-event, .past-event .fc-event-dot {
background: #a7a7a7;
border-color: #848484
}
eventDataTransform = (eventData) => {
let newDate = new Date();
if(new Date(newDate.setHours(0, 0, 0, 0)).getTime() > eventData.start.getTime()){
eventData.color = "grey";
}else{
eventData.color = "blue";
}
return eventData;
}
//color will change background color of event
//textColor to change the text color
Adapted from #Jeff original answer just simply check to see if an end date exists, if it does use it otherwise use the start date. There is an allDay key (true/false) but non allDay events can still be created without an end date so it will still throw an null error. Below code has worked for me.
eventRender: function(calev, elt, view) {
var ntoday = new Date().getTime();
if (!calev.end){
if (calev.start.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
} else {
if (calev.end.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
}
}
Ok, so here's what I've got now, that's working (kind of):
eventRender: function(calev, elt, view) {
var ntoday = new Date();
if (calev.start.getTime() < ntoday.getTime()){
elt.addClass("past");
elt.children().addClass("past");
}
}
In my stylesheet, I found I needed to restyle the outer and inner elements to change the color; thus the elt.children().addclass addition.
The only time check I could get to work, lacking an end time for all day events, was to look at the start time - but this is going to cause problems with multi-day events, obviously.
Is there another possible solution?

How correctly assign value to field

I am trying to assign value for one edit field(not asp.net control) in asp.net application using JavaScript code. It seems that < character in value string gives problems for ASP.NET. If I remove < and > characters from value everything works fine.
Where is the problem? How to pass <> characters to the field? I don't want to use ServerSide code I want to do it on ClientSide using JS and HTML Edit box.
function loadShareBox(pageTitle) {
document.getElementById("shareHTML").value = '<a href="' + document.location.href + '" target=_blank>' + pageTitle + '</a>';
}
regards,
Tomas
try using these
< corresponds <
> corresponds >
the code would look like this
function loadShareBox(pageTitle) {
document.getElementById("shareHTML").value = '<a href="' + document.location.href + '" target=_blank>' + pageTitle + '</a>';
}
edit: ah, I think there is another problem. You are trying to insert a new element within another element. So you should create a new element and append in shareHTML.
var myLink = document.createElement("a");
myLink.setAttribute("href", "mylink");
var text = document.createTextNode("Link name");
myLink.appendChild(text);
var myElement = document.getElementById("shareHTML")
myElement.appendChild(myLink);
this should do the work

Resources