Form Submit differences in Firefox and Google Chrome (ColdFusion) - firefox

A few days ago i've made a little Coldfusion 9 script, but somehow after submitting the form the query won't run in Firefox. Everything works well in Google Chrome, but not in Firefox.
I've tried to Google it, but i can't find anything that relates to this problem. If something is unclear for you after reading this - just ask and i'll try to explain it better to you.
The script can be found on: http://pastebin.com/Bic28B3L
Kind regards,

You can leave your script as it is and replace
<cfif IsDefined('form.submit')>
with
<cfif CGI.REQUEST_METHOD IS "POST">
to check if the form was submitted.

My guess would be that FF and Chrome are handling the form element generated by this line differently:
<cfinput type='image' src='http://linehotel.org/c_images/bot_buy.png' name='submit' value='Koop deze badge nu'>
it looks like your code is checking that form.submit exists, so I would look at the source that this tag generates.
The other thing to try would be to install and run Fiddler and use it capture the submissions made by Chrome and FF and compare the two, particularly look at the WebForms tab on the request section. There'll be a difference there if it's browser-related.

The culprit is two-folds:
<cfinput type='image'...>
And
<cfif IsDefined('form.submit')>
Coldfusion will generate the HTML for your CFINPUT like this:
<input type="image"...
And Firefox will generate a form post like this:
submit.x: mouseclick x coords.
submit.y: mouseclick y coords.
Firefox will not return the name of the image in the form post. It will only return the X and Y values of the image map. What you will probably have to do is replace the <CFINPUT> TAG with an HTML <INPUT type="submit"> button and use CSS to apply an image to it. You may even consider checking for some other form variable in lieu of the submit button.

Looking at your code, you may also want to look at the cfqueryparam tag to help protect against sql injections and you may want to do your calculations outside the cfquery rather than in it... for example:
<cfquery name = "pay" datasource = "#DSN#">
UPDATE users
SET bots=#user.bots#-1
WHERE id=#user.id#
</cfquery>
may be better like this:
<Cfset xBots=user.bots-1>
<cfquery name = "pay" datasource = "#DSN#">
UPDATE users
SET bots=<cfqueryparam cfsqltype="cf_sql_integer" value="#xBots#">
WHERE id=<cfqueryparam cfsqltype="cf_sql_integer" value="#user.id#">
</cfquery

Related

Web scraping from youtube with nokogiri

