Using jquery .load() in Rails

Question

I want to fetch a table from a .html file and show it in a div in my .html.erb file... I tried with loading a simple .txt file as below but its now working.. Please let me know what changes are to be done. Am I going wrong in giving the path??

app/view/account/show_result.html.erb:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">

    function showy(count){
         alert(count);
        $("#quickview").load("D:\sample.txt");
        return true;
     }

</script>
</head>
<body>
<h3>Recent Test Results</h3><br>
<div id ="quickview">
    HELLO
</div>
// for loop with index i
<a id="repo" href="" onclick="showy(<%= i %>)" >Quick view!</a>
//some other code
</body>
</html>

Update1: I actually want to access a HTML file in the public folder of my app. The path goes like this.. RORapp/public/reports///.html file

      $("#quickview").load("http://localhost:3000/reports/"+userid+"/"+fold+"/overview.html #overviewTable");

Update2:

When I just the copy the url(http://localhost:3000/reports/"+userid+"/"+fold+"/overview.html) and open in browser, i can see the html page.. But when i try to load a part of it, I'm not able to do it..In cmd , I get an error saying

AbstractController::ActionNotFound (The action 'reportng' could not be found for AccountController):

account is my main controller, and reportng is the css file used for styling of that html page

On checking the console for errors, I got the following error ( on pressing F12 in browser)

TypeError: element.dispatchEvent is not a function
fire()protot...?body=1 (line 4072)
element = Object[Document show_test_results]
eventName = "dom:loaded"
memo = undefined
_methodized()protot...?body=1 (line 257)
fireContentLoadedEvent()protot...?body=1 (line 4106)
[Break On This Error]   

element.dispatchEvent(event);

Solution: Now apart from loading the reqd html file , I'm able to change the attributes too :)

    function showy(count){
        var linkDiv = $('#repo_'+count);
        var fold = linkDiv.data('folder');
        var userid = '<%= self.current_user.id %>';
        var server = '<%= request.host_with_port %>';

        $( "#success_"+count ).load( "http://"+server+"/reports/"+userid+"/"+fold+"/overview.html #overviewTable" , function(){
            $("#success_"+count).find("a").attr("href","http://"+server+"/reports/"+userid+"/"+fold+"/suite1_test1_results.html");
        });

         **SOME CODE**

}

You most likely need to be working with a server. I check the javascript console for errors - I'm guessing you'll see one about "Not Allow By Cross-domain Policy" — ahren, Oct 30 '13 at 12:40
I'm using webrick server.. I'm starting it on my machine .. and accessing the app as http://localhost:3000 — Aks.., Oct 30 '13 at 12:43
Then your path to `sample.txt` should look something like `http://localhost:3000/path/to/sample.txt` (or be a relative path) — ahren, Oct 30 '13 at 12:44
Cool, glad you sorted it out. You can load HTML in the same way. Remember to accept Rory's answer below to confirm that the problem is fixed. — ahren, Oct 30 '13 at 12:57

score 2 · Accepted Answer · answered Oct 30 '13 at 12:40

2

AJAX calls to locations local to the client machine are blocked by the browser for security reasons.

For this to work you need to put it online, or use a local server, eg: http://localhost/mysite

answered Oct 30 '13 at 12:40

Rory McCrossan

331,213
40
305
339

I'm using webrick server.. I'm starting it on my machine .. and accessing the app as localhost:3000.. I'm new to ROR.. Can you pls explain what needs to be done?? When I used the same code in a normal .html file, the .load() function did work.. – Aks.. Oct 30 '13 at 12:44
You need to access the `sample.txt` via a URL on your localserver, eg. `http://localhost:3000/folder/sample.txt` or even a relative path from the root: `/folder/sample.txt`. The problem is because you are using a local URI (the `D:` drive). – Rory McCrossan Oct 30 '13 at 12:45
I did it but its not working.. I need to access a html file in public folder of my ROR app..(public/reports/1/overview.html) How can I get the path for that?? I tried this $("#quickview").load("http://localhost:3000/../../sample.txt"); and $("#quickview").load("http://localhost:3000/reports/"+userid+"/"+fold+"/overview.html #overviewTable"); – Aks.. Oct 30 '13 at 13:17
Yeah I have given http://.. Here while creating link its not showing. Is my url right? – Aks.. Oct 30 '13 at 13:22
In that case check the console for errors (press F12 in the browser) – Rory McCrossan Oct 30 '13 at 13:23
Please check my update on the error I got in console on pressing F12 – Aks.. Oct 31 '13 at 11:17
Finally its working.. Thanks for ur help.. I'll update my question with the solution. – Aks.. Nov 08 '13 at 08:33

Using jquery .load() in Rails

1 Answers1