如何引用在 Visualforce 中指定的 html 元素 id 并传递给 javascript 函数？

发布于 2024-10-03 01:02:30 字数 1147 浏览 4 评论 0原文

我有生成输入文本字段的顶点标签。

<apex:page id="my_page">
    <apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>

当有人点击这个字段时，我想执行javascript。

但是当我检查 HTML 源代码时，这个成为输入标签的顶点标签具有（我认为）动态生成的部分。

   <input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010" 
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">

正如你所看到的 id 有垃圾部分:(

id="j_id0:j_id3:j_id4:c_txt"

在我的 Javascript 中，我试图 getElementById('c_txt') 但这当然不起作用。如何处理这个???

更新

似乎我可以做到这一点，但不起作用...

<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>

<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />

datepickerjs

var elem = getElementById('c_txt');
alert(elem);

警报显示“null”，所以

即使此警报返回 null，也一定有问题。

var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);

原文

I have apex tag that generate input text field.

<apex:page id="my_page">
    <apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>

When someone clicks this field, I want to execute javascript.

But when I check the HTML source, this apex tag which becomes input tag has (I think) dynamically generated part.

   <input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010" 
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">

As you can see id has junk part :(

id="j_id0:j_id3:j_id4:c_txt"

In my Javascript I'm trying to getElementById('c_txt') but this does not work of course. How to deal with this???

UPDATE

Seems like I can do this but not working...

<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>

<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />

datepickerjs

var elem = getElementById('c_txt');
alert(elem);

The alert shows 'null' so something must be wrong.

Even this alert returns null...

var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

李不 2024-10-10 01:02:30

您可以在 javascript 中使用 $Component 表示法，如下使用：

var e = document.getElementById("{!$Component.ComponentId}");

不过需要注意的一件事是，您的元素是否包含在具有 ID 的多个级别的 Visualforce 标签中：

<apex:pageBlock id="theBlock">
    <apex:pageBlockSection id="theBlockSection">
        <apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>

// snip

// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");

You can use the $Component notation in javascript, you use it like so:

var e = document.getElementById("{!$Component.ComponentId}");

One thing to be wary of though, is if your element is contained within several levels of Visualforce tags which have IDs:

<apex:pageBlock id="theBlock">
    <apex:pageBlockSection id="theBlockSection">
        <apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>

// snip

// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");

回复收藏 0 原文

太阳男子 2024-10-10 01:02:30

我的问题得到了解决。

$Compoent 全局 Visualforce 表达式只能在 VisualForce 代码中使用，不能在
就我的搜索而言，Javascript。

下面的代码工作正常。它将 inputText 字段中的值输出到 js 警报消息现在您可以将 id 属性传递给 Javascript 并处理所需的任何任务。

Created Date: <apex:inputText id="dah" value="{!created}" size="50" 
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>

<script>
  function go(field) {
    var huh = document.getElementById(field).value;
    alert(huh); //returns the string u put inside of input text field
  }
</script>

I got solution to my problem.

$Compoent global visualforce expression can only be used in visualforce code not inside of
Javascript as far as my search.

Below code works fine. It outputs the value in the inputText field to js alert message Now you can pass id attribute to the Javascript and process whatever the task needed.

Created Date: <apex:inputText id="dah" value="{!created}" size="50" 
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>

<script>
  function go(field) {
    var huh = document.getElementById(field).value;
    alert(huh); //returns the string u put inside of input text field
  }
</script>

回复收藏 0 原文

~没有更多了~