How do I use JQuery $.get() method - php

How to send an HTTP GET request to a page and get a result back:
This is a piece of code using jquery pagination..I think there is a mistake in my code is to call $.get() on a jquery method.
if(isset($_GET['pages'])) {
$pages = $_GET['pages'];
$i = ($pages - 1) * $num_pages + 1;
.....
<?php echo ''.$i.'' ?>
this Jquery code:
//JQuery
(function($) {
$(document).ready(function(e) {
var main = "data_students.php";
$("#data-students").load(main);
// when the button page is pressed
$('.pages').live("click", function(event){
kd_page = this.id;
$.get(main, {pages: kd_page} ,function(data) {
$("#data-students").html(data).show();
});
});
});
}) (jQuery);

$.get("page.php?vars=values&othervar=othervalue",function(data) {
$("#data-students").html(data).show();
});

You can try this
//send as much paramerters as you wish in $.get(url,data,callback);
$.get("page.php",{vars:values,othervar:othervalue},function(data) {
$("#data-students").html(data).show();
});

Related

Ajax with jquery to set time interval

I'm working on a notification message i want to load new message from a page call check_new-reply.php in every 10 second using Ajax and Jquery but my code is not showing anything i don't know what the error is please can someone help me out?
<script>
$(document).ready(function(){
$(function(){
var timer = 10;
var test = "";
function inTime(){
setTimeOut(inTime, 1000);
$("#timer-u").html("Time refreshing"+timer);
if(timer == 8){
$("#message-u").html("Loading....");
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
})
timer = 11;
clearTimeout(inTime);
}
timer--;
}
inTime();
});
});
</script>
Here is PHP
<?php include($root . '_inc/Initialization.php');?>
<?php require_once("_inc/dbcontroller.php"); $db_handle = new DBController();?>
<?php
$users = $_SESSION['username'];
$newquery = "SELECT * FROM blog_post
INNER JOIN replys
ON blog_post.UserName = '$users'
WHERE replys.read = 0
ORDER BY rtime";
$newhisory = mysql_query($newquery);
while($newrow = mysql_fetch_array($newhisory)){
echo '<div class="fnot">'.htmlentities($newrow['blog_title']).'';
echo '<span class="ttcredit"><font color="darkgreen">94</font> </span> <a class="reqttag reqttag2" href="#">No</a> ';
echo '</div>';
echo '<input type="hidden" id="unr" name="unr" value="'.$newrow['BID'].'"/>';
}
?>
If you just want to call it every 10 seconds, use 10000 milliseconds in the setTimeOut . Also, it is best to call again the function only when the previous Ajax call is done:
$(document).ready(function(){
$(function(){
var test = "";
function inTime(){
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
setTimeout(inTime, 10000);
});
}
inTime();
});
});
To call any function with some intervals you will have to use
<script>
$(document).ready(function(){
window.setInterval(function(){
myAjaxCall();
}, 10000);
});
function myAjaxCall() {
alert("Hi");
$("#message-u").html("Loading....");
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
});
}
</script>
window.setInterval will call your function on every 3 seconds with above code, and will generate an alert message,
what you have to do is set your ajax code in a function and use above method, change 3000 to 10000 and your ajax call will defiantly work with every 10 seconds,
This is the code which will call our javascript function on every 10 seconds,
just copy it and check it, you will get an idea, also i have included the jquery as we have discussed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
<script>
$(document).ready(function(){
window.setInterval(function(){
myAjaxCall();
}, 3000);
});
function myAjaxCall() {
alert("Call your Ajax here");
$("#message-u").html("Loading....");
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
});
}
</script>

jQuery load() not functioning as expected

