We Keep Coding

Ajax works after I press submit twice

Very brief, this is my php code in myPage.php:
<div class="table-responsive" id="items">
<table class="table" id="myTable">
<thead><tr><th>item<th>status<th>options</thead>
<tbody>
[...]
echo "<tr><td>$item<td>$status<td>to-be-added
[...]
echo "<tr><td colspan='3'>";
echo "<form method='post' id='newitem'>";
echo "<input type='hidden' id='uid' name='uid' value='$uid'>";
echo "<div><button type='submit' class='btn btn-info' id='submitbtn'>new item</button></div>";
echo "</form>";
[...]
And this is my .js file ajax code:
$(document).ready(function () {
$('form').submit(function (event) {
$('#errors').remove(); // remove the error text
$('#success').remove(); // remove the success text
var formData = $("#newitem").serialize();
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
dataType: 'json',
encode: true
})
.done(function (data) {
console.log(data);
if (!data.success) {
$('form').append('<div id="errors" class="alert alert-warning"></div>');
if (data.errors.validitem) {
$('#errors').append('<p>' + data.errors.validitem + '</p>');
}
} else {
$('#addresses').append('<div id="success" class="alert alert-success">' + data.message + '</div>');
$("#myTable").load("mypage.php #myTable");
}
})
.fail(function (data) {
console.log(data);
});
event.preventDefault();
});
});
I Don't show the process.php function as that is not most likely the problem.
When I first load the page and press submit following things happen:
a new item is created via ajax
table gets populated with new entry w/o page refresh but using the load option: *$("#myTable").load("mypage.php #myTable");*
in conclusion, everything works as expected!
Note: only after I add the table load the problem appears. $("#myTable").load("mypage.php #myTable");
Without this reload of the table after submit, submit always work, just that the table doesn't show real time the changes and I need to do F5 ... which is not the plan.
After the load of the table, when I press the button again, nothing appears to happen, except that my success message disappears.
At this stage I need to press the button twice. Only after I press submit a second time, the ajax executes ok and table shows the new item created.
This behavior is consistent for all next submits. All execute only after second submit.
I need some help here please. What is happening?
I want to reload only a section of the myPage.php, so only the full table #myTable or whole div #items, with all the validation functions I have in myPage.php
I don't want to recreate full table in the process.php and send it over via POST as I have seen some recommend in other forums.

The issue is here : $("#myTable").load("mypage.php #myTable");
mypage.php is your main page. And you load it once. Then, inside the table, you use that .load() to overwrite it all. Which is no good.
You then have a brand new table where no handler is binded to the submit button. So on submit button click (second time), the form is submitted using the "normal behavior" of a <form> element... And the page is fully reloaded.
As a possible solution, I would use .load() on the form... Not the table, like this:
$("#newitem").load("mypage.php #newitem");
But you should try $("#newitem").reset() and just remove #error and #success... Instead of that .load().
EDIT
Second taugth:
Try $(document).on("submit", "form", function (event) {
instead of $('form').submit(function (event) {
That is delegation... So your submit button always will be binded to the function, even if it is overwritten.

How to hide the form permanently and display form submitted

Can someone suggest me how to hide the form from a user once they have submitted successfully and display the message form submitted and this should be visible to the user each time they log in? So far, I am able to collect and save the information to MySQL database. If you need the code I would add it here. Any help truly appreciated.
OR
How can I disable the entire form upon submit and still display all the data entered in the form field permanently? Please help me with the approach I am desperate to find the answer for this.Thank you

While submitting data in database make an entry of is_form_submitted as true. When users logs in, you just need to check is_form_submitted. If its true, so can hide form else you can show the form.
If you are using an AJAX for form submission, then on AJAX's success response, you can hide the form.
In HTML, you can add disply:'none' css for hiding form.

use ajax
$("form").css("display", "initial");
event.preventDefault(); //prevent default action
var post_url = //get form action url
var request_method = //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url: post_url,
type: request_method,
data: form_data
}).done(function (response) { //
$(".form").css("display", "none");
$("#results").html(response);
});
when getting response display : none the form

Yii2: Auto save form on navigate to another tab in a form

I'd say I want to submit each tabs content (form values) when another tab is selected. That way the user navigate between tabs without having to reload the whole form. And the values are saved even if partially filled to the database
I think this can done using jquery or javascript like clicking on the tab will imitate the clicking on save button simultaneously.
I have also tried this code but it's not working? The id of the tab is #ui-id-3 and id of save button is #save1.
<script>
$('#ui-id-3').click(function(){
$('#save1').click();
return false;
});
</script>
What I am doing wrong here?
With suggest modification:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$("#ui-id-3").click(function(){
autoSave();
return false;
});
});
function autoSave(){
var formData = $("#w0").serialize();
$.ajax({
type:"POST",
url:"/hospitalerp/web/index.php?r=daily-ward-entry%2Fcreate",
data:formData,//only input
success: function(response){
$( "#recordID" ).val( response);
}
});
}
</script>

