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

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

Related

Edit div and have updated information on page Reload

So i have posted div which can be edited or deleted.Take a look at given link
Here is the JS fiddle link
Now i want the original code in html to get updated and show updated information on page refresh/reload after Edit or Delete operation is performed.
Thanks for help.
Saving input from the User and showing on page load
I suggest on your done button click, use jquery ajax api.jquery.com/jQuery.ajax to send the input from the user (escaped using stackoverflow.com/questions/24816/…) to the db.. then encoding it again on the page load when you fill your div with the saved data from the DB..
few notes though - use a parametrised stored procedure to store the html in the database .. otherwise you'll be vulnerable to sql injection (google.de/…) –

Refine Data From MYSQL database with PHP and Ajax function

I have a php page in which at left sidebar i have a query form and at right sidebar i have space to display result when query form is submitted without refreshing the whole page, Problem is that the whole page get refreshed every time i have tried many ajax function but no one could help me.
I want to display like this-
http://www.makaan.com/jaipur-property/residential-property-for-sale-in-jaipur/search-properties
In this Page At LeftSidebar when i click any checkbox it display result without refresh whole page.
Please Help Me, Any help will be appreciated.
you should catch a submit event and tell him, in case you make in with jQuery,
something like
$(form).submit(event){
event.preventDefault();
...
}

send dynamic html table from one page to another

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/

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.

Populate form by link click before posting with jQuery

I'm building a small website with JQTouch and the first problem I've run into yet is with a form.
I have a form
<form action='action.php' class='jqt' id='ajax_post' method='post' name='pform'>
(where the name attribute is there when I tried to access it with document.pform)and within it is a ul list of a elements as follows:
<a class="submit" href="#" value="somevalue">Text displayed</a>
Underneath, inside the form, I placed a single hidden input field (because I only want to POST one value), where my goal is to populate it by clicking one of the links and then submitting:
<input name='somename' type='hidden' />
On submission, the webserver reports that a POST was performed, and there is a brief slide animation before the page returns to the original form. Trying to hack my way into jqtouch.js to populate the input field doesn't work (where what I'm trying is $form.somename.value = $(this).attr('value'); inside submitParentForm())
The CSS captures well and the list is displayed nicely. In fact, if I remove the submit class and insert my own form submission override with document.somename.value = %(this).attr('value'); document.pform.submit(); inside, for instance, hrefor onClick in one of the links, the POST is performed and the next page is displayed, albeit by reloading and not with a jQTouch animation, which is my goal.
My question: How can I use jQTouch to show a slide animation when I post a form which I want to populate with the value of an a element when a user clicks on it?
Thanks in advance.
I wouldn't submit the form (if I wanted to use a submit button I'd use preventDefault). I'd just use $.post() to post the data and then jQT.goTo to go to the new page with a slide animation. The new page is in jqTouch, of course, only another div in the same document which makes it easy to set any information you'd like on that page using the response in the callback of $.post().
But this might not be a viable solution to what you're trying to do, I don't really understand the question very well.

Categories

Resources