jQuery ajax returns on all page - php

I want to make something simple but the return of AJAX is coming on all page not to the DIV I want to.
Here is my code PHP: file_ajax.php
<?php
require_once "../../funct/cfg.php";
if(isset($_POST['id'])){
if(fileDB($_POST['id'])){
echo '<script type="text/javascript">
var albhost="albup.ex";
var albbg="111111";
var albvi="2013";
var albid="'.$_POST['id'].'";
var albw=326;
var alblight="D69E9E";
var albfront="C4C4C4";
var albvol=80;
var albas="true";
var albdownb="0";
</script>
<script type="text/javascript" src="http://albup.ex/api/explayer/embed.js">
</script>';
exit;
}
}
?>
and the file ajax: ajax.js
function PrewThis(id,style){
var dataString = 'id=' + id + '&style=' + style;
$("#fileprev").removeClass();
$("#fileprev").show().addClass(style);
$.ajax({
type: "POST",
url: "ajax/file_ajax.php",
data: dataString,
context: "#fileprev",
error: function(){ $("#sidebox").append("SOMETHING ERROR") },
success: function(html){
$("#fileprev").append(html);
}
});
}
And the call is:
<a href="#"
onclick="PrewThis('MRuw2ZbMXj','oranger'); return false"
class="oranger">Sean Paul - Got 2 Luv U (Feat. Alexis Jordan)</a>
Please someone help ?

It's just a guess, but I think this line is the source of your problem...
<script type="text/javascript" src="http://albup.ex/api/explayer/embed.js">
As it states in the jQuery docs: "If html is specified, any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string."
It seems possible that the included script's output is blowing up your page.
Nothing else in your code seems to indicate a problem. It all looks good otherwise, but then I haven't seen your HTML source.

Related

AJAX multiple values inside PHP Echo

I'm struggeling with making an AJAX url inside of an php echo. Other troubleshooters around the internet didn't get me through it. Here is my code:
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup ({
cache: false
});
var ajax_load = "";
$( "#'.$row_items['id_aanbod'].'" ).change(function() {
$("#res").html(ajax_load).load("update.php", "e=" + $("#'.$row_items['id_aanbod'].'").val() & "id=" + $("#hrr").attr("id"));
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
The strange thing is that if I use only one variable the script works like it should, but as soon as I insert the second part there is nothing happening. Can anyone help me with this?
& "id="
should be
+ "&id="
But for clean code, you could write like below:
$("#<?php echo $row_items['id_aanbod']?>").change(function() {
$("#res").html(ajax_load).load("update.php", {
e: this.value,
id: $("#hrr").attr("id")
});
});
Please try like this:
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup ({
cache: false
});
var ajax_load = "";
$( "#<?=$row_items['id_aanbod']?>" ).change(function() {
$("#res").html(ajax_load).load("update.php", "e="+$("#<?=$row_items['id_aanbod']?>").val() + "&id=" + $("#hrr").attr("id"));
});
});
Don't forget to check vals. If short open tags is OFF -> then try :
<?php echo $row_items['id_aanbod']?>

Updating page using AJAX

