When I open a blank form to add new row to the grid, I need some fields on the form to be dynamically updated by going to the database to search for data if I change a field on the form.
I found the code in the javascript to create a form for adding new row, may I change it to read from an external file (like an asp, php page) or is there any way to do it properly??
You must use ajax to make calls to proper functions and change your html according to response data.
More info about ajax
Jquery supports ajax and have many nice features for ajax usage and let you have nice page alteration based on html DOM. So i advice you to have a look at it...
Related
I would like to dynamically include different php files, containing a form (which is different for any entry in the dropdown), while changing a dropdown .
Even using jQuery would be ok.
I read that jQuery works client side, while php server side, so looking for an alternative.
basically I would like to have something like this code.
If value of the dropdown is 1 then include file1.php, if it is 2, then include file2.php, and this before pressing a button, but only while changing the dropdown.
You could try using AJAX, using the onChange option on a dropdown (select) run a ajax request. Check which ajax file to load using the select value and display it.
Here is a quick how-to on ajax, http://www.w3schools.com/ajax/ajax_intro.asp
Ajax can update a page without reloading it.
I'm building a webpage in web2py.
The effect that I want to achieve is a form that one can submit in the usual way, but where the html page containing the form also features an html canvas which is managed by js code that is able to dynamically see the contents of the form. This enables a sort of preview to be seen live as the user changes the contents of the form and updated continuously prior to the user submitting the form.
It seems there are two challenges to doing this.
1.) web2py likes you to define forms in the controller which generates to form code automatically - I don't see a way to add extra elements in the middle of the form by editing the html page.
2.) I don't see any way to get js code to dynamically read the values entered into the form.
Any suggestions of how to do this would be much appreciated. I'm new to web2py but have spent quite a while trying to figure out how to get this working
Thanks!
1.) web2py likes you to define forms in the controller which generates to form code automatically - I don't see a way to add extra elements in the middle of the form by editing the html page.
Regarding the above, letting web2py generate the form HTML is an optional convenience. If you need custom markup, you can do that as you normally would. There are also ways to add form elements to web2py's server-side DOM representation of the form.
See:
http://web2py.com/books/default/chapter/29/07/forms-and-validators#More-about-manipulation-of-FORMs
http://web2py.com/books/default/chapter/29/07/forms-and-validators#Adding-extra-form-elements-to-SQLFORM
http://web2py.com/books/default/chapter/29/07/forms-and-validators#SQLFORM-in-HTML
http://web2py.com/books/default/chapter/29/07/forms-and-validators#Custom-forms
I am trying to add multileg travel information using PHP, jQuery and MySQL. I present to users with existing data and then they dynamically add travel leg information to their existing visit. What I have done so far is below.
Bind data (PHP -MySQL) to the HTML table. Show add new button the user.
When the user clicks on add new, I have used jQuery to clone the data and this has dynamic id.
On the form there is file upload as well which needs to upload the file and also save information in the database.
My problem is how can I rebind the data on the table without effecting any other thing. I have tried to use jQuery load but it tries to reload the entire page rather than just reloading the newly generated trs.
I am open to change my logic on the whole as to how I do this.
Appreciate any help on this.
I have a summary view of a database table. When clicking on a row in the table, I'd like to have a popup showing the full data plus some controls for manipulating that item. I've attached a click handler to the item, which then grabs the primary key from one of the table cells in the row. How can I now pass this primary key to ASP.NET and run server code to query my database and update my UI?
If you're using jQuery, you probably want to use the jQuery.ajax() or jQuery.getJSON() functions to make ajax calls to your backend server which can then return data from your database.
You can then use that returned data to construct the popup and insert the popup into your page to show it to the user.
Within the click handler, you need to make a call to an exposed page /somepage.aspx?id={yourid} which should return the HTML blob that you want to render within the popup you've created.
You can use the JQuery.load method to do this for you, taking the html generated by your page and transferring it to your popup in one line.
$('#your-popup-id').load('database-summary.aspx?id=1');
There are other methods, where your page or generic handler can return JSON, which you then parse after making the callback, but this is not the way I would go if you're just starting out.
If you want help with the popup itself, then you can use a library like qTip2 which has built in Ajax > Popup methods, making the task even easier.
This question is very broad, so I'll keep my answer pretty general. The basic idea is that you want to make an AJAX call from your page to your server, include the key in that call, and then when the AJAX call returns use the response to update your UI.
This question has been asked before: Access <asp:table> table rows added by javascript in asp.net webform . Apologies for the duplicate question but I'd really like an explanation why this is the case. It is probably due to my lack of understanding on how browsers process HTML tables on submission to the server.
If I have a <HTML> table or an <asp:table> control on an aspx page and I add rows to it client-side using JQuery / Javascript, why can I not include these added rows in a post-back to the server?
I've been trying to get this to work and it looks like I can't do it based on the answer to the previous question. But can someone explain why this is the case? The table itself can be returned in the post-back but the only rows present are the rows that were part of the table when it was sent to the browser originally - it does not include the rows added by the browser.
I would have thought there was a way to include these new rows in the post-back, the same as any client-side user input?
You could do something like this:
// Get the data from your table into an array
var tableData = [];
$("table tr.some-class").each(function () {
var row = [];
$(this).find("td").each(function () {
row.push(this.innerHTML);
});
tableData.push(row);
});
// Make your form
var form = $("<form>").attr("action", "some/path/on/server")
.attr("method", "post");
// Make a form field with your tableData (JSON serialized in this case)
var tableInput = $("<input>").attr("type", "hidden")
.attr("value", JSON.stringify(tableData));
// Some browsers require the form to be in the dom before it'll submit.
$(document.body).append(form);
// Add the field to the form and submit
form.append(tableInput).submit();
This is a basic implementation of this answer.
When performing a POST operation to the server, only the values included withing the <form> element being posted will be included. These are serialized as Key/Value pairs and can be inspected using tools like FireBug and the Chrome Developer Tools.
Regular HTML elements are not sent back to the server. What I mean is that things like <div> or <table> elements don't go back to the server, only the values of the form.
Unfortunately ASP.Net hides a lot of these details from you. It is magic! That is both a good and a bad thing. It makes it easy to work blissfully ignorant of the nitty gritty details of how HTTP works under the hood, but can be a source of pain when you really need to know those details.
You could always simulate with AJAX by putting the table and the button in an update panel, and appending rows in the button click event.
To the client, there is no difference between asp:table and table. They are one and the same. To really answer the question, we have to think about what is going on server-side, as that is where the difference between an asp:table and a table lies.
When you create an asp:table, you are likely binding with some data. The only way the server thinks the table will change is if the data changes. So that is where you need to look to get your table changing, change how it binds. If you change your table client-side, you need to mirror those changes server-side. I'm not sure how your data and table are set up, but there are many ways this can be done.
At the simplest, you may "postback" the new rows in an element, and when you process the asp:table server-side, check for the data that would be posted back and add the appropriate rows.
Alternately, if you are in a position to change the data which binds the table, you could do that as well.