Question

I’m trying to execute a jquery code from a php page called by ajax.

Change html of div.error

Here’s the code(If there is an easier way just tell/post):-no $.load

HTML/jQuery: jquery.js already linked

<input type='text' id='test'>
<div id='error' style='display:inline-block;'>CHANGE HERE</div><bR>
<input type='submit' value='run' id='button'>

<script type='text/javascript'>
$('#button').click(function(){
$.ajax({
    url: "test.php",
    type: "POST",
    data: "test="+ test,
    success: function(jqXHR){
    },
    error: function() {
        alert('error');
    }
});
});
</script>

test.php

<script type='text/javascript'>
$('#error').html('working');
</script>

Answer 1

The test variable that you are using doesn’t seem to be declared anywhere. Try hardcoding first. Also the {key:value} syntax is preferred as it ensures to properly url encode the value when sending to the server:

data: { test: 'some value' }

and if you want to use a variable, make sure you have declared it:

$('#button').click(function() {
    var test = 'foo bar';
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: { test: test },
        success: function(data) {

        },
        error: function() {
            alert('error');
        }
    });
});

Also if you want the javascript to execute in your php script remove the <script> tags:

$('#error').html('working');

and specify the dataType parameter to script in your $.ajax call:

dataType: 'script'

Another possibility is to have your test.php script simply return the value:

working

and then inside the success callback refresh the DOM:

success: function(data) {
    $('#error').html(data);
},