...

View Full Version : Resolved special characters and escaping



teedoff
01-18-2011, 07:38 PM
Hi I have a form generated by jQuery. When the user types text in the input field it works fine. However, when she tries to insert an ampersand, it doesnt display the form results. I have a call function to display the form values back on my template before sending to the action page.

Anyway, I've tried escaping the & with back slashes with no luck. Is there another way to insert an ampersand in my form input fields?

harbingerOTV
01-18-2011, 08:56 PM
2 chunks out of a form I am currently writing:


teamInfo = $('#current').html();

teamInfo = teamInfo.replace('&', '|');

the second line is replacing all the ampersands with vertical pipes. I figured there should be no reason for a vertical pipe to make it in to the variable other wise. Later I just do the opposite the switch back to ampersands.

teedoff
01-18-2011, 09:23 PM
I'm sorry you lost me...lol Im very new to js and jQuery. Are you saying I can insert some code similar to what you suggested in order to replace one character ina form field with another ie "&"?

If so, not exactly sure where to put this code. I would guess it needs to be right after the form and right before where the call function displays the results correct?

harbingerOTV
01-18-2011, 09:33 PM
you said, "I have a call function to display the form values back on my template before sending to the action page." Is that being done as the user types or is there a submission before it happens?

If there is some kind of submission then something like:


<form id="form">
<input type="text" id="user_input" />
<input type="submit" value="submit" />
</form>



//jQuery
$('form#form').submit(function(){
var userVal = $('#user_input').val(); // grab the user input
var userVal = userVal.replace('&', '|'); // replace all the ampersands with pipes
alert(userVal); // you should see the replacement
});

That shows how it will work, now what you actually need to make it work for you would depend on the rest of your code.

teedoff
01-18-2011, 09:38 PM
you said, "I have a call function to display the form values back on my template before sending to the action page." Is that being done as the user types or is there a submission before it happens?

If there is some kind of submission then something like:


<form id="form">
<input type="text" id="user_input" />
<input type="submit" value="submit" />
</form>



//jQuery
$('form#form').submit(function(){
var userVal = $('#user_input').val(); // grab the user input
var userVal = userVal.replace('&', '|'); // replace all the ampersands with pipes
alert(userVal); // you should see the replacement
});

That shows how it will work, now what you actually need to make it work for you would depend on the rest of your code.

Ok Sorry, yes its submission that calls the form values from a temp file that store the form values in a list. Then the list is "called" and displayed on the current page. (in a list as well)


<form>
<div id="items">
<fieldset class="product-grouping">
<legend>Item 1</legend>
<div class="vendor" style="padding-left: 30px;"> <span>Vendor: </span>
<input type="text" class="vendor-input" name="vendor" />
<a href="#" class="add-vendor">add vendor</a>
<div class="vendor-products" style="padding-left: 60px;">
<div class="product"> <span>Product: </span>
<input type="text" class="product-input" name="product" />
<a href="#" class="add-product">add product</a> </div>
</div>
</div>
</fieldset>
</div>
<input type="button" id="add-item" value="add item" />
<input type="button" id="submit" value="submit" />
</form>

I can link to my application if you need to see it. Sorry I;m not doing a better job of describing my issue, as I said I'm very new to js.

btw: not that this should matter, but my application is a coldfusion template with jQuery to simply create a dynamic list. Shouldnt have a bearing on why the ampersand cant be used.

harbingerOTV
01-18-2011, 11:05 PM
Are you using jQuery ajax to send this to the backend? If so that would be the issue. For example if the user inputs a value of "Ham & Sons" into the input "vendor" it is going to be passed as:


YourPage.cfm?vender=Ham & Sons

The URL string containf the "&" is looking for another variable. By changing it to a vertical pipe it would look like:


YourPage.cfm?vender=Ham | Sons

and be passed alright. That can be stored just fine. Then when you want to redisplay the info, you can change all the vertical pipes back to ampersands.

Am I on track? If nt, yep, might need to see more of the relevant code, especially the jQuery of what happens on submit and on callback.

rnd me
01-18-2011, 11:33 PM
do the values not store, or do they just not display? "&" means something in an html tag that it doesn't in a textbox; you might simply need to escape the data for display purposes.

search for html escape and youll find suitable code. heck, there's even a good html escape function in all IIS and IE error pages...

teedoff
01-18-2011, 11:43 PM
Are you using jQuery ajax to send this to the backend? If so that would be the issue. For example if the user inputs a value of "Ham & Sons" into the input "vendor" it is going to be passed as:


YourPage.cfm?vender=Ham & Sons

The URL string containf the "&" is looking for another variable. By changing it to a vertical pipe it would look like:


YourPage.cfm?vender=Ham | Sons