I want to scrape all the names of the users who commented below a youtube video.
I'm using ruby and nokogiri.
require 'rubygems'
require 'nokogiri'
require 'open-uri'
url = "https://www.youtube.com/watch?v=tntOCGkgt98"
doc = Nokogiri::HTML(open(url))
doc.css(".comment-thread-renderer > .comment-renderer").each do |comment|
name = comment.css("#comment-section-renderer-items .g-hovercard").text
puts name
end
But it's not working, I'm not getting any output, no error either.
I won't be able to give you a solution, but at least I can give you a couple of hints that may help you to move forward.
The code you have is not working because the comments section is loaded via an ajax call after the page is loaded. If you do a hard reload in your browser, you will see that there is a spinner icon and a Loading... text in the sections comment, waiting for the content to be loaded. When Nokogiri gets the page via the http request, it gets the html content that you see before the comments are loaded. As a matter of fact the place where the contents will be later added looks like:
<div id="watch-discussion" class="branded-page-box yt-card">
<div id="comment-section-renderer"
class="comment-section-renderer vve-check"
data-visibility-tracking="CCsQuy8iEwjr3P3u1uzNAhXIepAKHRV9D8Ao-B0=">
<div class="action-panel-loading">
<p class="yt-spinner ">
<span class="yt-spinner-img yt-sprite" title="Loading icon">
</span>
<span class="yt-spinner-message">Loading...</span>
</p>
</div>
</div>
</div>
That is the reason why you won't find the divs you are looking for, because they aren't part of the html you have.
Looking at the network console in the browser, it seems that the ajax request to get the comments data is being sent to https://www.youtube.com/watch_fragments_ajax?v=tntOCGkgt98&tr=time&distiller=1&ctoken=EhYSC3RudE9DR2tndDk4wAEAyAEA4AEBGAY%253D&frags=comments&spf=load. As you can see the v parameter is the video id, however there are a couple of caveats:
There is a ctoken param, which you can get by scraping the original page contents. It is inside a <script> tag, in the form of
'COMMENTS_TOKEN': "<token>".
However, you still need to send a session_token as a form data in the body of the AJAX request (which is a POST). That I don't know where is coming from :(.
I think that you will be pushing the limits of Nokogiri here, as AFAIK it is not intended to follow ajax requests or handling Javascript. Maybe the ruby Selenium driver is better suited for this.
HTH
I think you need name.css("#comment-section..."
The each statement will iterate over the elements, using the variable name.
You may want to use node instead of name:
doc.css(".comment-thread-renderer > .comment-renderer").each do |node|
name = node.css("#comment-section-renderer-items .g-hovercard").text
puts name
end
I wrote this rails app using nokogiri to see all the tags that a page has before any javascript is run in the browser. The source code is here, so you can adjust it if you need to add more info about the node in the view.
That can easily tell you if the particular tag element that you are looking for is something you can retrieve without having to do some JS eval.
Most web crawlers don't support client-side rendering, which gives you an idea that it's not a trivial task to execute JS when scraping content.
YouTube is a dynamically rendered JavaScript website, though it could be parsed with Nokogiri without using Selenium or another package. Try open the Network tab in dev tools, scroll to the comment section, and see what request being send.
You need to make a post request in order to fetch comments data. You can preview the output in the "Preview" tab.
Preview output:
Which is equivalent to this comment:
Note: Since this comment brings very little value, this answer will be updated with the attached code once there will be an available solution.

Selenium File upload

How to automate Uploading a file using selenium.
How to give file Path ??
My TextBox is Readonly. I cant type the file path directly in the textbox.
Also, how to stop the selinum server until that file completely uploaded.??
My File upload field is a invisible field. And i found its code using firebug add on.
Before adding a file code is like this.
<input id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" type="hidden" name="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" autocomplete="off" value="{'isEnabled':'true','uploadedFiles':[]}">
And after adding a file(doc file). The code changed to
<input id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" type="hidden" name="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" autocomplete="off" value="{'isEnabled':'true','uploadedFiles':[{"fileInfo":{"FileName":"scope.docx","ContentType":"application/vnd.openxmlformats-officedocument.wordprocessingml.document","ContentLength":12887},"metaData":"/wEFsAF7IlRlbXBGaWxlTmFtZSI6ImZyeWd1NGNqLmt1YSIsIkFzeW5jVXBsb2FkVHlwZU5hbWUiOiJUZWxlcmlrLldlYi5VSS5VcGxvYWRlZEZpbGVJbmZvLCBUZWxlcmlrLldlYi5VSSwgVmVyc2lvbj0yMDExLjEuNTE5LjM1LCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPTEyMWZhZTc4MTY1YmEzZDQiffOraDjiYXPavAAMYOUAVVhGEKk8"}]}">
What is the Xpath here?
I tried with xpath id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState". The code which i used is
selenium.type("id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState","c:\\docfile1.doc");
But its not working.
Help Me..
The XPath expression for this input would be //input[#id='ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState'].
However, I fear this won't work since Selenium usually refuses to work with invisible elements. Also, hidden <inputs> are usually just containers for pre-filled data or containers for script-validated-and-edited data.
You should be looking for a <input type='file' /> if there's some, or maybe a javascript handling the click on the enclosing element (but, frankly, that's usually not the case - the scripts tend to act on edit of the input, not on the click on them).
If you can't find it, post some more code. The best thing would be a SSCCE, so take the source of the page and make it naked, strip everything unnecessary for us from it. We love code. And we love anything that's naked.
And about the wait for the upload to be complete: There's no such default thing. If the file is sent during a usual form upload (by clicking the Submit button), then the browser will wait. If it is uploaded immediately, you'll have to wait smartly. Realize what changes after a successful upload, then wait for that element/message to appear. With Selenium 2 (WebDriver), this can be done very easily.
You can use
selenium.type("xpath of text box","path of your file")
OR for IDE
command=type
target=xpath_of_text_box
value=Path_of_your_file
example:
selenium.type("id=cvfile", "D:\\Automation\\resume.doc");

