4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【質問】VisualforceでのjQueryの表記方法について

Posted at

お世話になっております。

visualforceでのjQuery表記についての質問です。

下記のようなページがあるとします。
これはinputFieldに打ち込まれた値に100を追加した値がoutputFieldに即反映されて表示されるというページです。
javascriptを使用しています。
<apex:page >   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />   <script type="text/javascript">     function changeSample(form) {       inputval = parseInt(document.getElementById( '{!$Component.form.pb.pbs.in}' ).value);       outputval = document.getElementById( '{!$Component.form.pb.pbs.out}' ).innerHTML = inputval + 100; }   </script>   <apex:form id="form" styleClass="form" >     <apex:pageBlock id="pb" styleClass="pb" >       <apex:pageBlockSection id="pbs" styleClass="pbs" >         <apex:inputField value="{!input__c}" onchange="changeSample(this.form);" id="in" styleClass="in" />         <apex:outputField value="{!output__c}" id="out" styleClass="out" />       </apex:pageBlockSection>     </apex:pageBlock>   </apex:form> </apex:page>

このコードで問題無く動作します。

・・・が、このjavascript部分にjQueryを使用したいのです。
なのでその部分を下記のように書き換えました。
<script type="text/javascript"> $j = jQuery.noConflict(); $j(document).changeSample(function () { inputval = parseInt($j('.in').val()); $j('.out').html() = inputval + 100; } </script>

すると、inputFieldの部分は問題無く動作しているよう(outputFieldの方だけを、jQuery表記ではなくすると、書き換え前と全く同じ動作になる為)なのですが、outputFieldの方は上手く動作しませんでした。

outputFieldの方は似たようなことを紹介しているサイトを参照しながら上手くいきそうなコードをいくつか試してみたのですが、どれも上手くいかなかったので、とりあえず失敗例のうちの1つを書き換えの例に挙げました。

お力を貸していただければ幸いです。
よろしくお願い申し上げます。

4
3
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?