and be passed alright. That can be stored just fine. Then when you want to redisplay the info, you can change all the vertical pipes back to ampersands.

Am I on track? If nt, yep, might need to see more of the relevant code, especially the jQuery of what happens on submit and on callback.

Well. I think, lol its not a form value thats passed in the url.

Here is the site (http://www.teed-younger.com/pagebuilder2/template.cfm).

The form in question is the Cross Reference Form near the bottom of the page. Try typing text in the vendor or product form fields and include an apmersand. Then click the ajax submit button UNDER the cross ref form. It will say...loading..... but will never display the form results. To get an idea of how its supposed to work, remove the ampersand and click the button again and you will see the form results displayed.

harbingerOTV
01-18-2011, 11:56 PM
$.ajax({
type: 'GET',
url: 'action.cfm?data=' + JSON.stringify(items),
dataType: 'html',
//complete: function(data){
//$('#results').html(data.responseText);
//$('#results').empty();
//$('#vendorProductList').show();
success: function() {

$('#results').empty();

var vendorProductListHTML = 'vendorProductList.cfm?' + new Date().getTime();
//alert(calendarEventsHTML);
$('#vendorProductList').empty().hide();
$('#vendorProductList').load(vendorProductListHTML);
$('#vendorProductList').fadeIn(250);

//$('#vendorProductList').show();
},
error: function() {
alert('fail');
}
});

I added the error : alert. It alerts fail on submit so the info is never being passed on.

teedoff
01-18-2011, 11:57 PM
Did you get the cross reference forms to work with any text? lol for some reason when I load my site from remote, it doesnt work period!

Works locally though.

harbingerOTV
01-19-2011, 12:06 AM
Nope doesn't work at all.

if i pass:

action.cfm?data={"Item 1":{"vendors":{"todd | sam":["stuff"]}}}
error:

The error occurred in C:\inetpub\vhosts\teed-younger.com\httpdocs\pagebuilder2\action.cfm: line 24
line 24:

24 : output = "#vendorProductList#">

so in the above, the data is being passed but, CF barfs on line 24.

if i pass:

action.cfm?data={"Item 1":{"vendors":{"todd & sam":["stuff"]}}}
error:

The error occurred in C:\inetpub\vhosts\teed-younger.com\httpdocs\pagebuilder2\action.cfm: line 4
line 4:

4 : <cfset results = deserializeJSON(url.data)>

In that test, the whole thing chokes because of the ampersand being passed.

So I would think that you need to change that ampersand because IT IS being passed through the URL which WILL cause if to barf. Once that is working then move to line 24 of you CFM and see what the deal is.

I haven't worked in CF in a couple years so not sure what I can help with at that point.

teedoff
01-19-2011, 12:43 AM
do the values not store, or do they just not display? "&" means something in an html tag that it doesn't in a textbox; you might simply need to escape the data for display purposes.

search for html escape and youll find suitable code. heck, there's even a good html escape function in all IIS and IE error pages...

Hi no the values are not stored or displayed because it chokes on the ampersand.

The form values are supposed to be stored in another page within an unordered list. Then those lists are displayed BACK on the current page using a cffile save

When I type plain text, the values are stored on this page then displayed with a cfinclude that pulls in the cffile save data.

When I try the ampersand, it doesnt even get to the temporary file to even be saved.
Yes as far as I know, I've tried every possible escape I can think of. I can display other common ascii code characters like apostrophes and commas, but others return a question mark. The & just chokes everything.

devnull69
01-19-2011, 07:30 AM
I did not quite understand the whole thread ... but whatever you do, you have to make sure the passed parameters are URI compliant. I.e. all of the non-compliant characters have been transformed into compliant ones

E.g.
" " => %20
"&" => %26

You can achieve this by using the encodeURIComponent(string) function on the parameter string in javascript before sending it.

teedoff
01-19-2011, 02:43 PM
Well I was also told that my ajax function, which was a GET, should be changed to POST.

Also that my JSON url.data needed to be included in my POST data instead.

I'm totally lost at this point!

So should I remove the url: 'action.cfm?data=' + JSON.stringify(items), from this:


$.ajax({
type: 'POST',
url: 'action.cfm?data=' + JSON.stringify(items),
dataType: 'html',
//complete: function(data){
//$('#results').html(data.responseText);
//$('#results').empty();
//$('#vendorProductList').show();
success: function() {

$('#results').empty();

var vendorProductListHTML = 'vendorProductList.cfm?' + new Date().getTime();
//alert(calendarEventsHTML);
$('#vendorProductList').empty().hide();
$('#vendorProductList').load(vendorProductListHTML);
$('#vendorProductList').fadeIn(250);

//$('#vendorProductList').show();
},
error: function() {
alert('fail');
}

});

});

But then Im not sure where the POST data is. Where am I supposed to move that line to?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum