AJAX load to another div with variable

Question

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); 
      }
  });
});

After reading your question what i got is after clicking #modifybtn, the jquery ajax request response should be loaded in #modify. Is that right? And is #modifybtn and #modify is in the same page or external page. — varun teja-M.V.T
– varun teja-M.V.T, Commented May 9, 2020 at 2:54
is there #modify div in dashvompany.php? or if not can you provide that code part in dashvompany.php — Lakmal Bodhinayaka
– Lakmal Bodhinayaka, Commented May 9, 2020 at 2:59
You have to define <div id="modify"> inside your initial PHP file. And in the dashcompany.php file fetch the data and create corresponding HTML components inside this file. so this HTML code will return to AJAX response and same will get added in main HTML. — jithu thomas
– jithu thomas, Commented May 9, 2020 at 3:09
@LakmalBodhinayaka sorry for that dude.i froget to mention those updates.**first time i cant place my problem correctly.** that reason im updated this.Thanks for the trying to help dude. also varunteja-M.V.T — Vishva Madumal
– Vishva Madumal, Commented May 9, 2020 at 15:59

varun teja-M.V.T · Accepted Answer · 2020-05-09 03:38:13Z

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

marc_s · Accepted Answer · 2021-04-02 06:26:47Z

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.

Collectives™ on Stack Overflow

AJAX load to another div with variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related