Ok, I've been wondering what I'm doing wrong with a Knockout web app I'm trying to put together.
Here is the code excluding the AJAX service with my MVC PHP interface.
my.js = namespace declaration that I use for my app
data.js = contains static data which works to load the data into the view (leftPanel.php)
appViewModel.js = call the functions that loads the data from PHP server and declare the view model.
So, basically, here is the issue:
I've an AJAX Service that works and get the data as show in accounts_JSON.txt and currencies_JSON.txt. The JSON is well formatted and in the text files, I've only added returns to make it easy to read.
In appViewModel.js, the "getCurrencies" and "getAccounts" methods are called and work properly: iterate through the JSON data and put it in the specified array.
Then, at the end of appViewModel.js, I log in the Chrome console each step because I can't find out why "my.app.data.currencies" and "my.app.data.accounts" are logged as empty when they are not (screenshot_chrome_console.png).
Those arrays are populated before the ko.applyBiddings so if I were to use "my.app.data.currencies" and "my.app.data.accounts" to populate the view, it should work but it doesn't. Only the static data "my.app.leftPanel.currencies.list" and "my.app.leftPanel.accounts.list" works.
What am I missing? I really can't see!
Thanks a lot for your help :)
Well, I've solved my issue :) Thanks to this post (from Irakli Nadareishvili).
My problem was definitely the loading method of the data retrieved via AJAX. Using Underscore to load the currencies and the accounts first and when, and only when all is loaded, filteredAccounts is loaded since I need the full list of accounts.
Here is the final and cleaned-up code in case anyone is interested or stumble on the same problem.
Happy coding to all!
Related
Trying to fiddle around with site scraping. The example I'm using is this site:
http://www.oddsshark.com/nhl/computer-picks
With the goal being to use data to help with hockey pool etc etc
Now, when I do a simple fetch like:
var data = UrlFetchApp.fetch('http://www.oddsshark.com/nhl/computer-picks');
Logger.log(data.getBlob().getDataAsString());
None of the data in the body shows up. I assume its because the data is being retrieved from somewhere via javascript, but thats kinda the end of my rope in terms of understanding web development. I guess if that is the case, two parts,
How can I see where in that HTML that I'm grabbing the data is being fetched
and
How do I fetch it?
Thanks!
-Josh
This actually works. Since you are using Logger.log, you have to view logs (View -> Logs) in the script editor to see the fetched response, which I pasted here. Check it out.
I'm working on a project where it has a number of pages. Each page displays 10 rows where the layout that is using for each page is different. Until now I had the html code of each row in a javascript code and based on the page's url I was using the appropriate html code (if statement). The if statement is inside into a loop which is looping based on the number of rows. The results of the rows are coming from an ajax method. Now I want somehow to separate it so it can be more easily for me to maintain it, basically to remove the html code from the javascript and keep each row's html code into a different file.
Note: the Ajax is in a given time, is sending automatically requests to the php file for any new rows.
One solution which I came out is that I can use the php to create a variable with the html code .
Second solution is to create an array of each record with the html code and then pass it to jquery to print it.
Both solutions I don't know if are good solutions and can help me to maintain the project in the future.
You might consider a template library such as handlebars to help with templating. Frameworks such as AngularJS and Ember also excel at solving these kinds of problems.
Your Web Services API should be returning JSON though, not HTML fragments. Let the client build the DOM, and let the server focus on data.
You should return structured data (see JSON for example) to your AJAX request. This way, you can support multiple interfaces (e.g., a website, an application): each interface will get only the data, and will handle the rendering as it needs.
In your example, you ask for data via an AJAX request, your server responds with a JSON-structured response. JQuery reads it and converts it to javascript array thanks to jQuery.getJSON. With your array, you loop through each element and insert html elements into the webpage.
You have two options:
If your HTML templates is not changing frequently, the best way is to define html templates in your HTML structure using some java script template library (eg. Handlebars) and fill it with data from your AJAX (JSON) requests.
If your HTML templates change frequently or depends on some conditions (data) in row, you should create PHP partial views which generate proper html structure already filled with data.
For many rows it is better idea to create whole table server side to reduce requests.
I am developing my first website. At this time i am generating a new html design that would be a ticket.
From my main page, i will load this html when the user clicks the "See ticket" button. This html has a table which is filled on document.ready with javascript. The data used is a JSON created in the main page.
I coded a working solution using localStorage. The problem is that the next step is to convert that HTML website to PDF and the software i am using does not work properly with localStorage, so i need to pass the JSON from main page to the ticket page. I can't neither use URL encoding cause string could be sometimes longer than 2000 characters and it is not productive.
So i thought that maybe i could do and $.get call from the ticket.html to index.html and get the needed JSON. Is this approach correct, or is there any better solution?
Regards
As suggested earlier comments, you need to use serverside code to accept post params and you need to do a ajax post to send the data. This is very good approach. I have one more idea for implementing this.
Let say you open ticket.html in a window.open. And have a JS function ( say GetValue) in index.html, that returns JSON . So you need to get JSON in ticket.html.
You need to define a JS function in ticket.html , using windown.opener.GetValue() , you can get JSON value.
Hope, i am in same direction, which you need. If not, please clarify.
Other way, would be use iFrame and use message communication to pass large data between them, you are interested in this, please read this - https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
I'm using AngularJS (mainly the client side) and web2py (mainly the server side)together in an app.
I have an issue now.
At a point of the program, I use AngularJS to get some data from the client and these data are store in an AngularJS variable. I planed to use $http.post to submit these data to database directly, but it didn't work due to cross-orign problem.
Right now I'm trying to pass these data(they are in JSON format) back to web2py and let web2py insert these data to database.(similar to submitting a SQLFORM).
Is there anyway I could pass these data as an argument to an web2py function and invoke that function within javascript code?
Possible approach in my mind:
1) Since I could write python in html using {{}}, and I could write html in javascript, could I write python code within javascript using something like: document.write({{python code}}) ?
I tried this but whatever html I write it goes to a brand new html page. I also tried document.getElementById('testDiv').write("<p></p>"); But it doesn't work.
2)use ajax, I'm not familiar with ajax, any example will be really appreciated!
Any thoughts?
Thank you all!
ok so you got me lost for a second there, lets see if i got it right
1- angular as your frontend
2- python as your backend
3- you are rendering an html document in python and delivering it to the browser
4- since python template language uses {{}} as delimiter am assuming you changed the angulars delimiters too
either using ajax or reload you'll need to provide a python post handler script. that takes your data and makes the DB update. if this is going to be a pattern and you are going to be making AJAX CRUD operations, you should use angular resources ngResource if not a simple
$http.post(url,data).success(function(response){})
https://docs.angularjs.org/api/ng/service/$http#post
where url would be your form submission handler url.
if you where to use a form you'll need to set the target to an iframe hidden in your page and the response should a script tag that gets the scope pertinent to your controller and let him know the result of the operation. this is an old approach, but handy when it comes to send information to sites that don't allow CORS which by the way might be the solution to your problem, when storing data directly to your db, you might just need to enable CORS headers in your storage engine API and that should allow you to submit information even when coming from a different domain
After hours of struggles and countless google, here's my workaround solution:
Main problem: the data are stored in AngularJS but AngulatJS could not submit data to database through API due to cross-orign issue. But Web2py could submit data to database using sqlform.
My approach:
1.)When the user click the submit button, invoke 'ng-click="submitBtn()"'.
submitBtn() is a function of the ng-controller, which has access to the data.
2.)In submitBtn(), the function first write data into web2py's sqlform through
document.getElementById('inputId').value=$scope.data;
then the function click the sqlform submit button through
document.getElementById('submitBtn').click();
It took me a lot time to figure out those element ids of fields in web2py's auto-generated sqlform. The way to find them is using developers' inspect element tool in a browser and see the source code directly.
Hope this will help someone will face the same issue!
I followed Hartl's Rails tutorial where he does Ajax using RJS and sending javascript in the response to be executed on the client side to edit the DOM.
But what do you do if you want just JSON sent in the response and not send javascript. This also means the javascript to manipulate the DOM should already be in the html file on the client. Is there a tutorial as good as Hartl's book on how to do this in Rails. Presumably it would use Jquery and some other stuff maybe that I've not heard of to make the code not be a million lines?
My best attempt at an answer is that it really depends on the scope and complexity of what you're trying to achieve. Generally, JSON shows up in views. If your application does not require you to dynamically retrieve JSON, that is, you can load it all when the view is initially rendered, then you can set an instance variable in your view's controller like so
#my_json = some_object.to_json()
Then, your instance variable is available in your view
<script type = 'text/javascript'>
var theJSON = <%= #my_json %>
</script>
Now, your data is available in the DOM, parsed nicely into JSON.
If your application requires you to dynamically retrieve JSON after the controller/view are loaded, then you should probably look into using AJAX to hit a particular controller's method that returns the JSON that you desire.
Here's a good RailsCast that can hopefully help you along your way Passing Data to Javascript
You should take a look at Ajax in Rails 3.1 - A Roadmap.