Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2010-08-17
10
880 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
innerHTML 7 34
Question about traversing a tree using jQuery 7 33
removing a class in javascript 4 48
Button on Table, name table1 not working 4 21
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

856 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