Execute PHP script onclick with jQuery

Question

Hello I'm struggling to get this to work:

I'm trying to get jQuery to execute a PHP Script for me, at the moment it looks pretty much like this:

html

<button id="element">Click me!</button>

php

$string = "Hello Earth!";
echo $string;

jQuery

$('#element').click(function() {
 $.load('.../script.php', function(e){
 console.log(e);
 });
});

• Dan Smith: Which part isn't working? Error messages?
• Daan: That is not were the load function is for from the jQuery manual: Description: Load data from the server and place the returned HTML into the matched element.
• aley: the only error I have in my console is ReferenceError: $ is not defined (test.html:11) which is the line $('#element').click(function() {
• Pointy: That's a pretty important error :) It means that you haven't correctly imported jQuery, so absolutely none of your code will work.
• aley: Oh right I'm sorry I forgot to put it into my test script x) now im getting: TypeError: $.load is not a function

Answer 1

.load() must be called on an element, like this:

$('#element').click(function() {
 $('#element').load('.../script.php', function(e){
 console.log(e);
 });
});

Answer 2

The load() method loads data from a server and puts the returned data into the selected element. from http://www.w3schools.com/jquery/jquery_ajax_load.asp

Correct sintax:

$( "#result" ).load( "ajax/test.html" );

And you have to correct your code, you have .../script.php instead of ../script.php

• aley: Question: Is it possible instead of replacing the content of my element, to append/prepend the value?
• lmarcelocc: Shure. Something like this example: code$('#element').click(function() { $.get('retrieve.html', function(data, status){ // data is retrieve.html, then you can append/prepend it wherever you want alert("Data: " + data + "\nStatus: " + status); }); }); code
• aley: Is it possible with .load? I'd like to prevent to use get if I I'm not going to submit any value.
• aley: Also you seem to stuggle with the ´code´ tags code, just place them around your code like this: ´stuff´ => stuff (I used to reverted tags to display it) And I just Googled a bit and found the solution here: forum.jquery.com/topic/load-but-append-data-instead-of-replace
• lmarcelocc: Sorry about the tags. Nice to hear you googled it. You could use it this way to: $('#element').click(function() { $("#returnedResult").load("retrieve.html", function(responseTxt, statusTxt, xhr){ console.log(responseTxt); }); })

Answer 3

<button id="element">Click me!</button>

<?php $string = "Hello Earth!"; echo $string; ?>

$('#element').live('click',function() {
 $.ajax({
 method:'POST',
 success:fuction(data){
 'your coe here';
 }
 })
});