openlayers 2 - Unable to create WFS successfully

I know there has been lots of WFS assistant and I did follow this one word by word, which I found was the best in the entire gis stack but still no clue why I am unbale to render a WFS on base map.

Here is the code,

var map = new OpenLayers.Map("map-id");
            var bio = new OpenLayers.Layer.WMS(
              "bio11",

              "http://localhost:8080/geoserver/iPlant/wms",
              {layers: 'iPlant:bio11'}
            );
            var imagery = new OpenLayers.Layer.WMS(
                "Global Imagery",
                "http://maps.opengeo.org/geowebcache/service/wms",
                {layers: "bluemarble"}
            );

            /*var QuebecSpecies = new OpenLayers.Layer.WMS(

              "AllQuebecSpecies",
              "http://localhost:8080/geoserver/iPlant/wms",
              {layers: 'iPlant:AllQuebecSpecies'},
              {'opacity': 0.4, 'isBaseLayer': false, 'visibility': true}
            );*/

            var QuebecSpecies = new OpenLayers.Layer.Vector(
            "AllQuebecSpecies",
            {
                strategies: [new OpenLayers.Strategy.Fixed()]

                , projection: new OpenLayers.Projection("EPSG:4326")
                , protocol: new OpenLayers.Protocol.WFS({
                    version: "1.1.0",
                    url: "http://localhost:8080/geoserver/wfs",
                    featurePrefix: 'iPlant', //geoserver worspace name
                    featureType: "iPlant:AllQuebecSpecies", //geoserver Layer Name
                    featureNS: "http://geoserver.org/iPlant", // Edit Workspace Namespace URI
                    geometryName: "the_geom" // field in Feature Type details with type "Geometry"
                })
            });


            map.addLayers([imagery, bio, QuebecSpecies]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));

As you can see in the code i have commented out the part where I am using the same layer as WMS, where it works perfectly fine, but then it does not overlay on the base map (meaning Quebec layer is a point shapefile had so the rest of the space is white background which covers up the base raster, that is why I have set the transparency to be 0.4).

Help me out guys, really tired of finding and trying and having no luck.

UPDATE

I moved the shapefile folder of mine to www folder and also changed the store location folder to www.

Workspace : iPlant Store Name : SpeciesShp FeatureLayer : AllQuebecSpecies

Is there some other way to add shapefile to Geoserver for using it as a WFS?

UPDATE 2.0

Since there were suggesstions of maybe my html file is not in the right folder, I now have my HTML file in /var/www/test.map/html as well as /var/lib/tomcat6/webapps/test.map.html. Still no luck, WFS does not show up :(

This is the error I am getting in develoepr tools,

XMLHttpRequest cannot load http://localhost:8080/geoserver/wfs. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

UPDATE 3.0

Ok thanks to more suggesstions now I have my map.html in /var/lib/tomcat6/webapps/geoserver/data/www/map.html. Now I can still work with WMS but now if i try to use WFS, the error I can see in the developer tool is

Uncaught TypeError: Cannot read property 'Fixed' of undefined

Also the map container itself disappears.

HELP!!!

Answer

Since you have this error:

XMLHttpRequest cannot load http//localhost:8080/geoserver/wfs. Origin http//localhost is not allowed by Access-Control-Allow-Origin.

It's now for sure that your html files are not served from within the www folder of GeoServer. What u've been using is www folder of other servers installed on your machine.

Here is the tutorial I followed step by step to setup a WFS layer served from another folder than www of GeoServer link.

If you want to now more about why you're getting the HTMlHtppRequest error and why you need to setup a proxy to avoid it, look at this link

Finally, I recommand strongly that u first run your WFS test from the GeoServer/data/www folder and only if that works, then you can run it from www folder of other servers. This way, if any error occurs, you'll be sure that it has nothing to do with your OpenLayers code. Instead, it will be due to some misconfiguration of proxy between your GeoServer and the server whose www folder contains your HTML files.

Hope this helps!