Hey Im trying to load another div with passing variable.
Im in the div#main , I want a after click #modifybtn button pass the btn value and load it with another div#modify and working with some query.
im noob for jQuery and ajax, I search in web but cant get solution for this.
please check relevant code and tell me about issue.
here is the div#main #modifybtn button and div#modify
<div id=main>
<button id="modifybtn" value="some_value" >Modify</button>
</div>
<div id="modify">
<?php
$resultmodi=$conn->query("SELECT * FROM vacancy WHERE vc_id='{$_GET['id']}' LIMIT 1 ");
?>
</div>
dashcompany.php inside
<div class="contentcm" >
//contentcm.php page load content here
</div>
this is my jQuery, after clicking button alert showing but not redirect to the #modify div
$(document).ready(function(){
$('.contentcm').load('contentcm.php #main');
$('a').click(function(){ //main and modify division in contentcm.php
var clickedLink1 = $(this).attr('id');
$('.contentcm').load('contentcm.php #' + clickedLink1);
});
});
$(document).on("click", '#modifybtn', function(event) {
var id = $(this).val();
alert(id);
event.preventDefault();
$.ajax({
url: 'dashcompany.php',
type: 'get',
data: {'id' : id},
success: function(response) {
$('#modify').html(response);
}
});
});
This will be initial.html file
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "FILE_NAME.js"></script>
</head>
<body>
<div id=main>
<button id="modifybtn" value="some_value" >Modify</button>
<div id="modify"></div>
</div>
</body>
</html>
Your code in FILE_NAME.js should be like
$(document).on("click", '#modifybtn', function(event) {
var id = $(this).val();
alert(id);
event.preventDefault();
$.ajax({
url: 'dashcompany.php',
type: 'get',
data: {'id' : id},
success: function(response) {
$('#modify').html(response);
}
});
Your js file will load the data from dashcompany.php and load in #modify which is in initial.html file
dashcompany.php
<?php
include_once('connection.php');
$id = $_GET['id'];
$resultmodi=$conn->query("SELECT * FROM vacancy WHERE vc_id='$id' LIMIT 1 ");
$row = $resultmodi->fetch_assoc();
echo "Name: " . $row["name"];
''' print data whatever you need '''
$conn->close();
?>
REASON:
May be you forgot to print data in dashcompany.php file that's why you are getting blank response from ajax request.
And don't forget to include #modify div in the same html file where #main#modify div exists
You can use as follow code, and I suggest you to use post method
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type='button' id="modifybtn" class='btn btn-info' value="some_value">click here</button>
<div class="" id="modify"></div>
<script type="text/javascript">
$(document).on("click", '#modifybtn', function(event) {
var id = $(this).val();
//alert(id);
$.ajax({
url: 'dashcompany.php',
type: 'post',
data: {'id' : id},
dataType: 'json',
success: function(response) {
//now you can call with column name of data table
$('#modify').html("<P>"+response.column_one_name+"</p><br><P>"+response.column_two_name+"</p>");
}
});
});
</script>
And your dashcompany.php page should like this,
<?php
// $localhost = "127.0.0.1";
// $username = "root";
// $password = "";
// $dbname = "db_304";
//
// $connect = new mysqli($localhost, $username, $password, $dbname);
// // check connection
// if ($connect->connect_error) {
// die("Connection Failed : " . $connect->connect_error);
// }
$id = $_POST['id'];
$sql = "SELECT * FROM vacancy WHERE vc_id = '$id' LIMIT 1 ";
$result = $connect->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_array();
} // if num_rows
$connect->close();
echo json_encode($row);
Hope this will help you.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>PHP MySQL Typeahead Autocomplete</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
/*$( "#skills" ).autocomplete({
source: 'singleton.php'
});*/
$("#skills").keyup(function(){
$.ajax({
type: 'post',
url: 'singleton.php/',
data: 'term='+$(this).val(),
success: function(success){
$("#suggesstion-box").html(data);
},
error: function(error){
console.log("error");
}
})
})
});
</script>
</script>
<?php
/*include_once('connection.php');
$conn = new Database();*/
$hostname = "localhost";
$username = "root";
$password = "";
$databasae = "employee";
if(isset($_POST['term'])){
$query = $_POST['term'];
$db = new mysqli($hostname,$username,$password,$databasae);
//get search term
$searchTerm = $_POST['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM city WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
while ($row = $query->fetch_assoc()) {
$data[] = $row['name'];
}
//return json data
echo json_encode($data);
}
?>
<div class="ui-widget">
Enter City Name:
<input type="text" name="city" class="city" id="skills" placeholder="Enter City Name" id="city">
<div id="suggesstion-box"></div>
</div>
</body>
</html>
I'm getting correct value in the network but it does not populating data in suggestion-box div.
I can't figure out where i'm mistaking.
Is it possible that you accidentally replaced 'data' with 'success' in the 'success' callback?
$("#skills").keyup(function(){
$.ajax({
type: 'post',
url: 'singleton.php/',
data: 'term='+$(this).val(),
success: function(success){
$("#suggesstion-box").html(data);
},
error: function(error){
console.log("error");
}
})
})
Should't it be
success: function(data) {
$("#suggesstion-box").html(data);
}
?
I have 2 divs on my html page. When I press my button I want to fill the div #question1 with the question1 data from my database and the #question2 div with the question2 data from my database. Now the 2 divs are filled with the same data.
This is my html and js code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
"use strict";
$('#button').click(function() {
$.ajax({
url: 'getquestions.php',
success: function(data) {
$('#question1').html(data);
$('#question2').html(data);
}
});
});
});
</script>
<input type="button" id="button" value="Load" />
<div id="question1"></div>
<div id="question2"></div>
</body>
</html>
The php file
<?php
$connection = mysqli_connect("localhost", "root", "" , "mobiledatabase");
$query = "SELECT question1, question2 FROM adult_questions WHERE id=3";
$query_run = mysqli_query($connection,$query);
$query_row = mysqli_num_rows($query_run);
if ($query_row==1) {
foreach ($query_run as $row ) {
echo $question1 = $row['question1'];
echo $question2 = $row['question2'];
}
}
?>
Update your php file.
Create an array like $retArr = array("question1" =>$question1,"question2" =>$question2); in your php file Then convert it in to json using json_encode($retArr) & echo json_encode($retArr) In your ajax response show $('#question1').html(data.question1);
Hope this will help
Try this,
In PHP pass it like,
$question1='';$question2='';
if ($query_row==1) {
foreach ($query_run as $row ) {
$question1 = $row['question1'];
$question2 = $row['question2'];
}
}
echo json_encode(array('question1'=>$question1,'question2'=>$question2));
In Jquery,
$.ajax({
url: 'getquestions.php',dataType:'json',
success: function(data) {
$('#question1').html(data.question1);
$('#question2').html(data.question2);
}
});
I'm trying message application. My goal is get sender id and receiver id with a click on one button.
After then post this datas with ajax or ajax(json) to php in same page.
I will use the incoming data in php with mysql_query. I tryed many examples. But never get result. My example code at below.
Little Note: Success alert comes but doesn't print any data on screen.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button type="button" onclick="myFunc()">Get ID</button>
<script>
function myFunc()
{
var id = 'example';
jQuery.ajax({
url:'index.php',
type: "POST",
data: {'name':id},
success: function(data)
{
alert("success");
}
});
};
</script>
<?php
if(isset($_POST['name']))
{
$value = $_POST['name'];
echo $value;
}
else
{
echo "don't work.";
}
?>
</body>
</html>
<?php
if(isset($_POST['name']))
{
echo json_encode(array(
'value' => $_POST['name']
));
exit();
}
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button type="button" onclick="myFunc()">Get ID</button>
<script>
function myFunc()
{
var id = 'example';
jQuery.ajax({
url:'index.php',
type: "POST",
data: {'name':id},
dataType : 'json',
success: function(data)
{
alert("success");
}
});
};
</script>
</body>
</html>
This question already has answers here:
JavaScript does not fire after appending [duplicate]
(3 answers)
Closed 7 years ago.
I have searched all over for this and cannot find a solution. I am still a beginner in both PHP and AJAX, so please bear with me.
I have a file fetch.php which generates content for my page index.html.
Fetch.php gets data from a MySQL database and adds it to my index page like this:
while ($res = mysqli_fetch_array($rs)) {
$str .= '<div class="task" id='.$res['tid'].'>
<table>
<tr>
<td>
<button class="btnDelete" data-id="'.$res['tid'].'">x</button>
</td>
<td>'.$res["name"].'</td>
</tr>
<tr>
<td>'. $res["task"].'</td></tr></table></div>';
}
echo $str;
The "tid" being my table index. Now, when I click the button with the data-id of 1, I want to delete the row with the tid of 1.
<script type="text/javascript">
$('.btnDelete').click(function() {
var recordid = $('.btnDelete').data('id');
$.ajax({
type: 'POST',
url: 'remove.php',
data: { 'id': recordid},
});
});
</script>
This sends the (supposed to) data-id to the following PHP.
$con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);
if (!$con) {
die("Can not connect: " .mysql_error());
}
$id = $_POST['recordid'];
$sql = "UPDATE tasks SET visible = 'hide' WHERE tid = $id ";
$query = mysqli_query($con, $sql);
if(mysqli_affected_rows($con)) {
echo "Record deleted successfully";
}
mysqli_close($con);
My PHP files work, but nothing happens when I click the button?
Below is my complete HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript">
$(function() {
getStatus();
});
function getStatus() {
$('div#data').load('fetch.php');
setTimeout("getStatus()",300000);
}
</script>
</head>
<body>
<div id="data">
</div>
<script type="text/javascript">
$('.btnDelete').click(function() {
var recordid = $('.btnDelete').data('id');
$.ajax({
type: 'POST',
url: 'remove.php',
data: { 'id': recordid},
});
});
</script>
</body>
</html>
How can I get the AJAX to trigger on the buttonclick and send the data-id to remove.php?
This is not a duplicate, it is an AJAX question and not a MySQL question
As your AJAX loads your HTML and injects it in to the page, you'll have to use on event when binding.
$(document).on("click", ".btnDelete", function () {
/** Your code here. **/
});
Reading Material
Event Delegation
I have created a simple app using Phohegap to retrieve few records frm a remote database using the following index.html:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.4.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
<script charset="utf−8" type="text/javascript">
function connect(e)
{
var term= {button:e};
$.ajax({
url:'http://dubaisinan.host22.com/reply.php',
type:'POST',
data:term,
dataType:'json',
error:function(jqXHR,text_status,strError){
alert("No Connection");},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
</script>
</head>
<body>
<center><b>My Students</b></center>
<center><input onclick="connect(this.value)" type="button" value="showStudents" /></center>
<center><b>Results</b></center>
<ul data-role="listview" id="result"></ul>
</body>
</html>
And the following reply.php:
<?php
header('Content-Type: application/json');
$link = mysql_connect('host_name', 'user-name', 'password');
if (!$link)
{
$myStudents[] = "No";
die('Could not connect: ' . mysql_error());
}
mysql_select_db("a2808249_db1",$link);
$result = mysql_query("SELECT * FROM Students",$link);
while ($myrow = mysql_fetch_row($result))
{
$myStudents[] = $myrow[1];
}
print json_encode($myStudents);
?>
It works fine on my laptop but when I build it using Phonegap and download the apk file on my Note 3 device, I receive the message "No Connection". It seems that the app is not able to connect to the Internet. The device has Internet connection.
Any help please?
Sinan
Add these lines
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
Also you said you want to retrieve, so this should be a GET call , not POST.
Also use <!DOCTYPE html> (proper coding standard)
Edit : Example GET call
$.ajax({
url: "http://abcd.com",
headers: {
"X-API-KEY": "2b9asdedqedqxdqd7956e6f7a",
"Content-Type": "application/json"
},
type: "GET",
data: fromDatan,
dataType: "JSON",
success: function(fromData, status, jqXHR) {
alert(JSON.stringify(fromData));
},
error: function(jqXHR, status) {
alert(JSON.stringify(jqXHR));
}
});
EDIT : This is a sample code which can POST to a test server
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="javascript" type="text/javascript">
<!--
function greeter() {
var accx = 5;
var accy = 6;
var accz = 7;
var output = [];
output[0] = {
name: "Accel_X",
value: accx.toString(), // retrieve x
};
output[1] = {
name: "Accel_Y",
value: accy.toString(), // retrieve y
};
output[2] = {
name: "Accel_Z",
value: accz.toString() // retrieve z
};
var fromData = {};
fromData.output = output;
var fromDatan = JSON.stringify(fromData);
alert(fromDatan);
jQuery.ajax({
url: "http://posttestserver.com/post.php",
type: "POST",
data: fromDatan,
dataType: "JSON",
success: function(fromDatan, status, jqXHR) {
alert(JSON.stringify(fromData));
},
error: function(jqXHR, status) {
alert(JSON.stringify(jqXHR));
}
/*
error:function(jqXHR,text_status,strError){
alert("No Connection");},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}*/
});
return false;
}
//-->
</script>
</head>
<body>
<button onclick="greeter();">Click me</button>
</body>
</html>
I tried with your url, not working. However will let you know if I can