DOMDocument and FBML/Google + Button not working

Well I'm having a bit of an issue, I have an application that uses DOMDocument to display some content but it is removing some code that is needed for FBML and a Google +1 button to display.
For example, Facebook's like button is <fb:like>, it is removing fb: from the string. Google's +1 button is like <g:plusone> and it's removing g:.
Is there any way to make it not remove that part of the code?
You can solve both issues.
With Facebook like button, you will want to use the HTML5 version. See: https://developers.facebook.com/docs/reference/plugins/like/
ex: <div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
With Google's Plus one you can use the HTML5 version as well. See: https://developers.google.com/+/plugins/+1button/
ex: <div class="g-plusone" data-size="tall" ... ></div>

FB + Twitter share buttons + FB Like button === huge performance issues

My brand new job is full of wonderful and awful surprises. one of the most interesting part of this job is the will to enhance, accelerate, make everything scale.
And today, first real problem.
Here's the deal : we get up to 20 list elements, each one of them displaying its own Facebook share, Twitter share, and Facebook Like button.
As you can imagine, 60 iframes opening is just a pain for user experience.
My question : anybody has already been facing such problems, and what would you recommend to upscale these performance issues ?
While I'm thinking of an AddThis implementation, I hope there are other solutions I could consider.
Best way to improve performance is not to copy paste the code from facebook plugins.
Facebook 'Like Button' code looks like:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Issue with this is, if you have 20 like buttons, then 20 Divs are created with id="fb-root" and 20 times the script for all.js is called. Best way is to move the
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
to header of page and whenever you want a like button, only use
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Same goes for facebook comments & other plugins.
Also, foir some plugins facebook provides option to either use xfmbl or iframe code. Always pick the iframe code because facebook's js has to parse all xfbml code and convert to iframe. It causes a lot of DOM insertions and slows down the page.
Hope this helps!

Firefox 3.5.2 Refresh(F5) causes Highlighted Form value to get copied to next field

