i have a page which generate check boxes dynamically and i have
the following event which fires every time a user click on any of the check boxes
$(':checkbox').click(function() {
});
My question is how can i get the text of the check box that has been trigger by the user?
Thank you
Taking #CliffC query and changing it, This should work. Its an explicit query so you will always get the correct label
$(':checkbox').click(function() {
alert( $(this).parent().find("label[for=" + this.id +"]").text());
});
found the solution
$(':checkbox').click(function() {
alert( $(this).parent().find("label").text());
});
Related
I have two TextBoxes, and I want to prevent the user from editing one of it while the other is not empty in real time. How could I do that ?
You can add a text changed event on the textbox that needs a input firts. Then in you C# side you can do a check in that event to see:
If(string.IsNullOrEmpty(txtbox.Text))
{
txtbox2.Enabled = false
}
else
{
txtbox2.Enabled = true;
}
Hope that helps
The interaction you're describing is on the client, not the server, so you'll need to write some javascript to make that happen.
Add this to the bottom of your aspx page. Depending on the id schema you're solution is using, you may need to inspect the Id's of the textareas in your browser to get their actual DOM element Id's. (note - haven't tested the code, but you get the idea)
<script>
var elDisabledTxtBx = document.getElementById("Your_Disabled_Textbox_ID");
var elTxtbxThatAcceptsInput = document.getElementById("ID_of_textbox_user_types_into");
$(elTxtbxThatAcceptsInput).on("keyup", function(el, $e){
if ( this.value.trim() === "" ){
elDisabledTxtBx.disabled = false;
}
});
</script>
from the last version update (from openui5 1.36.12 to openui5 1.38.4) the following code is not working anymore:
var myTable = new sap.ui.table.Table();
myTable ._oVSb.attachScroll(function() {
colorTheTableRows();
})
I'm using the "attachScroll" event in order to color the table rows with a specific logic.
Since last openui5 version update I get this error in console:
Uncaught TypeError: Cannot read property 'attachScroll' of undefined
I've tried to debug the problem and it seems that the object _oVSb has be removed from sap.ui.table.Table.
My final goal is to paint the rows with different colors based on the content ... is there any other way to reach this feature?
Thanks
Even i want this event some how came to this thread. i tried #Dopedev solution it was not working then i changed bit in that as below
$("#<tablid>-vsb").scroll(function() {
console.log("Table is scrolled")
});
instead of getting the tbody get the table-id-vsb and attach the scroll function
You can still get scroll event for your table using .scroll() of jQuery.
onAfterRendering: function(){
//Register handler for scroll event
$("tbody").scroll(function(){
// your stuff
});
}
Demo
I know that one of the earlier posts was already marked as the 'right' answer, but it did not work for me, so I thought I would post my working solution, as it might be helpful to others. The following code will work to effectively 'attach' to the vertical scroll event of a table in 1.38:
onAfterRendering: function() {
if (this.firstTime) { //You only want to override this once
var oTable = this.getView().byId("<YOUR_ID_HERE>");
//Get a reference to whatever your custom handler is
var oHandler = this.handleScroll;
//Store a reference to the default handler method
var oVScroll = oTable.onvscroll;
oTable.origVScrollHandler = oVScroll;
oTable.onvscroll = function(i) {
//Call the 'default' UI5 handler
oTable.origVScrollHandler(i);
//Call your handler function, or whatever else you want to do
oHandler();
};
this.firstTime = false;
}
},
var myTable = new sap.ui.table.Table("myTable");
After rendering:
sap.ui.getCore().byId("myTable-vsb").attachScroll(function() {
colorTheTableRows();
})
i have a web form that asks for the mobile number and id, if the id or mobile are incorrect. the web page will display an error label, after this error label if i entered a correct information this form will be not visible anymore and a new div will be visible with another display. so here the problem is when the customer enters the new info after a wrong info, if he clicks back the label is still appearing and text box 2, i have set these elements to:
lblfailedresponce.Text = "" // 1rsst text box
txtMobilePhone.Text = "" //2nd text box
TransactionID.Text = "" // label
but it didn't work and they still appear. so what is the code in the submit button that i have to do to clear the cache or the fields from the invisible form?
Use the following code
txtMobilePhone.Text = String.Empty;
lblfailedresponce.Text = String.Empty;
<script>
$(document).ready(function() {
// clear error label if the user clicks on the text box.
$('#txtMobilePhone').click(function(){
if('#lblfailedresponce').val()!=null)
{
$('#lblfailedresponce').val()='';
}
$('#txtMobilePhone').val()='';
$('#TransactionID').val()='';
});
$('#TransactionID').click(function(){
if('#lblfailedresponce').val()!=null)
{
$('#lblfailedresponce').val()='';
}
$('#txtMobilePhone').val()='';
$('#TransactionID').val()='';
});
});
</script>
This is a script that will serve the purpose. Kindly use this at the page bottom and see how it works.Hope this will help you.
I assume the element Id of the text boxes and its name are same. Kindly change it if its otherwise.
If it is a caching issue then you could add Response.Cache.SetCacheability(HttpCacheability.NoCache) to your page load. That will make it so the browser will not cache the page.
Another option is that you could set your error label to visible=false and then make it visible in the code that checks your error. But then the next load after that the error label will not show as visible.
I'm trying to prevent the user from clicking on more than one postback-causing element on the page. In other words, if they click the 'continue' submit button, they shouldn't be able to cause another postback before the original request comes back.
I've had a go with two versions of jQuery code. Neither does exactly what I want:
This version will disable all the postback elements, but in doing so, it stops the clicked element from firing. For the record, I don't think the .removeAttr('onclick') is really required, but leaving it out doesn't seem to change the behaviour.
$(function() {
$('a, :button, :submit').click(function() {
var elements = $('a, :button, :submit');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
This version disables all other postback elements, but it lets me reuse the same element that was clicked - I don't want to be able to hit the same button twice.
$(function() {
$('a, :button, :submit').click(function() {
var otherelements = $('a:not(#' + $(this).attr('id') + '), :button:not(#' + $(this).attr('id') + '), :submit:not(#' + $(this).attr('id') + ')');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
How can I prevent this behaviour?
I just tested your first approach without JQuery, and it worked fine, i.e. disabling the submit button didn't prevent the form submission.
<form method="get">
<input type="text" name="textfield" value="a" />
<input type="submit" onclick="this.disabled=true">
</form>
Maybe you want to double check is there is anything else, e.g. JQuery, going on?
Maybe you could put a flag or something that it could remember what button it was clicked and if that flag exist, you can remove the onclick event on that postback-causing element. But I think this cannot be done in client side scripting alone, since once the page is submitted, all client side elements and scripts are refreshed.
Perhaps instead of making this a click function make it onmouseup so it fires after the click event has occured.
Here's a final version that worked - just overriding the form submit event rather than looking at any individual elements.
var submitted = false;
$(function() {
$('form').bind('submit', function() {
if (!submitted) {
submitted = true;
return true;
} else {
return false;
}
});
});
Thanks all for your suggestions.
Scenario: I have an .aspx page containing multiple collapsible panels. Each panel represents a different report. To run a report, you click a panel and the report's user controls will appear. The date range control I created could be contained "within" more than one panel.
The code below does not work in the multiple panels instance. It sets all of the "to date" text boxes equal to the start date instead of just the active panel's "to date" text box.
How do I only work with the text boxes in the panel I have expanded?
Thanks for your help!
<script type="text/javascript">
$(document).ready(function(){
$('#dFrom').datepicker();
$('#dTo').datepicker();
$('#dTo').click(function(){
try{
var from = $('#dFrom').datepicker("getDate");
$('#dTo').datepicker("setDate",from);
}
catch(Error)
{
alert(Error);
}
});
});
Firstly, you shouldn't be using IDs for any html element that exists more than once, use classes to identify repeating elements instead.
To answer your question, you need to use $(this) to point at the specific element the click event is coming from. You can then simply query the date picker the event is called from by asking for its sibling.
$(document).ready(function(){
$('.dTo').click(function(){
var from = $(this).siblings('.dFrom').datepicker("getDate");
$(this).datepicker("setDate",from);
});
});
I don't know your actual HTML structure so you may have to alter how the siblings are discovered, but hopefully you get the idea.
You need to get a little more relative with your selector syntax. I see you're using the id of each field -- is this shortened from the ASP.Net UniqueID? Because that's definitely not how it would look.
Rather than manually lookup the id, let ASP.Net make of it what it will and find them the jQuery way:
$(Function() {
$('input[id$=dFrom]').datepicker();
$('input[id$=dTo]').datepicker();
$('.panel').each(function() { //replace with appropriate selector syntax for your panels
$(this).click(function() {
var from = $('input[id$=dFrom]',this).datepicker("getDate");
$('input[id$=dTo]',this).datepicker("setDate",from);
});
});
});