Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2010-08-17
10
Medium Priority
?
895 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 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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 …
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…
Suggested Courses

971 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