Integration of Salesforce with JQuery Mobile

Question

I have created a visualforce page along with the controller. In the page I have created a JQuery Mobile popup which appears on the click of a button. The popup consists of another button which is supposed to update a custom object field, but, I am not sure how to proceed.

Accept invitation

        <div data-role="popup" id="myPopup">
              <p>These are the terms and conditions of viewing the publication.
              </p>
              <form>
                  <label><input type="checkbox" name="checkbox"> I agree</input></label>


                    <input type="button" id="Submit" value="Submit"></input>


                    <input type="reset" value="Cancel"></input>
              </form>
        </div>

I am very new to salesforce. Any help would be appreciated.

Answer 1

Create a method in your controller that updates the custom object field, then in your Visualforce page create an ActionFunction to call with jQuery.

Example of the code you might use in the page:

<apex:actionFunction action="{!controllerMethodThatUpdatesField}" name="acceptTermsAndConditions" />

<script>
  $('input#Submit').click(acceptTermsAndConditions);
</script>

Answer 2

@Rob I have written the following code, which is not working and I am not sure how to proceed. public class Publication_Tab_Controller{ public list pub {get;set;} public Publication_Tab_Controller() {

String searchquery='select name,id from publication__c';  
pub= Database.query(searchquery); 
}
public Publication_Tab_Controller(ApexPages.StandardController controller) {
}
public String tabOpt {get;set;}
public void switch()
{
    tabOpt='Review';
} 
@RemoteAction
public static void update_publication(publication__c publication)
{
System.debug('Check');
    publication.AcceptInvitation__c='Accepted';
    update publication;
}

} Apex Page Code:

{!a.Name}

     <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Accept invitation</a>
        <div data-role="popup" id="myPopup">
              <p>These are the terms and conditions of viewing the publication.
              </p>
              <form>
                  <label><input type="checkbox" name="checkbox"> I agree</input></label>


                    <input type="button" id="Submit" value="Submit"></input>


                    <input type="reset" value="Cancel"></input>
              </form>
        </div>
     <!--apex:commandButton value="Accpet Invitaion" action="{!switch}" reRender="AccountTabPanel"/-->


 </apex:column> 
</apex:pageBlockTable>     

var j$ = jQuery.noConflict();

                        j$(document).ready(function(){
                            j$("#Submit").click(function() 
                                { 
                                var input = document.getElementById("ID").value;

                                 Visualforce.remoting.Manager.invokeAction(
                                  '{!$RemoteAction.Publication_Tab_Controller.update_publication}',input,
                                  function(results, event)
                                  {
                                      console.log(result);
                                  }
                                );
                                });

                          });
                      </script>