Solved

how can i refresh select box after delete using ajax/javascript

Posted on 2010-08-17
10
885 Views
Last Modified: 2012-05-10
Hi, on my page, I have two drop down boxes and a text box. The user can click on a delete menu icon and remove data from the fields. I have the delete working, but my select boxes won't refresh to reflect the data that has been removed from the table in the database. How can I use ajax to accomplish this? I've attached the pages in question below.
This is the page where the delete function is located and where I want to call my cfm page to refresh. I do have the <cfajaxproxy cfc="get_webServiceUsers" jsclassname="jsobj"/> at the top of the script tags on the page, this is just a snippet.

detail.cfm

function del()
{
	boolReturn = true;
	var cfcAsAjax = new jsobj();
	var returnVal = '';
	switch (documentPanels.visible) {
		case "rolepanel":
			alert("This operation is not available for Role Panels", 3000);
			break;
		case "operatorattribute":
			boolReturn = delDefault(subDir +  "administration/security/robot_putOperatorAttribute.cfm?<cfoutput>#Session.URLToken#</cfoutput>");
			break;
		case "operatorsettings":
			alert("This selection is not available for Operator Settings");
			break;
		case "webserviceusersettings":
			var consumerid = document.webserviceusersettingsForm.sel_ExternalID.value;
			var appname = document.webserviceusersettingsForm.Sel_APP_NAME.value;
			var cmsopid = document.webserviceusersettingsForm.SEL_CMS_USERID.value;
			cfcAsAjax.deleteWebUsers(appname, consumerid,cmsopid);


			break;
	}
	return boolReturn;
}

Below is the page where the select boxes reside 

webServiceUserSettings.cfm



<div id="webserviceusersettingsFormDiv" style="position: absolute; left: 5; top: 5; text-align: left;">
<cfform name="webserviceusersettingsForm">


		<table width="461" border="0">

		  <tr>
            <td width="101" CLASS="FieldName">

            <div align="left">External Application:</div></td>
		            <td width="350" class="FieldValue">


				     	<cfselect name="Sel_APP_NAME"
				            bind="cfc:get_webServiceUsers.getApps()"bindonload="true" />

			</td>
			</td>
          </tr>

				  <tr>
		            <td width="101" CLASS="FieldName"><div align="left">CMS Operator ID:</div></td>
		            <td width="350" class="FieldValue">


            				<cfselect name="SEL_CMS_USERID"
            				bind="cfc:get_webServiceUsers.getUserIds({Sel_APP_NAME})" />


		            </td>

				  </tr>


			<tr>
					<td class="FieldName">External Operator id:</td>
					<td class="FieldValue">

						<cfinput name="sel_ExternalID"
							bind="cfc:get_webServiceUsers.getExternalIDs({Sel_APP_NAME},{SEL_CMS_USERID})" disabled/>

			</tr>


        </table>

		<INPUT name="_ROW" type="hidden" value=0>
		<INPUT name="_COUNT" type="hidden" value=0>
		<INPUT name="insertaction" type="hidden" value="N">
		<INPUT name="_UPDATE" type="hidden">
		<INPUT name="_RECORDSET" type="hidden" value="rsWebServiceUserSettings">


</cfform>
</div>

<div style="position: absolute; left: 5; top: 5; text-align: left;">

<cfform name="webserviceusersettingsForm2">

		<table width="461" border="0">

		  <tr>
            <td width="101" CLASS="FieldName">

            <div align="left">External Application:</div></td>
		            <td width="350" class="FieldValue">
		             <cfselect name="Sel_EXT_APP_NAME"
				            bind="cfc:get_webServiceUsers.getExternalApps()"bindonload="true"/>

			</td>
			</td>
          </tr>

				  <tr>
		            <td width="101" CLASS="FieldName">
		            <div align="left">CMS Operator ID:</div></td>
		            <td width="350" class="FieldValue">


		           		 <cfselect name="SEL_OPERATOR_USERID"
            				bind="cfc:get_webServiceUsers.getOperatorIds()"bindonload="true"/>


		            </td>

				  </tr>


			<tr>
					<td class="FieldName">External Operator id:</td>
					<td class="FieldValue">
						<INPUT name="sel_ExternalID" class=upperCase size="35" maxlength="35">

			</tr>


        </table>

		<INPUT name="_ROW" type="hidden" value=0>
		<INPUT name="_COUNT" type="hidden" value=0>

		<INPUT name="_UPDATE" type="hidden">
		<INPUT name="_RECORDSET" type="hidden" value="rsWebServiceUserSettings">


</cfform>

</div>


Finally, here is my cfc page that contains the delete query

get_webServiceUsers.cfc

<cfcomponent>
 <cffunction name="deleteWebUsers" access="remote" output="no">
      
      	<cfargument name="APP_NAME" type="any" required="true">
           <cfargument name="CONSUMER_ID" type="any" required="true">
           <cfargument name="CMS_USERID" type="any" required="true">
      	
      	
      	  
      		<cfif request.isFullAdmin>
      		
      			
      		  
      			<cfquery name="data" datasource="#THIS.dsn#" username="#request.USERNAME#" password="#request.PASSWORD#">
      				DELETE FROM #request.SCHEMA#WEBSERVICE_USERS
      				WHERE APP_NAME = '#arguments.app_name#' AND
      				      CONSUMER_ID = '#arguments.consumer_id#' AND
      				      CMS_USERID = '#arguments.cms_userid#'
      			</cfquery>
      		  
      		</cfif>
      		
      	
      	<cfreturn "success">
   </cffunction>


</cfcomponent>

Open in new window

0
Comment
Question by:grnmachine
  • 4
  • 4
10 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 33459890
To remove all options use :
var selectbox = document.getElementsByTagName("theSelectBoxName")[0];
while(selectbox.options.length>0) selectbox.remove(0);

or BETTER if you set an ID to the selectbox

var selectbox = document.getElementById("theSelectBoxID");
while(selectbox.options.length>0) selectbox.remove(0);

Open in new window

0
 

Author Comment

by:grnmachine
ID: 33460891
Hi leakim971,

I don't want to remove all options. Just the record that was deleted. What happens right now is, the user selects the records in they want to delete, hit the delete button, but because the page doesn't refresh, the values still show in the select boxes. Can I somehow refresh these select boxes, or the page using an ajax call?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 33461026
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:grnmachine
ID: 33468774
thats not going to work, i don't have access to the cold fusion server and can't install the dwrengine. Doesn't cold fusion 8 have built in ajax support? Is there any other way to do what I mentioned above?
0
 

Accepted Solution

by:
grnmachine earned 0 total points
ID: 33476206
I found the solution. Apparently cold fusion 8 still does not support refreshing a bound CFSELECT list. There is a work around located here in case anyone runs into similar problems.

http://cfsearching.blogspot.com/2010/02/coldfusion-9-yet-another-way-to-refresh.html

All it took was the following line to do the trick

ColdFusion.bindHandlerCache['yourElementID'].call();  

Leakim971, I will give you 100 points for your troubles.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33476261
>Leakim971, I will give you 100 points for your troubles.

lol no worries, thanks a lot!
0
 

Author Comment

by:grnmachine
ID: 33476279
Hi, could you please assign leakim971 100 of the 500 points for his efforts. I messed up closing the quesitons properly. Thanks.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33566502
Thanks for the points!
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question