Send information to PHP file using ajax and load this file to a div using .load()?

Question

This is my ajax script:

var cid = $(this).data('cid');
var sendData = { canidtoset: cid };

$.ajax({
    url: '/functions/cv_showinformation.php',
    type: 'post',
    data: sendData,
    dataType: 'json',
    success: function(data) {

        $('#can-viewer .cv--informationtab .infotab--inner')
        .load("/functions/cv_showinformation.php");

    }
});

It gets the value of an attribute called data-cid from an clicked element. This value should be send to an PHP-Script that gets included into a div after the element was clicked. The PHP-Script:

<?php

    if(isset($_POST['canidtoset'])){

        $canid = $_POST['canidtoset'];
        echo $canid;

    } else {

        echo "Something went wrong";

    }

?>

In the end it should show the value from the attribute in the div. But it doesn't even gets included so I believe the data wasn't set. Where the hella is the mistake?

Pang · Accepted Answer · 2017-06-29 01:53:19Z

2

If you want to use .load() then we can do like this to avoid errors

var cid = $(this).data('cid');
var sendData = { canidtoset: cid };

$.ajax({
    url: '/functions/cv_showinformation.php',
    type: 'post',
    data: sendData,
    dataType: 'json',
    success: function(data) {

        $('#can-viewer').load('test.php?canidtoset='+ data);

    }
});



<div id='can-viewer'></div>

/functions/cv_showinformation.php :

if(isset($_REQUEST['canidtoset'])){
        $canid = $_REQUEST['canidtoset'];
        echo $canid;

    } else {
        echo "Something went wrong";

    }

edited Jun 29, 2017 at 1:53

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jun 25, 2017 at 4:02

harsh kumar

1658 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joel Glovacki · Accepted Answer · 2017-06-24 22:01:05Z

1

dataType: json means the data coming from your server is expected to be json (you're sending plain text).

the second issue is that your .ajax call should be all you need. the .load call is accomplishing the same thing without your passed value.

the easiest solution should be to change your dataType to html

var cid = $(this).data('cid');
var sendData = { canidtoset: cid }

$.ajax({
    url: '/functions/cv_showinformation.php',
    type: 'post',
    data: sendData,
    dataType: 'html',
    success: function(data) {

        $('#can-viewer .cv--informationtab .infotab--inner').html(data);

    }
});

or, you can pass post data to .load as well. just make sure you replace your .ajax call with it instead of nesting it inside the success callback.

$('#can-viewer .cv--informationtab .infotab--inner')
    .load("/functions/cv_showinformation.php", { 
        canidtoset: $(this).data('cid') 
    });

edited Jun 24, 2017 at 22:01

answered Jun 24, 2017 at 21:51

Joel Glovacki

8135 silver badges14 bronze badges

1 Comment

J. Ano Over a year ago

Thank you alot. The second method works just fine tho.

Collectives™ on Stack Overflow

Send information to PHP file using ajax and load this file to a div using .load()?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related