Solved

Submit FORM or LINK with cfajax JavaScript

Posted on 2012-03-15
12
798 Views
Last Modified: 2013-12-24
<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.
0
Comment
Question by:Qsorb
  • 4
  • 3
  • 2
  • +1
12 Comments
 
LVL 15

Expert Comment

by:Gurpreet Singh Randhawa
ID: 37728790
can i see a live link, this can help me sorting ur issue
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 37729816
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>
0
 

Author Comment

by:Qsorb
ID: 37731126
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.
0
 

Author Comment

by:Qsorb
ID: 37731488
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.
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 37733855
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.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:Qsorb
ID: 37735578
> 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?
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 37737145
I have been using cfdiv since CF8. Even on Standard CF License.
0
 
LVL 9

Accepted Solution

by:
digicidal earned 500 total points
ID: 37770334
QSorb,

I've run into many issues with CF's ajax implementation (incidentally they are fewer with CF9 - but then again there are many other issues I've run into with CF9 so I can't say an upgrade will necessarily help you).

One of the things that has helped with numerous pages in which I've had similar problems as you is to simply use cfajaximport with the tags to be called - this makes sure the libraries are explicitly loaded at runtime.  EX: <cfajaximport tags="cfdiv,cfform,cfwindow" />

You can read more on this here: CFAJAXIMPORT LIVE HELP - of particular note is that you MUST explicitly call the appropriate tag's libraries if you use the bind attribute on a cfdiv, or if you use any of the ajax functions on a page where there are no other ajax tags being used.  Read down about halfway under the second section under USAGE.

My guess is that because you are not using any of the ajax tags, the libraries are not being loaded... but you are using ColdFusion.Ajax.submitForm in your script.  In this case you can simply add the <cfajaximport /> tag by itself without any arguments to load the base libraries for use on your page.

Potentially, the reason pravinasar's recommendation is working for him and not working for you is that he is wrapping <cfdiv> in <cfform> which is automatically loading the base ajax libraries as well as the additional libraries involved in <cfform> and <cfdiv>... if you do not do the same on your test pages... you will still have the same issues.  However, if you include explicitly the base libraries only (unless you are using other tags, in which case include them in arguments) it should suddenly start working.

I didn't critically analyze your code because I wanted to make sure you tried this before we spend time trying to fix problems that potentially don't even exist - you seem to have a good handle on the development... you just missed one of the many 'hidden' caveats that crop up on the ajax side.

PS - EXTjs 1.0 (or was it 1.1 in CF8 - I forget) is horrible IMHO... If you only need simple things then it's fine but if you're planning on writing a full ajax-enabled application with many of the GUI elements and complex data interactions, then I'd say the pain of a CF9 upgrade is well worth it to get the later version.

For more information you should be able to use most if not all of the examples for CF9 provided that you restrict that usage to the js functions and basic tag element implementations - just remember to check for new and deprecated functionality before assuming that it will work... of particular note for your example see here.
0
 
LVL 15

Expert Comment

by:Gurpreet Singh Randhawa
ID: 37770537
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

0
 

Author Closing Comment

by:Qsorb
ID: 37774349
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.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

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, …
Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now