jQuery is not able to 'connect' with the elements on my server generated webpage

Question

I'm trying to use jQuery functionality in Software AG webMethods IDE, which generates pages on its own .. Basically, I'm giving jQuery's functions a server-generated element ID, but jQuery is unable to read it's value, or write a value to it, or do anything with it ..

Here's the code I'm using:

if(jQuery.isNumeric(jQuery(CAF.model("#{activePageBean.clientIds['txtInput']}").id).val()))
{
alert("its a number");
}
else
{
alert("its not a number");
}

txtInput is a normal input text field, and the above code is assigned to a button ... And no matter what is put into the text field, I always get the "its not a number" alert ..

Also, if I use this code instead ..

alert(jQuery(CAF.model("#{activePageBean.clientIds['txtInput']}").id).val());

... I always get an alert saying "undefined" (without the double quotes) ..

The expression returning the text field's ID is:

CAF.model("#{activePageBean.clientIds['txtInput']}").id

.. and this is:

jsfwmp147312:defaultForm:txtInput

If I instead run this webMethods built-in function to get the value:

CAF.model("#{activePageBean.clientIds['txtInput']}").getValue();

It does return the value currently in the text field ..

So basically for some reason jQuery's functions are unable to 'connect' with the page's elements ..

How do I diagnose/resolve this ?

EDIT:

More information:

If I try the following code ...

var myId = "jsfwmp147312:defaultForm:txtInput";
var element = document.getElementById(myId);
alert(element.value + "");

.. I get the string text field's string value in the alert fine, no problems ... But if I try this ...

var myId = "jsfwmp147312:defaultForm:txtInput";
var val2 = jQuery(myId).val();
alert(val2);

... I get an alert with the message "undefined" (without the double quotes) ..

score 1 · Answer 1 · answered Mar 09 '12 at 13:17

We'll need some HTML with that. I don't really understand your selector though. You say it is "assigned to a button", so you'll need a click.

jQuery(document).on("click", "#clientIds[name=txtInput]", function(){

    v = $(this).val();
    alert(v);

});

Overall, client-side code and server-side code don't communicate. Server-side code spits out HTML, and client-side code handles it afterward. For both to communicatie, you need to send the data via e.g. page requests or AJAX.

epascarello · Answer 2 · 2012-03-09T23:38:53.103

1

Problem is : means something in the jQuery selector so it is not looking for something else.

The string needs to look like jsfwmp147312\:defaultForm\:txtInput

So you will need to make it work in two steps

var myId = CAF.model("#{activePageBean.clientIds['txtInput']}").id.replace(/:/g,"\\:");
var val = jQuery(myId).val();

if (jQuery.isNumeric( val ) {
    alert("its a number");
} else {
    alert("its not a number");
}

edited Mar 09 '12 at 23:38

answered Mar 09 '12 at 13:30

epascarello

204,599
20
195
236

Your code seems to be heading in the right direction, but the if condition still fails. If I do `var myId = CAF.model("#{activePageBean.clientIds['txtDateInput']}").id.replace(/:/,"\\:");` and then do `alert(myId);`, I get an alert saying `jsfwmp147312\:defaultForm:txtInput` ... Can you tell me exactly what value jQuery needs, so that I can add/subtract to the string accordingly ? .. – Ahmad Mar 09 '12 at 14:34

jQuery is not able to 'connect' with the elements on my server generated webpage

2 Answers2