Link to home
Start Free TrialLog in
Avatar of Qsorb
QsorbFlag for United States of America

asked on

Submit FORM or LINK with cfajax JavaScript

<script>
myCB = function(resp){
var msgDiv = document.getElementById('messages');
msgDiv.innerHTML = resp;
}

myError = function(sc,msg){
alert('Error!!! ' +sc +' '+msg);
}

submitFrm = function(){
	ColdFusion.Ajax.submitForm('testForm', 'update.cfm', myCB, myError);
}
</script>

<style type="text/css">
<!--
.delbtn {
	background: url("/a/delbtn-x.png") no-repeat;
	font-weight: bold; text-decoration: none; display: block;
}

.delbtn:hover {
	background: url("/a/delbtn.png") no-repeat;
	
}
-->
</style>


<!--- class delbtn displays an image which I want to keep --->


<!--- I perfer using a table and link with the message showing but cannot get the JavaScript to work with it. 
Is the problem the JavaScript name, code, what? --->
<table>
 <tr>
  <td class="delbtn" id="testForm"><div id="messages">&nbsp;</div></td>
 </tr>
</table>


<!-- I prefer NOT to use a form because I have trouble getting the DIV ID message inside the FORM Value as well as the class delbtn --->
<div class="delbtn" id="messages">&nbsp;</div>
<form name="testForm" id="testForm" action="/purchase/add-to-cart.cfm" method="post">
  <input name="messages" id="messages" class="delbtn" type="button" value=" "  onclick="javascript:submitFrm();"  />        
</form>
                                  

Open in new window


Need help finding a way to submit an anchor LINK or FORM so my JavaScript message will display correctly and at the correct place without having to resort to using css absolute positioning.

 My test code needs to go inside a table which I cannot figure out how to display the message correctly.

If I could get the form to display the info inside the VALUE, including the image of class=delbtn, as well as the JavaScript message, then I could use the form. But attempting this in every way I can imaging, does not work.

Hopefully, there's something very basically wrong I'm just not seeing.
Avatar of Coast Line
Coast Line
Flag of Canada image

can i see a live link, this can help me sorting ur issue
Here is simple example of using cfdiv ajax binding with button click event to add a info to page.

Although this uses cfform, the page update is handled by cfdiv.



<cfform name="form1">
<br/>SELECT PRODUCT:<cfinput name="stext1" type="text" value="Product Name1" ><cfinput type="button" name="addBtn" value="Add" > 
</cfform>

<cfdiv bindonload="false"
        bind="url:AddToCart.cfm?addBtn={addBtn@click}&stext1={stext1}" ID="theDiv"
        style="background-color:##CCffFF; color:red; height:100"/>

My AddToCart.cfm is:

<cfif IsDefined("URL.stext1")>
      <cfif #len(trim(url.stext1))# eq 0>
            <cfexit>
      <cfelse>
            <cfoutput>
                  <h2>Item Added to Cart  #URL.stext1#</h2>
            </cfoutput>
      </cfif>
</cfif>
Avatar of Qsorb

ASKER

myselfrandhawa: Can't show this. We're behind a firewall, text system.

pravinasar: I created two cfm pages as you suggested, using the exact code. I have no idea what to expect except that Something should happen.

 Nothing does. Are you assuming I need to change or substitute something with your code suggestion?

I don't know what to do with {addBtn@click} or {stext1}, what they mean or hint at. Don't  know if I'm suppose to remove the brackets, or substitute something. I spent a couple hours trying to figure out what you're suggesting, but without any narrative, I cannot continue.
Avatar of Qsorb

ASKER

I can't get cfdiv to work or respond with any examples I've seen then used.

I'm using cf8 standard.

I've tried many examples here and elsewhere, and there's never any response, just as though the cfdif tag is ignored. CF administrator does not even list cfdiv  as a tag in "CF Tag Permissions".

Without further suggestions here I can understand, I'll have to move back to finding a js solution and close this question.
What I am showing is cf binding capability.

And you are right, I showed an example. You need to plug in code in AddToCart.cfm

cfdiv is available in cf8. May be your hosting has disabled the cfajax functionality.
In that case, my suggestions would not work for you.
Avatar of Qsorb

ASKER

> You need to plug in code in AddToCart.cfm
Yes, did that, and I'm certain the path is correct. I also used the example for the tag on http://livedocs.adobe.com, used their exact example, just as I did yours.

There is no response at all on when running the page, no matter what I do.

If you'll look at one of my earlier posts, I mention this:

"CF administrator does not even list cfdiv  as a tag in "CF Tag Permissions".

Did you miss that? We use is a fully registered CF8 standard will all important updates and fixes installed. We host our own site and our own Coldfusion 8 on our  own servers, on our own bandwidth, our own domain.


MOST IMPORTANT:
We control CF administrator. In CF Administrator, under Resource Security, CF Tags, there is no CFDIV tag listed. That tag is not present at all.  So, obviously, CFDIV is not only not available, it is not disabled. We don't have any cf tags disabled.

That fact seems important, don't you think?  Do you see CFDIV listed in this area?  And is there any other way to be certain that CFDIV is available on our CF8 standard installation? What  could be the problem? This must be a problem or confusion on my end but I don't have a clue as to what it is, makes no sense to me. What do you suggest?
I have been using cfdiv since CF8. Even on Standard CF License.
ASKER CERTIFIED SOLUTION
Avatar of digicidal
digicidal
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ok, so tell me what have you used messages with id everywhere and you are just displaying the respose returned also in id="messages", try this


<script>
myCB = function(resp){
var msgDiv = document.getElementById('messages');
msgDiv.innerHTML = resp;
}

myError = function(sc,msg){
alert('Error!!! ' +sc +' '+msg);
}

submitFrm = function(){
	ColdFusion.Ajax.submitForm('testForm', 'update.cfm', myCB, myError);
}
</script>

<style type="text/css">
<!--
.delbtn {
	background: url("/a/delbtn-x.png") no-repeat;
	font-weight: bold; text-decoration: none; display: block;
}

.delbtn:hover {
	background: url("/a/delbtn.png") no-repeat;
	
}
-->
</style>


<!--- class delbtn displays an image which I want to keep --->


<!--- I perfer using a table and link with the message showing but cannot get the JavaScript to work with it. 
Is the problem the JavaScript name, code, what? --->
<!-- I prefer NOT to use a form because I have trouble getting the DIV ID message inside the FORM Value as well as the class delbtn --->
<div class="delbtn" id="messages">&nbsp;</div>
<form name="testForm" id="testForm" action="/purchase/add-to-cart.cfm" method="post">
  <input name="sbtDelete" id="sbtDelete" class="delbtn" type="button" value="Delete"  onclick="javascript:submitFrm();"  />        
</form>
                                  

Open in new window

Avatar of Qsorb

ASKER

Looks like using cfajaximport solved this problem with your detailed overview. Such detail and patients helps solve problems. Thanks for taking time. I'm better for it.