I have a problem posting from ajax elements.
I created a php page that reads some data from the database and renders a html page with a table inside. The user can modify the values in the table and submit the changes to the database.
Everything worked fine, but I needed to dynamically update the content of part of html table. So, I put a tbody element in the page and used a js function to load elements inside the tbody element. My js function uses a XMLHttpRequest object to call another php page. The second php page reads the database filtering the data by the input posted variables and creates a html table that is sent back to the first php page. It works perfectly, my html table is filled with data dynamically read from the database.
My problem is when I try to submit the data changed in the table: I can read with the _REQUEST all elements of the first php page but not the section created with ajax so I can't update my database. If I check the content posted to the second page, I can see that the table section is not posted at all. Also, in the first page I can read the elements ID and NAME of the table with a js script, so they are in the first page but they are not posted to the second page.
Do you have any suggestion?
Related
It's another late night and another seemingly simple issue that's causing a headache!
So, here's the situation. I have a simple HTML form that's in a Bootstrap modal. When this form is submitted, there's an AJAX POST to a receiving page, SESSIONS are set and the request is then forwarded to a simple DB query. This all works.
What I want to do is show the sessions on the original page without a page refresh.
I thought this would be easy so I tried using this on the original page;
$('#filteroptions').on('hidden.bs.modal', function () {
$("#breadcrumbs").load('includes/files/private/breadcrumb.php');
});
breadcrumb.php holds the output format and the file is populated immediately after the POST from the modal (called filteroptions)
I also tried to attach it to the POST success with a simple success process to load the file but each time, the breadcrumb.php fils to be loaded.
Curiously, if I ctrl+F5 the page after the first POST, there is no value shown BUT if I search again the DIV is updated each time I search after that.
Why would the request not fire the first time that the search is performed? Why do I need to refresh the page for everything to start working?
There is no caching to it's not a case of a dependantr file being cached after the refresh.
Thanks
The solution was to populate the div with nothing and then update it.
Previously, the div was only being drawn when it was populated thanks to the code in the breadcrumb file looking for a specific POST or SESSION variable.
It now allows for a blank value.
I know that this theme has been arround for a long time. But, what I want is to display a form and display the result of the request below, on the same page without erasing (reseting) the form.
So, always display the form, empty at first, and then always diplaying what the user has input. And then display the result of the request below the form.
I have tried to manipulate the if(isset($_POST['submit'])) stament but it either show the result on the top and not below and it reset the form value.
can you show us the Code, 2ndly its also possible via ajax
It's calling ajax call.
First of all you need three page for this (actually you can do that with one page but it seems not good.)
Show page: index.php Which have form and result div.
Ajax call script: main.js which is included in index.php with tag.
Service: service.php which is return to you data.
Basically I have a bunch of data I get from a database and put onto my page in a table. Right now I have the user type in the name, session, etc. in the table and that is sent as post data into the next PHP page, which I then use to lookup more stuff in the DB and so on and so forth.
Obviously that's not a great user experience; it would be much easier to simply CLICK the item in the table and everything gets sent automatically into the next page.
I'm not sure how I'd go about doing this.
My tables are first and last names for now, so if you click a certain row it should go to the next page sending each cell as data.
EDIT: Some examples:
Traditionally you do this with a form
<form method="post" action="pageDataIsGoingTo.php">
to send data to the next page. However, I don't want to do this with a form; but rather when they click a URL and/or button that sends the data. I can "hide" the data from view I suppose, but I still don't know the function to actually go ahead and do that.
Would I make a javascript button/function that sets something in an invisible form?
You can use invisible/hidden form fields.
That might be your best guess.
Javascript would be a good solution if you wanted an ajax POST call, but you want to load other page.
So hidden form fields are your solution.
Parallel with table data.
You need to embed hidden fields and your visible item row within a form
(so each item row contains also a form & hidden form fields and visible submit button,
which you can style with css)
This presuming that your table contains more items which you can choose to send.
Although I would do this with backbone & jquery and do it all in ajax.
I have a dynamic html table( rows are added dynamically using java script) and I want to pass whole table to a php script as an array.Is there a way to insert the table data to an array?
I have tried using phpTableExtractor but it dosen't extract dynamically added rows.
I don't see any other reliable solution but creating a HTML form along with the table and have the user click a submit button to save the table. Then you can read all content from $_POST and store it in a database.
Another solution would be to use AJAX requests to store the table content every time the focus changes or something like that. Will make your page dependent on JavaScript though.
What if you fill a JS array at the same time you create the table?
You will use the html just for display but behind you have the data you send to php.
I have a form on one page, some of the form data is pulled from various tables in my mysql database -- the tables hold the options for different selects, so the following is the way my data will look after the php scripts are run:
<select name="vehicleStyle">
<option value="empty" selected="selected">- select -</option>
<option value="coupe">Coupe</option>
etc....
</select>
I have a second form that loads over this page in an iframe, this 2nd form allows me to update the data included in this mysql table so that I can add options to the form on the fly. Everything works absolutely fine and wonderful however, if I update (add a value) to this table on the fly, I have to refresh the page in order for the new data to show up in the first form on the main page. I've played with auto-refreshing the page, but that's kind of obnoxious.
Is there a way to add this form data directly into my original page via jquery?
I think twitter does something like this when you add a tweet (I don't use twitter) but it adds your recent tweet onto the top of the page without actually reloading the entire page.
Thanks so much!
I believe the best way is to use the load jQuery function (http://api.jquery.com/load/).
It lets you load a page from a url directly from javascript.
Here is what I would do:
move the creation of the select to a new url (fillselect.php for exemple)
load the page without creating the select: create a div tag instead (name it divforselect for exemple)
in the onload javascript event of the page, write this:
$("#divforselect").load("fillselect.php") This will result in the div tag innerText set to the content of the fillselect.php page. So the url fillselect.php will not be a complete html page but will only contain the select tag.
After that you can call $("#divforselect").load("fillselect.php") whenever you want to refresh the select!
I think you want to do DOM manipulation using JS. All you have to do is append a new OPTION tag with the user-input value to the SELECT like:
var option = $('<OPTION/>');
$(option).html('INSERT YOUR VALUE HERE');
$('SELECT').append(option);
Remember: this is adding an OPTION just on the client side. So if your actual form submission (in your iframe) fails to push the data to your database, this would represent an inconsistent view for your user( where he would think new OPTION is created but its actually failed).
So, you would have to tie your UI update with your backend response. Typically, you would refresh this UI in the AJAX response of the call updating the backend.
Maybe you should be using AJAX to populate the boxes? Then you could have it refresh the data anytime you want.
jQuery Ajax