3

At the bottom of the jsfiddle here, I have this HTML:

<input type="text" id="BLAboxPaymentAmount" value="2">
</br>
<input type="text" id="BLAboxSection5Total" value="3">

..and this jQuery:

$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
    var totalvalue = $(this).val();
    //alert("boxSection5Total val is " + totalvalue);
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    //alert("Payment Total val is " + paymenttotalvalue);
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
    } else {
        alert("values ARE equal");
    }
});

It works fine in the jsfiddle, but the event is not firing in my Sharepoint page - I enter a value in boxPaymentAmount ("5"), enter another in boxSection5Total ("6"), tab off of boxSection5Total, and I see no alert, as I should, based on this jQuery, which is virtually identical to what's in the jsfiddle:

$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
    alert("focusout event has fired");
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
    }
});

So the event is not even being fired - why not?

I ran the page in Chrome and F12d, looking for err msgs in the console, but found none.

UPDATE

For A. (not "The") Wolff:

This is how I create the elements in the code-behind:

boxPaymentAmount = new TextBox
{
    CssClass = "dplatypus-webform-field-input"
};

I also changed the "textarea" to "text" in the HTML in the jsfiddle.

UPDATE 2

For Jonathen (not Russell) Crowe:

I changed my jQuery to the following:

$(document).on("blur", "[id$=boxSection5Total]", function (e) {
    alert("blur event has fired");
    console.log("blur event has fired");
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
        console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
    }
    else {
        console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
    }
});

...and still see nothing in the console from this event handler.

UPDATE 3

I have many other functions/handlers that fire just fine; so why this one doesn't is a conundrum. Maybe if I show what I've got (eliding some of the gory details), it may shed some light on what's going on (the failing function is the last/at the bottom):

$(document).ready(function () {
    console.log('The ready function has been reached; Requester and Payee Status sections should be slid up'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
});

/* NOTE: Things that need to take place after all the elements have been constructed need to go here; the ready function can be too early */
$(window).load(function () {
    $('[id$=_AddressRows]').slideUp();
    $('[id$=panelSection2]').slideUp();
    $('[id$=panelSection3]').slideUp();

    $('[id$=ddlPayToVendor]').hide();
});

/* NOTE: this checkbox is only visible if they are not already authenticated; If they select "Yes" (self-identify as UCSC Faculty, Staff, or Student), prompt them to log in */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
    var ckd = this.checked;
    . . . code elided for brevity
});

/* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form TODO: Should I change these from "change" to "click" */
$(document).on("click", '[id$=rbPaymentForSelf]', function () {
    if (this.checked) {
    . . . code elided for brevity
    }
});

/* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
$(document).on("click", '[id$=rbPaymentForSomeoneElse]', function () {
    if (this.checked) {
    . . . code elided for brevity

    }
});

$(document).on("click", '[id$=rbPaymentToIndividual]', function () {
    if (this.checked) {
        $('[id$=ddlPayToVendor]').slideUp();
        $('[id$=ddlPayToIndividual]').slideDown();
    }
});

$(document).on("click", '[id$=rbPaymentToVendor]', function () {
    if (this.checked) {
        $('[id$=ddlPayToIndividual]').slideUp();
        $('[id$=ddlPayToVendor]').slideDown();
    }
});

// Refactor this to populate the elements below (description, account codes, tax 1099); may pull from Lists rather than use the hardcoded vals, but if need to do the latter, see http://jsfiddle.net/clayshannon/x8npcpss/3/
$(document).on("change", '[id$=ddlPayToIndividual]', function () {
    var value = $(this).val();
    . . . code elided for brevity

});

// Refactor this ... (see comment above)
$(document).on("change", '[id$=ddlPayToVendor]', function () {
    var value = $(this).val();
    . . . code elided for brevity

});

/* Disallow anything other than 0..9 in the "SSN or ITIN" textbox */
$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) {
    var k = e.which;
    if (k < 48 || k > 57) { e.preventDefault(); }
});

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    . . . code elided for brevity

});

$(document).on("keyup", "[id$=explainPaymentTextBox]", function (e) {
    console.log("explainPaymentTextBox keyup reached");
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height() + 1);
    };
});

