Displaying a class name - javascript

Hi guys i have a Javascript code here which creates HTML buttons onload with the buttons attributes being fetched from the database through an ASP page. Now i want to display these attributes, i can display the id, type and value but the class shows as undefined. i went to the page on the browser and inspected the element and the class is shown, but not on the alert box. Please help...
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input'
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\''+ onClick + '\'':'')
+ '>';
}
function DisplayButtons(cableData) {
var newContent = '';
$.each(cableData, function (i, item) {
newContent += createButtons(
item.CommonCable,
"unclickedButton",
"submit",
item.CommonCable,
'alert(this.id + " " + this.class + " "+"clicked")'
);
});
$('#Categories').html(newContent);
}

change this.class to this.className..

When you get to the alert parameter, pass in this:
'alert(this.id + " " +' + $(this).attr(class) + ' + " "+"clicked")'
You can use jQuery to get the class name.

Related

How we can use IS NULL in query

In this case i want to null check by using column IS NULL..here column specify uniquename.
Uniquename is a integer column.
filterExpression = objColumnSettings.UniqueName + ' <> ' + objColumnSettings.FilterValue + ' AND ';
Here i have done like this.
This works but i want to use column IS NULL rather than ISNULL(column, value)
filterExpression = " ISNULL( " + objColumnSettings.UniqueName + " , 0 ) " + ' <> ' + objColumnSettings.FilterValue + ' AND ';
Please suggest
Thanks in advance;
should be
filterExpression = objColumnSettings.UniqueName + " IS NUL OR " + objColumnSettings.UniqueName + ' <> ' + objColumnSettings.FilterValue + ' AND ';

Adding field in view ASP.NET MVC

I working on one application, and I started learning ASP.NET so I am begginer and I am trying to add one field in view.
So, I have Firstname,Address, ZIP, State etc and I want for every medical provider add his|her speciality. I create a table and make connection beatween two table.
When I add SPeciality, it doesnt show up in view. I have no idea where I made mistake.
https://i.imgur.com/YBc5dVZ.jpg
https://i.imgur.com/m0haaIW.jpg
https://i.imgur.com/mAvjNLc.jpg
var id = $(this).attr('data-id');
$.getJSON("/NfDocuments/MedicalInput", { id: id },
function (data) {
$('#medInput').empty();
$.each(data, function () {
// $("#medInput").append("'" + this.Id + "'");
//console.log(this.Id);
var medInput = document.getElementById("medInput");
medInput.value = this.Firstname + ' - ' + this.Zip + ' ' + this.Address1 + ',' + this.City + ', ' + this.State + ' - ' + this.Mobile;
});
});
Any suggestion, comment ?
medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile;
You need to append this.SpecialityName (or whatever you have it named as when returned to the view) to medInput.Value:
medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile + ' - '
+ this.SpecialityName;
I'm assuming the id of each speciality is this.TypeId and that you have already mapped TypeId to some kind of SpecialityName before sending the object back to the view.

jQchart multiple information with title of the graph

I am using jQchart to display a graph. However, the title property seems to display only a single line of text. Currently, the graph displays the following title:
text: chartTypeText + ': ' + chartTitle + ", " + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ' ' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
However, I basically need to display each variable on a different line (hopefully use linebreaks to separate each piece of information). I tried using "" but it displays the string literal.
Is there any way I could display each variable under the title of the graph with different fonts etc?
If you are looking for series title customization, it can be customized with tooltipFormat event.
[Use some separator(I use ; as a separator) and format with html, css]
In below statement, I changed separator to ;
text: chartTypeText + ': ' + chartTitle + ";" + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ';' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
<script lang="javascript" type="text/javascript">
$(function () {
$('#ChartClientID').bind('tooltipFormat', function (e, data) {
var t=data.series.title.split(";");
//OR here you can dynamically build here it self
return "<b>" + t[0] + "</b><br />"
+ (t[1] || "") + "<br />"
+ (t[2] || "");
});
});
</script>
see this link for reference: http://www.jqchart.com/aspnet/chart/ChartFeatures/Tooltips

How to can i display a value of a selected button?

The following code creates a Buttons, with CSS when one of the button is clicked it changes color, each button created has its own value.
So i want to display a VALUE of a selected button if clicked on my HTML page how can manage that?
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input '
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\'toggle(this);' + onClick + '\'' : '')
+ '>';
}
function toggle(ths) {
$(ths).toggleClass("btnColor");
$("#tb").toggleClass("btnColorR");
}
function DisplayButtons(cableData) {
var newContent = '';
$.each(cableData,
function (i, item) {
newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable,toggle);
});
$("#Categories").html(newContent);
}
$(ths).val() or $(ths).attr('val') will get you the value.
Demo

How to change background -color when toggle button clicked?

I need help :
i've got a problem when clicking any toggle button i want it to change background-color and when clicked again it must return to original background-color .
your help will be highly appreciated.
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input '
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\'' + onClick + '\'' : '')
+ '>';
}
function DisplayButtons(cableData) {
var newContent = '';
$.each(cableData,
function (i, item) {
function toggle() {
$(this).clicked ? $("#tb").addClass("btnColor") : $(this).removeClass("btnColor");
$("#tb").toggleClass("btnColorR");
}
newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable,
' alert("clicked")');
});
$("#Categories").html(newContent);
}
You'll need a click event listener on your button. Whenever the button is clicked, the toggleClass() will switch between the class normal and active, each containing a different background color.
Based on your comments, it appears you're creating these buttons dynamically from values in a database, so you won't know the id of the button beforehand. For this situation, instead of creating a click event listener for a specific button (referencing the id), create the event for all buttons on your page $('input[type=button]').click(function () {....
HTML:
<!--
These buttons were generated dynamically from values stored in a database
I won't know their ids
-->
<input type="button" name="btn_1_from_db" value="Toggle Color1" />
<input type="button" name="btn_2_from_db" value="Toggle Color2" />
<input type="button" name="btn_3_from_db" value="Toggle Color3" />
<input type="button" name="btn_4_from_db" value="Toggle Color4" />
<div id="target" class="normal">
My color will change
</div>
CSS
.normal {
background-color: green;
}
.active {
background-color: red;
}
Javascript:
$(document).ready(function () {
// If any button is clicked, toggle its assigned class (changes the color)
$('input[type=button]').click(function () {
$('#target').toggleClass('active');
});
});
Example: http://jsfiddle.net/EkAAh/
Try your code like
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input '
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\'toggle(this);' + onClick + '\'' : '')
+ '>';
}
function toggle(ths) {
$(ths).toggleClass("btnColor");
$("#tb").toggleClass("btnColorR");
}
function DisplayButtons(cableData) {
var newContent = '';
$.each(cableData,
function (i, item) {
newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable,
' alert("clicked")');
});
$("#Categories").html(newContent);
}

Categories

Resources