Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2010-08-17
10
Medium Priority
?
893 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
[X]
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
  • 4
  • 4
10 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 400 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 400 total points
ID: 33461026
0
Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

 

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 to Create Failover DNS Record Sets in Route 53

Route 53 has the ability to easily configure DNS record sets specifically for failover scenarios. These failover record sets can be configured to failover to full-blown deployments in other regions or to a static HTML page that informs your customers of the issue.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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…

661 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