I've a jquery script that call the number2.php page, which is supposed to execute and show the result in a <div>. The problem is that is not working. Can you help me? Thanks.
<script>
$(function() {
$('#submit').click(function() {
if ($('#taille').val() != 0) {
var param = 'l=' + $('#taille').val();
}
else {
var param = 'b=' + $('#datepicker').val() + 'c=' + $('#datepicker1').val() + 'num' + $('#num').val();
}
$('#retour').load('number2.php', param);
);
});
</script>
Your code has a syntax error; it's missing closing } in the click handler function.
now it works but after loading number2.php my main page is refreshed and i lose the result !!!
In this case, you should hook to the submit event of the form element and call preventDefault() on the event to prevent the normal form submission. Try this:
$(function() {
$('#myForm').submit(function(e) { // change #myForm to target the <form>
e.preventDefault();
var param = {};
if ($('#taille').val() != 0) {
param.l = $('#taille').val()
}
else {
param.b = $('#datepicker').val();
param.c = $('#datepicker1').val();
param.num = $('#num').val();
}
$('#retour').load('number2.php', param);
});
});

jQuery&php fire function when page is loaded

I have a php page with jQuery, with range sliders.
When the sliders are changed the jQuery code sums the values.
I also want this code to be fired when the page is loaded. But it doesn't happen when I trigger the function inside $(window).load(function() {}); or directly in $(document).ready(function() {});.
Here's the jQuery code:
$(document).ready(function() {
$(window).load(function() {
countSilders();
});
function countSliders(){
var SliderValue = parseInt($("#slider0").val())+parseInt($("#slider1").val())+parseInt($("#slider2").val());
if (SliderValue==10)
$("#submit_next").button("enable");
else
$("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue+"/10");
}
$(document).on("change","#sliders", function(){
countSliders();
});
});
Try this:
// First define your function
function countSliders() {
var SliderValue = parseInt($("#slider0").val()) + parseInt($("#slider1").val()) + parseInt($("#slider2").val());
if (SliderValue == 10) $("#submit_next").button("enable");
else $("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue + "/10");
}
// Run on ready, don't use ready and then on load, that will never happen
// And i changed the on() to change()
$(document).ready(function(){
countSilders();
$("#sliders").change(function(){
countSliders();
});
});
You should be able to do:
function countSliders(){
...
}
$(document).ready(function() {
countSilders(); // fire it on load
// bind it to sliders
$(document).on("change","#sliders", function(){
countSliders();
});
});

JQuery after AJAX GET

I have this AJAX GET:
function edit(str){
ajax.onreadystatechange=function()
{
if (ajax.readyState==4 && ajax.status==200)
{
document.getElementById("editaircraftdialog").innerHTML=ajax.responseText;
$("#editaircraftdialog").dialog('open');
$("#loadingdialog").dialog('close');
}
}
ajax.open("GET","./edit_aircraft.php?icao="+str,true);
ajax.send();
$("#loadingdialog").dialog('open');
}
The JQuery code in edit_aircraft.php does not work. Here's an example:
<script>
$(function() {
$("#insertaircraft")
.button()
.click(function(event) {
});
});
</script>
I have had the same problem in the past and I cannot fix it.
You can not load JavaScript with innerHTML. It does not get evaluated.
Use jQuery to your advantage
function edit(str){
var loading = $("#loadingdialog").dialog('open');
var aircraft = $("#editaircraftdialog");
aircraft.load("./edit_aircraft.php?icao="+str, function(){
loading.dialog('close');
aircraft.dialog('open');
});
}

how to pass a php array to javascript array using jquery ajax?

I followed other reslted question but still unable to solve this problem. I want to store the values of an array from php into an array of js. I tried myself butr getting indefined value in all the cases i tried
Plese anyone let me know where i am wrong
my Php code
<?php
$var=5;
$myArray = array();
while($var<10){
$myArray[]=$var;
$var++;
}
echo json_encode($myArray);
?>
and the js code
jQuery(document).ready(function(){
jQuery("#previous").click(function(){
var res = new Array(); var i= 0;
jQuery.getJSON("phparray.php", function(data) {
while(i<5){
res[i]=data.i;
i++;
}
});
});
jQuery("#result").html(res[0]);
});
also treid this js
jQuery(document).ready(function(){
jQuery("#previous").click(function(){
var res = new Array();
var i= 0;
jQuery.getJSON("phparray.php", function(data) {
jQuery(data).each(function(key, value) {
res[i]=value;
i++;
});
});
jQuery("#result").html(res[0]);
});
Try below code
<?php
$var=5;
$myArray = array();
while($var<10){
$myArray[]=$var;
$var++;
}
$dataarray=array("myarray"=>$myArray);
echo json_encode($dataarray);
?>
Jquery
jQuery(document).ready(function(){
jQuery("#previous").click(function(){
var res = new Array();
jQuery.getJSON("phparray.php", function(data) {
var i= 0;
while(i<data.myarray.length){
res[i]=data.myarray[i];
i++;
}
jQuery("#result").html(res[0]);
});
});
});
The problem with your code is you are updating the result before the JSON has been loaded. There is also no reason to copy every item in the array in this case just set res = data (although the above example of sending back an associative array or JS object is good practice).
PHP
<?php
for($var=5; $var<10; $var++){
$myArray[]=$var;
}
echo json_encode($myArray);
JavaScript
$(document).ready(function() {
var res;
$("#result").bind('update', function() {
$("#result").html(res[0]);
});
$("#previous").click(function(){
$.getJSON("phparray.php", function(data) {
res = data;
$("#result").trigger('update');
});
});
});

Categories