HERE IS THE RECALCITRANT ONE (DOESN'T FIRE):
/* Verify that amount in "Total" equals amount in Section 1 "Payment Amount"; this is not working at present; I first tried "focusout" instead of "blur" but neither event fires... */
$(document).on("blur", "[id$=boxSection5Total]", function (e) {
    alert("boxSection5Total's blur event has fired");
    console.log("boxSection5Total's blur event has fired");
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
        console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
    }
    else {
        console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
    }
});
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
  • `type="textarea"`??? Now i don't know sharepoint but check rendered HTML markup, is it what you are expecting? – A. Wolff Jul 06 '15 at 16:36
  • Try doing a `console.log()` instead of an alert in case you accidentally checked the "do not show alerts from the page again" button – Jonathan Crowe Jul 06 '15 at 16:36
  • Just to make sure, did you check what is returned by `$('[id$=boxSection5Total]')` before hooking the event? – The_Black_Smurf Jul 06 '15 at 16:38
  • @The_Black_Smurf OP is delegating event to document level – A. Wolff Jul 06 '15 at 16:38
  • Indeed, but his code seems ok to me so I just want to make sure the problem isn't related to the selector itself. – The_Black_Smurf Jul 06 '15 at 16:40
  • @The_Black_Smurf I think ya, the issue is regarding `selector`. I guess IDs are changed client side maybe as on ASP.net but as i don't know sharepoint, i'm really not sure that's the case here – A. Wolff Jul 06 '15 at 16:42
  • This might be silly, but is the Sharepoint page jQuery version 1.4 or higher? It might be running 1.11 – George Nemes Jul 06 '15 at 17:08
  • @A.Wolff: In Sharepoint, I'm creating the elements in C# dynamically. I'll add an Update to my question. – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 17:20
  • @The_Black_Smurf: I don't know what you mean by, "check what is returned by $('[id$=boxSection5Total]')". And yes, Sharepoint, or ASP.NET, or some other nefarious rascal, prepends a bunch of "gobbledygook" to an ID, so that an ID of "boxSection5Total" becomes something like "tennesee_florida_missouri_hannibal_87651234_*&^%_boxSection5Total" – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 17:24
  • @GeorgeNemes: How would I determine that? And, other events on the page are firing fine, so what's the significance of that? – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 17:26
  • 1
    @B. Clay Shannon: insert a break point or an alert in your code to see what's the value of `$('[id$=boxSection5Total]').length` just before hooking the focusout event. If the value is 0, it means that the selector used to hook the event isn't correct. – The_Black_Smurf Jul 06 '15 at 17:40
  • @The_Black_Smurf: Do you mean simply insert a line in the jQuery prior to the event handling code that I show? If that runs right away, it definitely won't have a value...so, I'm still confused. – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 17:47
  • Just before, `$(document).on("focusout", '[id$=boxSection5Total]', function (e) {`, write `alert($('[id$=boxSection5Total]').length)`. If the value is 0, the problem may be with the selector (or maybe because you hooked the event to early). If the value is greater than 0, then we should investigate something else (starting by making sure the dom element returned by your selector is the expected one). – The_Black_Smurf Jul 06 '15 at 17:52
  • @The_Black_Smurf: I'll try it, but won't that code run as soon as the page is loaded (at which point the value will be zilch, the length 0)?...yes, I just ran it, and it shows "0", but that alert appears before I can put any values into those textboxes, and so, it doesn't seem valid to me...maybe I'm still confused? – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 17:53
  • 1
    Forget about what I said about how JQuery evaluate the `.on`. the selector will be reevaluated each time according to [this answer](http://stackoverflow.com/a/9814409/315493). – The_Black_Smurf Jul 06 '15 at 18:05
  • 1
    Does hooking up the handler work if you do it from the F12 tools? (i.e. F12->Console-> `$(document).on("focusout", '[id$=boxSection5Total]', function (e) { .... });`, enter, and _then_ changing the values? – Dave Salomon Jul 06 '15 at 20:54
  • @DaveSalomon: Do you mean copying-and-pasting that code into the console will hook it up? BTW, you didn't name your son Rehoboam, did you? – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 20:57
  • 1
    Yes - to both your questions. :) – Dave Salomon Jul 06 '15 at 21:01
  • Okay, I copy-and-pasted the jQuery into the console (Chrome), entered values in the two textboxes, tabbed off the last one ("boxSection5Total") and still nothing/nada/zilch/zip etc. – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 21:09
  • 1
    @B.Clay Then the only possible explanation is that the selector isn't finding that element. What does pasting this in the console give you? `$('[id$=boxSection5Total]')` ? [Fiddle](http://jsfiddle.net/daveSalomon/scfwu8vp/) – Dave Salomon Jul 06 '15 at 21:57
  • 1
    I found the problem - I added an answer that explains it. Clue: see the UPDATE above (the first one). – B. Clay Shannon-B. Crow Raven Jul 06 '15 at 22:00

2 Answers2

2

Did you try using blur instead of using focusout? The difference between those two events can be found here and, in your case, you only want to capture the event for the textarea because it doesn't have any items inside it.

Community
  • 1
  • 1
Mindastic
  • 4,023
  • 3
  • 19
  • 20
1

It was a "rookie mistake" - I had forgotten to assign the ID to the element. Once I changed the code from this:

boxSection5Total = new TextBox()
{
    CssClass = "dplatypus-webform-field-input"
};
this.Controls.Add(boxSection5Total);

...to this:

boxSection5Total = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    ID = "boxSection5Total"
};
this.Controls.Add(boxSection5Total);

...I saw the alert about entering the event.

So the UPDATE shows the faulty code, although it would take someone accustomed to creating the html elements dynamically in C# to catch it.

For "full disclosure," here is the jQuery as it now stands (working as designed):

$(document).on("blur", "[id$=boxSection5Total]", function (e) {
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        console.log("The value in 'Total' does not equal the previous value in 'Payment Total'");
        alert("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
    }
    else {
        console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
    }
});

This "dawned on me" when I "inspected element" in the F12 tools and saw:

<input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl153" type="text" class="dplatypus-webform-field-input">

(no ID).

B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862