function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Tech EnthuTech Enthu 

Issue with jQuery dialog with inputfield

I am trying to change JavaScript to jQuery but having some issues. Any help to resolve this issue is highly appreciated.

Thank you 


Scenario:
When user clicks on a custom link a prompt window(JavaScript) will show up  to capture phone number changes. The custom link and input hidden fields are with in my datatable so ids are not fixed. Now I would like to change this JavaScript functionality to jQuery but for some reason I am unable to show the input box on dialog to enter/modify the phone number.


VF:
<apex:dataTable align="center" cellspacing="1" value="{!contactlist}" var="contact" rendered="{!NOT(ISNULL(contactlist))}">
     <apex:column headerclass="ct" width="70px">
 <apex:facet name="header">Name</apex:facet>                                   
 <apex:inputfield id="Name" value="{!contact.Name__c}" style="width:70px;height:30px;text-align:right;" />
        <apex:commandlink value="Enter Phone" onClick="capturePhone('{!$Component.phone}');" />
    </apex:column>
    <apex:column>
    <apex:inputHidden id="phone" value="{!contact.phone__c}" />
    </apex:column>
</apex:dataTable>


JS:
<script language="JavaScript">
  function capturePhone(Phone){
     var newPhone=prompt("Please enter Phone",document.getElementById(Phone).value);
     if (newPhone !=null)
     {
       document.getElementById(Phone).value=newPhone;
     }
  }
</script>

 

jQuery:
 <head>
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.10.1.custom/js/jquery-1.9.1.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.10.1.custom/js/jquery-ui-1.10.1.custom.min.js')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.10.1.custom/css/ui-lightness/jquery-ui-1.10.1.custom.css')}"  />
 <script>
   j$ = jQuery.noConflict();
    function capturePhone(Phone){
         var newPhone = document.getElementById(Phone);
       j$('<div id = Phone>').dialog( {
                                       
                                        modal: true,
                                        position: 'center' ,
                                        title: 'Enter the Phone',
                                        resizable: false,
                                        height:140,
                                        buttons : {
                                                   "Ok": function() {
                                                       j$( this ).dialog( "close" );
                                                    },
                                                   "Cancel": function() {
                                                       j$( this ).dialog( "close" );
                                                    } 
                                                   }
                                         });

       j$('<div id = Phone>').html(phone); -----Could be a problem?

       j$('<div id = Phone>').dialog("open");
        
    }
  </script>
 <head>

joshbirkjoshbirk

Remember that Visualforce will render an ID in HTML different than what you have in the component, based on how it is building the DOM out.  You were on the right track with:

 

'{!$Component.phone}'

 

But tbh, I have found that to be unreliable with jQuery.  

 

However, you ID will always be a part of it - so you can find the original component with what's called a partial selector:

 

j$('[id*=phone]')

 For instance.

 

That said, i would say your flow should be slightly different.  Put the html you want into a div on the VF:

 

<div id="phone-modal">
<b>New Phone Number:</b> <input type="text" id="newPhone" />
</div>

 Create the modal from that:

j$("#phone-modal").dialog()

 And in the event structure assign that value to the hidden:

 

j$('[id*=phone]').val(j$("#newPhone").val());

 

 

That's not the entirety of it, of course, but it should be close.

Tech EnthuTech Enthu

Thank you , Joshbrik. Now I was able to display the input box but for some reason the jQuery dialog is closing automatically. What could be the reason?