I'm attempting to change an Input label in my cshtml file by using my JS script, when any drop down selection is made. I've followed the documentation - but I'm not getting the intended result. There are no compile or runtime errors - and I have cut out anything that I didn't think was necessary for you all to see. Please let me know if I've left something out.
HTML:
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
JS:
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed')
}
I've removed the many table row tags, and the data source loads correctly as well. What I expect to happen is that when the drop down (#searchByInput) is changed, the text on the label (#entryFieldInputLabel) is changed to "Changed"
Use html selector instead of text (td has no text proprety ):
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').html('Changed');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right">1234</td>
</tr>
</table>
It would be better if you use span inside your table td
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel span').html('Changed')
}
/*
or simply
$('#searchByInput').change(function(){
$('#entryFieldInputLabel').html('Changed');
})
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right"><span>123</span></td>
</tr>
</table>
You just need to add <table> Markup so jQuery can select your <td> tag ID
<table>
<tr>
<td id=""></td>
</tr>
</table>
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange);
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr>
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
</tr>
</table>
This issue is resolved, and can be closed. The solutions offered both reaffirmed that the issue was not in the code I provided. After experimentation, the solution was found in the order in which the "change" call was made in the JS ready function.
This particular call needed to be made after the page specific HTML was loaded, but before the kendo data was bound by ID.
Related
I've got a table structure (see snippet below) and my goal is to hide a tr element once I click on the span that reads delete. I need the specific tr where that delete is contained.
I already got a listener for the click event on the last span, the one that says "delete" working.
I've got several tr elements, is it possible to hide the tr where the span is contained (and therefore, all the contents)?
$(".delete_pm").click(function () {
alert('hey');
$(this).closest( "tr" ).hide(); // tried this from answers below but no luck, as you can see here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
You can use .closest to search the parents. Provide it with tr as the selector, then simply hide it.
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>
have you try this,
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>
closest will give you the nearby parent with the matching selector.
hide will not remove the item from the DOM.If you want that also, you may chain the remove method call also.
$(".delete_pm").click(function () {
var _this=$(this);
_this.closest("tr").hide().remove();
});
Here is a working jsfiddle
I have a main textbox(Months), on the change of which, a dropdown menu is created for another textbox(Days). Once I have these populated, I save it. Now when I go back to edit it, I directly want to change the option in the Days textbox, but since the dropdown of Days is triggered on change of the textbox "Months" I do not get the dropdown of days.
The following is my code:
function editValues() {
//initializations
$('.Months').on("change", function(){
monthsValueSet = this.value;
//pass monthsValueSet to database to retrieve values
$('.Days').html("");
for(i=0;i<data.length;i++){
$('.Days').append('<option>' + data[i].days + '</option');
}
});
}
//code for Save button
//code for edit
$("#daysMonthsTable").on("click", ".edit-months", function(event){
editValues();
});
My HTML code is:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<tr>
<td>
<div class="Months">
<table>
<tbody>
<tr>
<td><label>Months</label></td>
<td ><input type="text" class="Months"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class = "Days">
<table>
<tbody>
<tr>
<td><label>Days</label></td>
<td><input type="text" class="Days"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</body>
</html>
Do following
$("#daysMonthsTable").on("click", ".edit-months", function(event){
editValues();
$('.Months').trigger("change");
});
I've table with inline create (when user click on new button it create new empty row first in the table, which he can put data inside),when user click on save I go to the controller and check if this values are valid,if yes store them on the DB.if not I raise exception to the UI and not store the data.The problem is that the new row is not stored but I see it in the UI. just when I refresh the page in the browser the line was omitted..
My question is if there is a way by code search for the first line of the table and remove it explicitly from the UI?
I try like the following but its not refresh the table,any idea?
$("table:first").find("tr:first").remove();
The following should work with a general table.
HTML
<table>
<tbody>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
</tbody>
</table>
<br />
<br />
<input type="submit" id="btnAdd" value="add"></input>
<input type="submit" id="btnRemove" value="remove"></input>
jquery
$(function () {
$("#btnAdd").click(function () {
$("table:first > tbody").prepend('<tr><td>new row</td></tr>');
});
$("#btnRemove").click(function () {
$("table:first tr:first-child").remove();
});
});
Working example: http://jsfiddle.net/5NxL4/
I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.
well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />
please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm
you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.
When a [name="tip"] has the first value, display a specific element, otherwise it would display another element.
Both elements have the display:none property. When I load the page I check the select value and fadeIn the desired element automatically.
Everything works fine except when I try to change the selected option: nothing happens. I added both javascript onchange to that item and jquery .change() and nothing happens. Can you tell me why it does not work in my example?
<form id="fm-account-properties-tab" method="POST">
<table width="300px" style="margin-top:10px;" align="center" >
<tr>
<td align="left">
<select class="easyui-combobox" name="tip" style="width:200px;" class="easyui-validatebox" required="true" onchange="changeType();">
<option value="l1">l1</option>
<option value="l2">l2</option>
<script>
$(document).ready(function(){
$('[name="tip"]').val('<?php echo $a['tip'];?>');
});
</script>
</select>
</td>
</tr>
<tr id="l1" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l1" style="width:200px;" class="easyui-validatebox" required="true">
</select>
</td>
</tr>
<tr id="l2" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l2" style="width:200px;" class="easyui-validatebox">
</select>
</td>
</tr>
</table>
</form>
<script>
function changeType()
{
if($('[name="tip"]').val()=='l1')
{
$('#l1').fadeIn();
$('#l2').hide();
}
else
{
$('#l2').fadeIn();
$('#l1').hide();
}
}
$(document).ready( function () {
changeType();
$('[name="tip"]').change(function(){ alert('1');});//it never alerts me
});
use .on for newer jQuery versions (jQuery > 1.7.x reference)
function changeType() {
if ($('[name="tip"]').val() == '___') {
$('#1').fadeIn();
$('#2').hide();
} else {
$('#2').fadeIn();
$('#1').hide();
}
}
$(document).ready(function () {
changeType();
$('select[name="tip"]').on('change', function() {
changeType();
});
});
you have a double class attribute on your select.
here is a working sample http://jsfiddle.net/tvhKH/
May be you should use js error event to figure out the error in that code. E.g, <script> try
{....all your codes here...}
catch(err)
{alert("THE ERRor" + err.message);} </script>. These code will alert your error and the exact point it occurs. Good luck!
First, you should try to add a
console.log("It works");
or a
alert("It works")
in your method so you know if it is actualy called.
Then I think the issue may come from FadeIn() only works on elements with css {display: none} and visibility different of 'hidden', so are you sure your elements are ? In doubt, you may replace
.fadeIn();
by
.css('visibility','visible').hide().fadeIn(); // hide() does the same as display: none
Then please let me know if you have more information after doing that.