On my main page I have a page called logs.php which I have set to update every 4 seconds using jquery/ajax. This will update the details of an .xml file which is stored locally.
file_put_contents("../../scripts/xml/logs.xml", $dom) or print_r(error_get_last());
Here is the jQuery:-
$(function(){
setInterval(function(){
$.ajax({
url:'scripts/php/log.controller.php',
success:function(data){
if(data == "scripts/php/status.controller.php"){
}else{
alert(data);
}
}
});
},4000);
});
When I alert(data); it shows me the changes of the updated XML file:
<?xml version="1.0"?>
<loglist resultcount="24"><log id="0"><messagedate>20/06/2014 10:34:48</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="1"><messagedate>20/06/2014 10:34:47</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="2"><messagedate>20/06/2014 10:34:35</messagedate><car>6</car><stat>Quit</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="3"><messagedate>20/06/2014 10:34:32</messagedate><car>8</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="4"><messagedate>20/06/2014 10:34:31</messagedate><car>10</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="5"><messagedate>20/06/2014 10:34:30</messagedate><car>3</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="6"><messagedate>20/06/2014 10:34:28</messagedate><car>2</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="7"><messagedate>20/06/2014 10:24:27</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="8"><messagedate>20/06/2014 10:15:16</messagedate><car>10</car><stat>Quit</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="9"><messagedate>20/06/2014 10:14:01</messagedate><car>4</car><stat>Quit</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="10"><messagedate>19/06/2014 14:07:35</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="11"><messagedate>19/06/2014 13:43:54</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="12"><messagedate>19/06/2014 13:42:58</messagedate><car>1</car><stat>Disp</stat><ping></ping><job>100 BLYTHE ROAD</job><operator></operator><jobref>220213</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="13"><messagedate>19/06/2014 13:42:57</messagedate><car>9</car><stat>Disp</stat><ping></ping><job>4 LILESTONE STREET; LONDON</job><operator></operator><jobref>220620</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="14"><messagedate>19/06/2014 13:42:56</messagedate><car>8</car><stat>Disp</stat><ping></ping><job>4 LILESTONE STREET; LONDON</job><operator></operator><jobref>220618</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="15"><messagedate>19/06/2014 13:42:56</messagedate><car>6</car><stat>Disp</stat><ping></ping><job>3P+3HL 22 MOUNT STREET</job><operator></operator><jobref>221165</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="16"><messagedate>19/06/2014 13:42:54</messagedate><car>5</car><stat>Disp</stat><ping></ping><job>GODOLPHIN LETYMER SCHOOL , IFFLEY ROAD</job><operator></operator><jobref>220211</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="17"><messagedate>19/06/2014 13:42:53</messagedate><car>4</car><stat>Disp</stat><ping></ping><job>32 ABERDEEN PLACE</job><operator></operator><jobref>220774</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="18"><messagedate>19/06/2014 13:42:52</messagedate><car>2</car><stat>Disp</stat><ping></ping><job>45 LOCKBRIDGE COURT WOODFIELD ROAD</job><operator></operator><jobref>221121</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="19"><messagedate>19/06/2014 13:42:50</messagedate><car>89</car><stat>Disp</stat><ping></ping><job>C------ GATWICK AIRPORT NORTH___EZY 8894__MARACUS</job><operator></operator><jobref>220793</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="20"><messagedate>19/06/2014 13:42:48</messagedate><car>43</car><stat>Disp</stat><ping></ping><job>183 EDGWARE ROAD; LONDON</job><operator></operator><jobref>221193</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="21"><messagedate>19/06/2014 13:42:45</messagedate><car>32</car><stat>Disp</stat><ping></ping><job>BEST WESTBURY SHAFTESBURY HOTEL, 27 DEVONSHIRE TERRACE</job><operator></operator><jobref>220989</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="22"><messagedate>19/06/2014 13:42:43</messagedate><car>111</car><stat>Disp</stat><ping></ping><job>22/17 ST. EDMUNDS TERRACE; LONDON</job><operator></operator><jobref>220973</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="23"><messagedate>19/06/2014 13:42:42</messagedate><car>10</car><stat>Disp</stat><ping></ping><job>WESTMINSTER ACADEMY;255 HARROW ROAD</job><operator></operator><jobref>220617</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log></loglist>
But the page logs.php is not updating as it should be.
The logs.php file is populating a list as follows:-
<ul id="loglist" class="main-logs"></ul>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: 'scripts/xml/logs.xml',
datatype: "xml",
success: function(xml) {
var select = $('#loglist');
$(xml).find('log').each(function(){
var car = $(this).find('car').text();
var stat = $(this).find('stat').text();
var job = $(this).find('job').text();
select.append("<li>"+car+' - '+stat+' - '+job+"</li>");
});
}
});
});
</script>
Anyone have any idea why this is not updating?
I tried your example on fiddle and it seems to work perfectly if xml is a string. Try to change your dataType parameter to string instead of xml and it should work.
Here is my example: http://jsfiddle.net/8gEAN/
Try this:
<html>
<body>
<!--list to update-->
<ul id="loglist" class="main-logs"></ul>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
//every 4 seconds send an ajax request to update the XML file
setInterval(function(){
$.ajax({
url:'scripts/php/log.controller.php',
success:function(data){
//when the XML is updated, send another ajax request to retrieve it and update the list
$.ajax({
type: "GET",
url: 'scripts/xml/logs.xml',
datatype: "string",
success: function(xml) {
var select = $('#loglist');
$(xml).find('log').each(function(){
var car = $(this).find('car').text();
var stat = $(this).find('stat').text();
var job = $(this).find('job').text();
select.append("<li>"+car+' - '+stat+' - '+job+"</li>");
});
}
});
}
});
},4000);
});
});
</script>
</body>
Put below function in your ajax call. This may be cache issue.
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
For more details

With ajax and json send clicked text to php and get back php data in popup window

