+ Start a Discussion
bpl3792bpl3792 

Need a way to redirect to another VF page after a button click through jQuery

I have a jquery grid that created and filled with data after a search is complete. When you click on a row another div is created to display more information. Inside the div with more info is a button that should redirect you to another page while passing an id as an argument. The problem I'm having is when I try to use the onClick of the button for a page redirect it returns undefined. I was able to  j$('#Edit_Asset').live('click', function(){ to finally recognize the element and do the event...the only problem I have with this is when i use window.opener.location.href=document.domain+'/apex/AS_AssetEdit_m?id='+id; it doesn't go to the new page, it stays on the same page and reloads another instance of it. Anyone have any idea what else I could usei n jQuery to redirect the page?

Here's the code

<script>
    var j$ = jQuery.noConflict();
    var Results_Div=j$('#Results_Grid');
    var Results_Grid_Header=j$('#Results_Grid_Header');
    var QFilter;
    var SearchString;
    var PowersCombined;
    var oldResultElement;
    var id;
    var com;
    var res;
    j$(function() {    
       Results_Div=j$('#Results_Grid');
       QFilter=j$('#Query_Filter').val();
       SearchString=j$('#SearchBox').val();
       PowersCombined=QFilter+'°'+SearchString;
                       
           j$('#Search_Submit').click(function(){
                   
                  QFilter=j$('#Query_Filter').val();
                  SearchString=j$('#SearchBox').val();
                  PowersCombined=QFilter+'°'+SearchString;

                  Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.AS_Viewer_m.getAssets}',
                  PowersCombined,
                  function(result, event)
                  { 
                      j$('#Results_Grid').children().remove();
                      id=result.id;
                      for(var b = 0; b < result.length; b++){
                          
                          j$('<div class="ui-grid-d" name="AssetGrid" id="AssetGrid'+result[b].Id+'" >'+
                              '<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Name+'</div></div>'+
                              '<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Model__r.Name+'</div></div>'+
                              '<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Serial_Number__c+'</div></div>'+
                              '<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].User+'</div></div>'+
                              '<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:20px;width:200px">'+result[b].Acquisition_Date__c+'</div></div>'+
                              '<div id="AssetInfo'+result[b].Id+'" name="AssetInfo" style="width:1000px; margin:0 auto;"></div>'+
                            '</div>').appendTo(Results_Div);
                            
                      }
                            
                  },{escape: true});  
       
       });
       j$('#Results_Grid').on('click','div[name="AssetGrid"]', function(e) {
         j$('#DataDiv').empty().remove();

         if (oldResultElement!=null){
             j$(oldResultElement).children().remove();
            
         }

         var st=this.id;
         com='#AssetInfo'+st.substring(9);
         
         oldResultElement='#AssetInfo'+st.substring(9);

         Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.AS_Viewer_m.getAsset}',
            st.substring(9),
            function(result, event)
            {
             
             id=result.Id;

             if(result.RecordType.DeveloperName=='Infrastructure_Hardware'){

               j$('<div id="DataDiv" style="width:1000px; margin:0 auto;" style="width:1000px; margin:0 auto;">'+
               '<div style="width:500px;float:left;" id="MoData_LeftDiv">'+
               '<b>Asset Name: </b>'+result.Name+'<br/>'+
               '<b>Serial Number: </b>'+result.Serial_Number__c+'<br/>'+
               '<b>Model: </b>'+result.Model__r.Name+'<br/>'+
               '<b>Host Name: </b>'+result.Host_Name__c+'<br/>'+
               '<b>IP Address: </b>'+result.IP_Address__c+'<br/>'+
               '<b>MAC Address: </b>'+result.Mac_Address__c+'<br/>'+
               '<b>Comments: </b>'+result.Comments__c+'<br/>'+
               '</div>'+
               '<div style="float:left;width:300px;padding:0px 0px 0px 80px; id="MoData_MidDiv"">'+
               '<b>Account/Hospital: </b>'+result.Account_Hospital__c+'<br/>'+
               '<b>Date Lost/Stolen: </b>'+result.Date_Lost_Stolen__c+'<br/>'+
               '<b>Acquisition Date: </b>'+result.Acquisition_Date__c+'<br/>'+
               '<b>Decommission Date: </b>'+result.Decommission_Date__c+'<br/>'+
               '<b>Allocation: </b>'+result.User__c+'<br/>'+
               '</div>'+ 
               '<div style="width:80px;float:left;" id="MoData_RightDiv">'+
                      '<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/edit.png')}"  href="#" id="Edit_Asset"/><br/>'+
                      '<input type="image" src="{!URLFOR($Resource.Coquette, 'PNG/64x64/trash_can.png')}"  href="#" id="Delete_Asset"/>'+
               '</div>'+
               '<br style="clear:both;"/>'+
               '</div>').insertbefore(com);
               
                                                  
              }
            },{escape: true});
                           
        });

        j$('#Edit_Asset').live('click', function(){
            {!$Page.AS_AssetEdit_m}?id={!'+id+'}
            window.opener.location.href=document.domain+'/apex/AS_AssetEdit_m?id='+id;
        });
        

          
    });
   
</script> 

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<apex:form >
<div data-role="header"> 
    <h1>Find Asset</h1> 
</div> 

<div id="Search_Div" class="Element_LeftAlign">
<input type="text" id="SearchBox" style="width:300px;display:inline;"/>
<button type="button" style="vertical-align:bottom;display:inline;" id="Search_Submit">Search</button>
    <select size="1" id="Query_Filter">
        <option value="00">--Please select--</option>
        <option value="01">Serial Number</option>
        <option value="02">Name</option>
        <option value="03">Allocated To</option>
        <option value="04">In Inventory</option>
    </select>
    <!--Make this a button that expands out-->
</div>
<div id="Results_Grid_Header" data-theme="d" style="display:inline;position:fixed;top:170px;">
<div class="ui-grid-d">
<div class="ui-block-a ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Name</b></div></div>
<div class="ui-block-b ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Model</b></div></div>
<div class="ui-block-c ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Serial Number</b></div></div>
<div class="ui-block-d ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Allocated To</b></div></div>
<div class="ui-block-e ui-li-count"><div class="ui-bar ui-bar-e" style="height:20px;width:200px"><b>Acquisition Date</b></div></div>
</div>
<div id="Results_Grid" class="" style="overflow:auto;height:350px;">

</div>
</div>




</apex:form>
</apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
S91084S91084

You can use <apex:actionFunction/> to redirect the user to another visualforce page. In the action for the <apex:actionFunction/> in the controller you can redirect th euser to a different page and call that actionfunction in your JQuery.

All Answers

S91084S91084

You can use <apex:actionFunction/> to redirect the user to another visualforce page. In the action for the <apex:actionFunction/> in the controller you can redirect th euser to a different page and call that actionfunction in your JQuery.

This was selected as the best answer
bpl3792bpl3792

Wow, thanks! That's exactly what I needed!