Geek Answers Handbook

How to constantly refresh part of a page

http://pastebin.com/dttyN3L6

The file processing the form is called upload.php

I have never used jquery / js, so I'm not sure how to do this or wherever I put the code.

This has something to do with this setInterval (loadLog, 2500);

Also, how can I do this so the user can submit the form without refreshing the page?

  $.ajax({ type: "POST", url: "upload.php", data: dataString, success: function() { } }); return false; `

and

  <?php $conn1 = mysqli_connect('xxx') or die('Error connecting to MySQL server.'); $sql = "SELECT * from text ORDER BY id DESC LIMIT 1"; $result = mysqli_query($conn1, $sql) or die('Error querying database.'); while ($row = mysqli_fetch_array($result)) { echo '<p>' . $row['words'] . '</p>'; } mysqli_close($conn1); ?> </div> <?php if (!isset($_SESSION["user_id"])) { } else { require_once('form.php'); } ?>
+8
javascript jquery php forms
source share
3 answers

You can submit the form without refreshing the page like this:

form.php:

 <form action='profile.php' method='post' class='ajaxform'> <input type='text' name='txt' value='Test Text'> <input type='submit' value='submit'> </form> <div id='result'>Result comes here..</div>

profile.php:

 <?php // All form data is in $_POST // Now perform actions on form data here and // create an result array something like this $arr = array( 'result' => 'This is my result' ); echo json_encode( $arr ); ?>

JQuery

 jQuery(document).ready(function(){ jQuery('.ajaxform').submit( function() { $.ajax({ url : $(this).attr('action'), type : $(this).attr('method'), dataType: 'json', data : $(this).serialize(), success : function( data ) { // loop to set the result(value) // in required div(key) for(var id in data) { jQuery('#' + id).html( data[id] ); } } }); return false; }); });

And if you want to invoke an ajax request without refreshing the page after a certain time, you can try something like this:

 var timer, delay = 300000; timer = setInterval(function(){ $.ajax({ type : 'POST', url : 'profile.php', dataType: 'json', data : $('.ajaxform').serialize(), success : function(data){ for(var id in data) { jQuery('#' + id).html( data[id] ); } } }); }, delay);

And you can stop the timer at any time as follows:

 clearInterval( timer );

Hope this will give you direction to complete your task.

+9
source share

It is pretty simple. To access elements using Jquery, you use the css selector, for example, to get the value of an input field named "foo", you do the following:

 var fooVal = $("input[name=foo]").val();

To send it to the server, you must add an event listener (for example, click) to the submit button / any other element

 var data = { varName : fooVal }; var url = "http://example.com"; var responseDataType = "json"; function parseResponse(JSON) { // your code handling server response here, it called asynchronously, so you might want to add some indicator for the user, that your request is being processed } $("input[type=submit]").on('click', function(e){ e.preventDefault(); $(this).val("query processing"); $.post(url,data, parseResponse, responseDataType); return false; });

If you want to do constant updates, you can, of course, add timers or other logic. But I hope that you get an idea of ​​how to proceed with such cases;

0
source share

To answer part of your question, you can use ajax.

 <html><head></head><body> <div id="feed"></div> <script type="text/javascript"> var refreshtime=10; function tc() { asyncAjax("GET","upload.php",Math.random(),display,{}); setTimeout(tc,refreshtime); } function display(xhr,cdat) { if(xhr.readyState==4 && xhr.status==200) { document.getElementById("feed").innerHTML=xhr.responseText; } } function asyncAjax(method,url,qs,callback,callbackData) { var xmlhttp=new XMLHttpRequest(); //xmlhttp.cdat=callbackData; if(method=="GET") { url+="?"+qs; } var cb=callback; callback=function() { var xhr=xmlhttp; //xhr.cdat=callbackData; var cdat2=callbackData; cb(xhr,cdat2); return; } xmlhttp.open(method,url,true); xmlhttp.onreadystatechange=callback; if(method=="POST"){ xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlhttp.send(qs); } else { xmlhttp.send(null); } } tc(); </script> </body></html>
0
source share

More articles:


All Articles