I have a .html which is a form with some selects, inputs.. in JQuery Mobile. The form is generated dynamically because at first I ask to a web service for the data needed, so once I have the information from the server I start to 'paint' the html with Javascript (For example: if (string) document.write + ...) It is working fine but now I have to get that data and send it back to the server.
My doubt is that I don't know if there is a 'best' way to do it. I have thought in generate and store the ID's from each parameter and the type in a array at same time I paint them and after ask them about the values.
It could be done that way? I have read about generate an array when clicking 'submit' and then generate the parameters but I can't see it clearly because I don't send that data literally, I have to process it first generating and XML and that stuff.
I know it could sound like a mess =(, sorry for my english and thanks in advance.
EDIT:
This is an example of my JS code
So it could generate 1, 2, 3.. infinites Strings interfaces (well, not that much) so if I want a function to recollect the values of the 'inputs', 'selects'... generated, how could I do it?
Tutorial to form post
Basically you specify the form to post to a specific URL, and then you just need your server to handle the response. The link above should be helpful in figuring it out! Alternatively, you can use AJAX to send data as well. Let me know if you have any questions!
Related
My limited experience in web development as a self-taught led me to hit a wall while trying to figure out how to deal with this problem.
I need a form (map_settings.php) where the user should enter some inputs. Those inputs must be saved in a database table (MAPS) and then used to create the final HTML file (e.g. map1.html) for that specific user/inputs.
I know how to deal with using forms and saving submitted data to a database.
What is completely obscure to me is how can I use those inputs to automatically generate the final HTML.
My idea is to have a template HTML (template.html) and each time a user saves new settings via the form, I copy the template and replace some variables inside it with the actual data the user has input in the form.
If this might matter, the variables I need to replace in the template are also JavaScript variables within a <script> tag.
Can anybody help me suggesting one viable way to do this? I am mostly using JavaScript and PHP, without frameworks. I've also red about JavaScript templating engines, but I sincerely did not get if those are useful to me in my case.
Anyway, here is an illustration of what I would need to do, to hopefully clarify better my point.
Creating a static HTML file per user is not the way to go. Instead just have a PHP script like mapdisplay.php or similar.
Make the script so that if you type mapdisplay.php?map=1 in the browser then it will read the map ID, get the relevant settings from the database for the map in question and then generate some HTML to display them - of course you can have most of the HTML ready made like a template, and just use PHP to fill in the details from the database. This idea of getting data on the fly when requested, and plugging it into some HTML is how most web applications work.
If you create a static HTML for each user it quickly becomes unmanageable with a large number of users, plus it's hard to introduce changes or improvements to the template because instead of just updating one script file, you have to back and re-do every existing page. There are other disadvantages to your approach too, but I won't continue here - you get the idea I hope.
If I were you I'll make that in this way:
Don't use template.html
Don't get data from database to new file, but from form
Make database test before make file
To make template use
$template_text = "text...text...html...text...".$php_varible."text...text...html...text";
For other things about php see w3schools
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 need to write a program that checks a URL: if there is a form, it needs to fill in all text boxes with a specific string, and submit it.
I have already written the function that loads the form using http.request. At this point, I need to analyse what comes in, and submit it.
What's the best way to do it? I could:
Place the response in a DOM representation and parse it that way with https://github.com/tmpvar/jsdom
Use a headless browser like https://github.com/assaf/zombie to handle things. Note that the number of open and un-responded issues in the project worries me
Am I missing something? Maybe a much better way to go about this?
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!