send dynamic html table from one page to another - javascript

I dont know if its simple, but is there any way to send the complete html table from a page to popup window? The table is created dynamically from server data, now I want to pop this only table out of its original page. The user changes the data in html table, but will not save back on server. So getting data from server in popup is not practicle, something jquery can do this, but dont know how. Any suggestions will be appreciated.
enter code here
Thanks.

Use jQuery to retrieve the HTML content of the table and send the return string as variable when you create the new page or dialog
$("#TABLE_ID").html(); // <-- gets you the entire HTML table code
and make sure that the table has the ID:
<table id="TABLE_ID">...</table>

you can simple use html() attribute of jquery like this
$("#YourTableId").html();
and set html of your div in popup
$('#YourDivId').html($("#YourTableId").html());
more info here
http://api.jquery.com/html/

Related

Form doesn't submit without refresh (please Vanilla JS only)

I know this is a bit tricky because I can't actually post the JS or HTML code but I'll try my best to describe it.
So basically I created a table with JS on the HTML.
Then I use "submit" and "form" in the html to submit content onto the table. The content is retrieved with fetch and an API.
The issue I have is that while it all works well, the data doesn't appear on the table without me having to refresh the browser. I'd the data to appear as soon as I click the submit button.
Cheers and thanks in advance
Its obvious and correct to dont show new records because table just can show last result of request .
For your goal you can reload just table tag with ajax or other ways for example you can refresh table tag x second after click on submit button.(x should be enough big that new records has time to submit).

adding dynamic data to mysql with php j query

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.

How to copy or post an entire table in html code to another page?

I'm trying to make an Invoice Table, later when the customer finishes, I want them to see the same product they ordered in another page!
I tried using HTML post method, but that doesn't work, because I'm using a JScript function to add rows and delete.
So to be clear, I want to know if it is possible to clone, or copy the entire table to another page with the content or without the content?
When you add and remove rows in your table,
you could also add and remove hidden form values for a form.
That form would have a submit button which sends you to the target page.
That target page takes the form values and produces a nice table again.
Either you take the form values with you with those hidden values
or you could store them temporarily in the session...
When users add and remove rows, the data is sent to the server, right? So just display the invoice on the other page. Or maybe I'm misunderstanding the question.

jgGrid customized add new form

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...

Refresh a webpage with following action

I want to do a very simple thing with AJAX. Apologize if it sounds very simple.
If I add some new data to my database from my client side JS page (with AJAX call) with a save button, then I want make the newer data visible with that button click as well. For this, I assume I have following options -
Refresh the page (which does not work for me since initially my table is hidden and refresh takes the page to its initial position. I also tried to refresh page and then added one action to make that table visible but unfortunately it just refreshed the page and did not perform the following action)
Refreshing the part of the page (that certain div) which I have no idea how to do.
So my question is -
Is it possible to refresh the page followed by other functions?
How can I refresh a div using JS?
Either of the solutions would be fine for me. Thanks in advance.
To refresh a div, as far as I know you need a php page to get the info you want to be displayed in there then use ajax function to put that page in there.
You can have the server side code return the contents of the div to change after the data is saved.
Using jQuery it's very easy to change the content of a div after making an ajax call.
$.ajax({
type: "POST",
url: "/someurl",
data: theDataToSendToTheServer,
success: function(data){
$('#theDivsId').html(data);
}
});
JQuery's html() attribute will allow you to update a single div via Javascript.
You can use JQuery's Post method to update the Server and/or retreive new data to refresh the div with.
Not using jQuery? It's still pretty easy.
document.getElementById('theIDofYourDiv').innerHTML = 'the new contents of your div, including <span>nested HTML tags</span> if you want, provided as a string';

Categories

Resources