This code, if click on text inside div class="example4DOMWindow" sends defined values to php and then get back php data and in popup window displays data received from php.
Here is example http://jsfiddle.net/rigaconnect/q3RcV/1/
This is ajax that sends and receives data
$(document).ready(function()
{
var one = $("#first_var").text();
var two = $("#second_var").text();
$.ajax({
type: "POST",
url: '__popup-window_ajax.php',
data: {var1: one, var2: two },
dataType: "json",
success: function(data) {
$('#load').html(data);
}
});
});
This part of code displays popup window (sample here http://swip.codylindley.com/DOMWindowDemo.html)
<body>
<div id="first_var" class="example4DOMWindow" style="width: 50px;">text one</div>
<div id="second_var" class="example4DOMWindow" style="width: 50px;">text two</div>
<script type="text/javascript">
$('.example4DOMWindow').openDOMWindow({
eventType:'click',
windowSourceID:'#example4InlineContent',
});
</script>
<div id="example4InlineContent" style="display:none">
<div>
<div id="load"></div>
</div>
</div>
</body>
And this is php file code
$p_one = $_POST['var1'];
$p_two = $_POST['var2'];
$test = $p_one. '<br>test<br>'. $p_two;
echo json_encode($test);
The code sends to php only var that is defined. Like var one = $("#first_var").text(); So if no var inside ajax code, nothing send. And sends all vars.
Necessary the code to send to php only clicked text. User clicks on text one, sends text one and do not send text two; clicks on text two, sends only text two.
Here https://stackoverflow.com/a/17622947/2360831 / http://jsfiddle.net/aGWGn/5/
clicked text is passed as value to javascript.
Tried to put all together like this
$(document).ready(function(){
document.body.onmousedown = whichElement;
var output = document.getElementById("load")
function whichElement(e) {
e = e || window.event;
var targ = e.target || e.srcElement;
if (targ.nodeType===3) {// defeat Safari bug
targ = targ.parentNode;
}
output.innerHTML = targ.innerHTML;
}
//var one = $("#first_var").text();
var one = targ;
var two = $("#second_var").text();
$.ajax({
type: "POST",
url: '__popup-window_ajax.php',
data: {var1: one, var2: two },
dataType: "json",
success: function(data) {
$('#load').html(data);
}
});
});
But the code does not pass var one = targ; to php file (var two also does not pass).
From my understanding the main question is how to pass var targ or var output(?) to var one....
Please, advice what is incorrect
Update
Changed data to data: {var1: output, var2: two },
and in popup window see
[object HTMLDivElement]
test
text two
text two
Changed to var one = targ.innerHTML; but does not work....
Changes to get to work
Changed var output = document.getElementById("load") to var output = document.getElementById("load1")
In html added <div id="load1"></div>
And changed
//var one = $("#first_var").text();
var one = targ;
var two = $("#second_var").text();
to var one = $("#load1").text();
Now seems work. But think the code need improvements
From what I understand, you need to pass only the clicked text to php, right?
If so, you don't need all that code from the moment you are using jquery. You just need to attach a 'click' event handler to .example4DOMWindow and send only the text of the clicked div.
index.html:
<body>
<!--
<script src="jquery-2.0.3.js"></script>
<script src="jquery.DOMWindow.js"></script>
-->
<div id="first_var" class="example4DOMWindow">text one</div>
<div id="second_var" class="example4DOMWindow">text two</div>
<div id="example4InlineContent" style="display:none">
<div id="load"></div>
</div>
<script>
$(document).ready(function() {
$('.example4DOMWindow').openDOMWindow({
eventType:'click',
windowSourceID:'#example4InlineContent',
});
$(".example4DOMWindow").on('click', function(event){
$.ajax({
type: 'POST',
url: '__popup-window_ajax.php',
data: { 'clickedText' : $(this).text() },
success: function(data) {
$('#load').html(data);
}
});
});
});
</script>
</body>
__popup-window_ajax.php:
<?php
$var = $_POST['clickedText'];
echo json_encode($var);
?>

TypeError: $(...) not a function

I've used jQuery to create a page where users can click on a cell in a table that says, "delete," and it will send an ajax request to delete that entry from a database based on the id of the cell and then it will alter the CSS to hide the cell.
I created a test page while I was creating/tweaking the jQuery code. This page works perfectly. Here is the code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
(function( $ ){
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
})( jQuery );
});
</script>
</head>
<table border="1">
<tr>
<td>Cell 2, Row 2</td><td onclick="$(this).deleterow(event);" id="13376">delete</td>
</tr>
</table>
<html>
Now I'm working on getting the code to work in the actual page that it's going to be used in. This page has a short form where users can select their name and a date. This form sends an ajax request that returns the results in a div. The data that is returned is a table , and this is where I'm trying to get my function to work. This table has a tablesorter script attached to it and also my function attached to it.
The tablesorter still works fine, but nothing happens when I click the cell with "delete" in it. I used FireBug to look at the issue and it gives me the error, "TypeError: $(...).deleterow is not a function"
Here is the code for the main page where the user submits a form and where the result is loaded in a div:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#myTable').tablesorter();
}
);
</script>";
</head>
<body id="my-students">
<?php include 'header.php'; ?>
<?php include 'nav-tutoring.php'; ?>
<div id="content">
This is where you can view students whom you have assigned to tutoring.
<p>
You may change the way each column is sorted by clicking on the column header.
<p>
<b>Select your name and the date to view students you have assigned for that day.</b>
<form> My form is here; removed to make post shorter </form>
<script>
$('#submit').click(function()
{
$.ajax({
type: 'POST',
url: "mystudents.php",
data: $('#name').serialize(),
success: function(data) {
$("#list").empty();
$('#list').append(data);
}
});
return false;
});
</script>
<div id="list"></div>
Here is the code for the page that is inserted into the div underneath the form. This is the page where the tablesorter works, but I cannot get my function to work. I've also made sure that I include these script libraries in the head of the main page where this div is.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#myTable').tablesorter();
(function($) {
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
})(jQuery);
});
</script>
<table id='myTable' class='tablesorter' border="1">
<thead><tr><th>ID Number</th><th>Last</th><th>First</th><th>Tutoring<br>Assignment</th><th>Assigning Teacher</th><th>Delete?</th></tr></thead><tbody>
<?php
while($row = mysql_fetch_array($data)){
echo "<tr><td>".$row['id']. "</td><td>". $row['last']. "</td><td>". $row['first']."</td><td>". $row['assignment']."</td><td>". $row['assignteacher']."</td><td onclick='$(this).deleterow(event);' id='".$row['pk']."'>Delete</td></tr>";
}
?>
</tbody></table>
I've done many searches based on the error I'm getting, but I just can't seem to fix the problem. Any help would be greatly appreciated.
First it makes no sense to include the $.fn.deleterow = function(event) { inside the document.ready. You should move it outside of that method.
Personally I would change the code to not rely on the inline event handlers in the table. You are using jQuery, so utilize it. Use event bubling to your advantage.
Add it to the table level and listen for click events on the td's that have ids.
$("table tbody").on("click", "td[id]", function(e){
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = this.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
});
jsFiddle
Test if jQuery loaded in console (check for jQuery variable)...
You should wrap your code this way:
(function( $ ){
$(document).ready(function(){
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
});
})( jQuery );
But the most important is check if jQuery are loading correctly and solve it...
Hope it help
try rewriting to a usual javascript function
function deleterow(id) {...}
and in php
echo "<tr><td>".$row['id']. "</td><td>". $row['last']. "</td><td>". $row['first']."</td><td>". $row['assignment']."</td><td>". $row['assignteacher']."</td><td onclick='deleterow(".$row['id']. ")' id='".$row['pk']."'>Delete</td></tr>";
It's due to this:
<td onclick='$(this).deleterow(event);'
JavaScript can't see this as a function due to the enclosing ' '.
What I advise doing is this:
<td class='deleterow'>
then
$(body).on('click', '.deleteRow', function(event) {
$(this).deleterow(event);
});
You'd be better off binding those events using jQuery's handers instead of onclick, which is poor practice. Eg:
$('#myTable').on('click', 'td', function(e) {
$(this).deleterow(e);
});

jquery.ajax post get issue

I am new to studying jquery.ajax. Through some tutorials, I tried some code by myself, but I met some trouble. So I ask for help.
I tried to do this: open a.php, send html data from div#send to b.php, then return the data and show in div#result.
a.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function () {
var params = "value=" + $('#send').text();
$.ajax({
url:'b.php',
type:'post',
dataType:'html',
data:params,
success:data
});
function data (html) {
var str=html.send;
alert(html);
$("#result").html(str);
}
});
</script>
<body>
<div id="result"></div>// I need return 'this is an apple.'
<div id="send">apple</div>
b.php
<?php
echo 'This is an '.$_REQUEST['value'].'.';
?>
You are not sending any valid parameters with the ajax request. If you want the textual contents of #send you need to use:
$('#send').text();
Although that only gives you a string, so it would have to be:
var params = "value=" + $('#send').text();
Apart from that, $_REQUEST is an array, so you have to use something like $_REQUEST['value']
A third point is that your success function is too complicated and wrong (html.send does not exist), it could just be:
success: function(msg){
$("#result").html(msg);
}
To return datas from b.php, you have to do an echo

Categories