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
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 ';
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.
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
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
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);
}