I am having a strange issue in Firefox 3.5.2 with F5 refresh.
Basically, when I focus on an input field and hit f5 the contents of that input field gets copied to the next form field after the F5 refresh.
But, if you inspect the HTML source code, the values are correctly loaded.
I am not having this issue in IE8 or Safari 4.0.3.
The problem does not occur if I do a hard refresh or run window.location.refresh(true).
After F5 Refresh: http://i805.photobucket.com/albums/yy339/abepark/after.jpg
Here's an overview of what's going on.
I believe the thing you should look into is the autocomplete attribute,
you should set it to off on the input box. However be careful since this will trigger two effects.
When you refresh the page it won't remember the old values
The default dropdown of the already used values on that input box will also be disabled.
If you want to keep the second behavior you should set the autocomplete attribute back to on with JS.
Browsers can remember form field contents over a refresh. This can really throw your scripting off if it is relying on the initial value of a field matching what's in the HTML. You could try to prevent it by calling form.reset() at the start.
Different browsers have different strategies for detecting when a form or a field is the same as in the previous page. If you have clashing names, or names that change on reload, it is very possible to end up confusing them. Would have to see some code to work it out for sure.
In the backend, I am using ASP.NET MVC 1.0 with the Spark View engine. When I examine the source code after an F5 refresh in Firefox 3.5.2, the page renders correctly; however, if you look at the page visually the adjacent form field field gets populated with the value from the previous field.
I included enough code so you can just get an idea of what I'm trying to do.
Again, the rendering is fine and the final view/HTML code is fine. It's what I see on the screen that is incorrect. I am using hidden vars; but the issue occurred before using it as well.
Note in the code below, I have 2 distinct ID fields: "date_{projectTask.ProjectTaskId}" and "finishDate_{projectTask.ProjectTaskId}, which gets renders to something like "date_1" and "finishDate_2".
<table>
<for each="ProjectTask projectTask in projectTasksByProjectPhase">
<input type="hidden" value="${projectTask.ProjectTaskId}" />
<tr>
<td class="date">
<div class="box">
<div class="datefield">
<input type="text" id="date_${projectTask.ProjectTaskId}" value="${startDate}" /><button type="button" id="show_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
<td>
<div class="box">
<div class="datefield">
<input type="text" id="finishDate_${projectTask.ProjectTaskId}" value="${finishDate}" /><button type="button" id="finishShow_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
</tr>
</for>
</table>
FYI: ${} are used to output variables in the Spark View engine.
I am also using the YUI 2.7 Connection to make Ajax calls to update the datebase for "change" and "enter/tab key press" events. I am able to verify that the AJAX calls are made correctly and the form field values are still valid.
The problem occurs when I just do a F5 refresh; for some reason, the "finishDate_1" gets populated with the value from "date_1".
This problem occurs just by clicking on "date_1" and hitting F5; so, the adjacent field just gets populated even if there are no AJAX calls.
Here's the Javascript code I call towards the end of the body"
YAHOO.util.Event.onDOMReady(
function() {
var idList = YAHOO.util.Dom.getElementsBy(function (el) { return (el.type == 'hidden'); }, 'input');
len = idList.length;
var startDatePickers = new Array();
var finishDatePickers = new Array();
for (var i = 0; i < len; i++) {
var id = idList[i].value
startDatePickers[i] = new DatePicker("date_" + id, "show_" + id, "cal_" + id);
startDatePickers[i].valueChanged.subscribe(updateDate, 'S');
finishDatePickers[i] = new DatePicker("finishDate_" + id, "finishShow_" + id, "finishCal_" + id);
finishDatePickers[i].valueChanged.subscribe(updateDate, 'F');
}
}
}
The form field gets copied over before any Javascript code is processed because I call the Javascript code towards the end of the body after all HTML is rendered. So, I'm guessing it's a refresh issue in Firefox? What do you guys think?
As you can see above, I created my own calender date picker objects which allows you to either enter the date in the text manually or by clicking on a button to view the calendar and select a date. Once you enter or select the date, an AJAX call will be made to update the datebase in the back end.
Thanks everybody for the quick responses.
#Anonymous: whoever you are, you are awesome!
#bobince: thanks for the feedback as well.
I added a dummy form tag with the attribute autocomplete="off" and that solved the problem!
I was scratching my head because I didn't get this issue in Safari 4.0.3 or Internet Explorer 8.
<form action="" autcomplete="off">
<!-- my code -->
</form>
The values were loading correctly in the back end (ASP.NET MVC 1.0/Spark View engine) and the HTML source code reflected this, but the input field values were not getting populated correctly. I was using the YUI Connection Manager and Javascript to support edit-in-place and the date pickers.
I tried changing the XHR call to a GET call instead of POST and the same issue was happening.
Anyway, the problem was that the Firefox was not setting the correct values for the input fields for F5 refreshes.
Again, thanks so much! You guys rock!
All element id's must be unique, if two elements have same id's then that could be reason why Firefox inserts same values to elments that didn't orginally have those values entered.
I had a similar problem related to my question at Input control shows incorrect value, even 'though inspect element shows the right value is there
The problem occurred for me in Firefox, but not Chrome, for some but not all controls on the form, and when I pressed F5, but not ctrl-F5.
The "dummy form" seems to have resolved it for me.

Resources