I'm learning to use mysqli and AJAX and building a simple application using AJAX to insert data into a database and display data in a table from the database. The table should display current information at the time that the webpage is loaded and then update anytime a record is added to the database using the HTML form. I'm having a couple ofissues.
Thus far, the form works from my main HTML file, except that it leaves the page and opens addActorInfo.php, instead of just refreshing the main page.
I have the table working when I open the getActorInfo.php file in a browser, but it is not being pulled into the main page.
Any suggestions would be appreciated.
EDIT INFORMATION: I solved problem number 1 and have updated the HTML code to reflect changes. Currently, I believe I have a bug somewhere in my drawTable() function that is preventing the table produced by the PHP GET FILE from being returned back to the main page. I've tried using the statement "document.getElementById("actor_display").innerHTML=xmlhttp.responseText;", but it's still not showing up.
Main HTML
Why not use jQuery on the ajax?
var data = $('#yourdatainsertionform');
$.ajax({
data:data,
method:'POST', //Or get
url:'yourphp.php',
success:function(result){
$('#actor_display').html(result);
},
error:function(){
alert("Something went wrong");
});
By using jQuery, you would make your life easier. No more hair ripping moments with IE, and so easy ajax requests & form validation. Basically, what you can do with javascript, you do it easier with jQuery.
The usage is so simple, just include
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
on your page before loading the files you will be using jQuery.
Related
I am new to coding with php and SQL
I know html, css and js
I want to code for a simple chatroom web page
I have written the sign in and sign up part and I have saved some user accounts information in my database
but my problem is how to refresh only a part of web page using only php.
I have a div in my page for showing messages that are saved in database
and I want its content to be updated when a new message is gone to the database
but I don't want the whole page to be refreshed.
Please Help me wiith this.
To refresh only part of a webpage you can use AJAX. It is based on JavaScript and lets you update certain parts of a webpage without reloading it.
Here you can learn more: https://www.w3schools.com/js/js_ajax_intro.asp
PHP is a server language - and based in resquest/response, like everything in web.
It means that you can't send information to the client after the response.
So if you want to make your page dinamic, you have to send some javascript to the client browser.
Depending on what you want to reload, you will need json and jquery/ajax to get the information through GET or POST. The you change the content of the current page using this.
In this case, you can use another PHP page like 'getmessages.php':
function getMessage(){
$.ajax({
url: "getmessages.html",
context: document.body
}).done(function() {
$("#messagesdiv").html("-- body of message --");
});
}
while(true){
getMessage();
sleep(1000);
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
You can parse the json to get the information wich is better. And it verify the information every second.
There are many tutorials out there that can show how to do this.
You can find JQuery here.
I'm developing app using Fullcalendar v1.
I successfully integrate connection to mysql database so my events are loaded from db as json array. But my app are going to use more than 2 people in one moment so i need automatically refresh after my db changes. If one user remove event, calendar refresh for all other users which see this calendar.
I have one experimenting script which i made. It works but not as well as i want.
I know, this script is completely bad but i was frustrated.
<script>
var i = setInterval(function(){
last_id = $.cookie('last_id');
$.get("foo.php", function(data) {
var id = data;
if(last_id !== id) {
$('#calendar').fullCalendar('changeView', 'month');
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('refetchEvents');
$('#calendar').fullCalendar( 'rerenderEvents');
last_id = $.cookie('last_id', data);
}
});
},500);
</script>
It works pretty simple ... foo.php loads number of rows. If this number is other than last number saved in cookies, calendar will be refreshed.
This method has tons of disadvantages and mistakes. It works only for deleting and creating events. Not for moving etc. And it is slowing app by getting results every 500ms ..
Have you better solution for this ?
I have the similar structure.. get data from DB as JSON...
I make a modal for change a event...
When i press the button who calls my db to update the event..
I use behind... a function on jQuery called ( .trigger('click') ) so..
$('.fc-prev-button').trigger('click');
$('.fc-next-button').trigger('click');
//Hide Modal.. button have a data-dismiss="modal"
$('#closeEdit').trigger('click');
That's my solutions because when load fullCalendar this call events.. param who get data from my db... so when you change the month this is called again for reload the data and don't load the full month with data..
Sorry for my english and i hope to help you, Happy Coding !!
I am amending some results tables that display rows from a mysql database to refresh automatically. I am new to this so have based it on
Refresh a table with jQuery/Ajax every 5 seconds
This works fine and I have tested it by asking for making the request to the server display the time so i can see the change when the refresh occurs.
My problem is that if i apply this to a table dislaying returned sql results (also using the jquery tablesorter). Both my sql and jquery fail unless I move all the files and code they are dependant upon to the php page i echo the table on. This is now making my pages a mess. So what is the best way to refresh and manage a results table with ajax and where should dependant files/code be located?
cheers
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php');
setInterval(refreshTable, 5000);
}
</script>
I am working with PHP and mySQL. On page1.php there will be an image that when the user clicks on it there will be a query that inserts into mysql some data. How can I do this without reloading the page or transferring the user someone else and change the image?
What I did so far is to do this but with reloading the page.
Thanks for your ideas/examples.
It is as simples as executing the post method of jQuery library.
Here is an example that calls a PHP script when clicking any image.
$(document).ready(function() {
$("img").click(function() {
$.post("executequery.php");
});
});
In the "executequery.php" you would need to build the SQL and execute it.
Here is the documentation of the method. http://api.jquery.com/jQuery.post/
Using jquery, add an ajax call to a php script which should be able to run the insert script and return a success message.
I have a gallery of products that is dynamically created using php and mysql on the load of my htlml page. I am to take all of the images in the gallery, and turn them into links that will produce a modal window with content that is dynamically generated depending on which product is clicked.
My first thought is to use Jquery to select all of products, place an <a><a/> around each image and pass some kind of identifier to the my php that will generate the content in the modal window. is this thought process correct for trying to achieve this, or is there a better way to look at accomplishing this. Can any one provide some sample code that i can look at for direction.
Yes, what you're describing will work.
However, I'd suggest you generate the wrapping in php and leave jQuery to handle only the click events, which would look something like:
$('a.product').click(function () {
$.get('/some/url.php', data: {id: 1234}, function (data) {
// Request is sent to /some/url.php?id=1234
// PHP responds with some HTML
// Output the HTML somewhere
$('#output').html(data);
});
});
If you're using a library for the modal, some of them support AJAX loading of content already, so you don't need the $.get, but instead just supply it a URL and the query params.