Here is a simple solution but you have have to modify according to you needs
Step one :
Create a hidden field with for ID field we will store database record Id in it you can name/id input as recordID so we can reference it in our jQuery Code
<input type="hidden" name="recordID" id="recordID" value="0" />
Step two :
Create a server page which will server for Database Insertion/Updation you can called it autoSave.php this page will receive complete form and if recordID <=0 then it will insert into db and return the newly inserted ID else it will update table where Id = recordID
Step 3 :
Jquery Code which will call autoSavePage upon Tab Click.
$(function() {
$(".tabs").click(function(){
autoSave();
return false;
});
});
function autoSave(){
var formData = $("#formID").serialize();
$.ajax({
type:"POST",
url:"autoSave.php",
data:formData,//only input
success: function(response){
$( "#recordID" ).val( response);
}
});
}
Html Form ID should be formID
<form id="formID" method="POST" action="autoSave.php">..
This is the idea when ever anyone click on any tab a ajax call will be generate to save the form rest you have to modify according to your code as you have not submitted any code thats why i have make a generic example
Hope this will Help!

jQuery function to sometimes redirect after an AJAX Request is completed and to sometimes remain on the page?

I have a page that lets you Add/Edit/Delete "Project Tasks" and Save the data to a database using jQuery's AJAX function to save the POST data.
I currently have 2 buttons on the page.
Button 1 .save-tasks-ajax-redirect - You click it and it makes a regular non-ajax POST to my backend and you are redirected to another Project page. This button does not have a click event yet. Perhaps the best way might be to simply create a new click event for this button class and then have it call my save function but it could pass in a variable to indicate that it needs to redirect? Before I posted this questions I was sort of hoping to have both button share the same click event and everything but perhaps this is a better idea?
Button 2 .save-tasks-ajax - You click it and it uses AJAX to Save the data and you can remain on the page editing more.
Now my goal is to modify how Button 1 works. Instead of making a regular HTTP POST, I would like for it to also make an AJAX save but when it is done, I would like it to redirect to a project page.
So below I have my 2 button HTML codes. Below that I have my jQuery Click event for my AJAX save button (Button 2) and below that I have my ajaxSaveTasks() function that my button calls to make the save.
I would like to modify this function and perhaps all of this code so that my Button 1 can use the same function to make an AJAX save but somehow it needs to differentiate itself so that it can also do a redirect after the AJAX save is complete.
Looking at the basic code below, how could I modify this to do that?
<button type="submit" class="save-tasks-ajax-redirect">Save Tasks and Return to Project</button>
<button type="submit" class="save-tasks-ajax">Save Tasks and Continue Editing</button>
$(window).load(function () {
// AJAX Save and Continue editing
$('#content').on('click', '.save-tasks-ajax', function () {
console.log('AJAX Save and Continue Editing Button Clicked!');
ajaxSaveTasks();
return false; // avoid to execute the actual submit of the form.
});
});
function ajaxSaveTasks(){
console.log('ajaxSaveChanges() Ran and Tasks Saved.');
// Reset Flag that Triggers Un-Saved Alert on page exit
window.unsavedChanges = false;
// Show a Loading/Saving Spinner
jQuery('#project_tasks').showLoading();
// Display a message to the user that we are Saving
flipNotify.show({
message: 'Project Tasks Saved!',
icon: 'tick',
delay: 2,
sticky: false
});
var url = "index.php?module=apoll_Web_Projects";
$.ajax({
type: "POST",
url: url,
data: $("#editTasksForm").serialize(), // serializes the form's elements.
success: function(data)
{
// Hide Header Un-Saved Changes Div
hideTaskUnSavedChangesHeaderBar()
// Hide Loading/Saving Spinner
jQuery('#project_tasks').hideLoading();
}
});
};

$(window).load(function () {
// AJAX Save and Continue editing
$('#content').on('click', '.save-tasks-ajax', function () {
console.log('AJAX Save and Continue Editing Button Clicked!');
ajaxSaveTasks();
return false; // avoid to execute the actual submit of the form.
});
// AJAX Save and redirect
$('#content').on('click', '.save-tasks-ajax-redirect', function () {
console.log('AJAX Save and Redirect Button Clicked!');
ajaxSaveTasks(function(){ window.location.assign("project.php"); });
return false; // avoid to execute the actual submit of the form.
});
});
function ajaxSaveTasks(callback){
... your code ...
$.ajax({
...
success: function(data)
{
// Hide Header Un-Saved Changes Div
hideTaskUnSavedChangesHeaderBar()
// Hide Loading/Saving Spinner
jQuery('#project_tasks').hideLoading();
if (callback)
callback();
}
});
};

any way to stay in the same location when refreshed

i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>

Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

Presuming that you're using Ajax to change your page states, why not look at something like History.js?