使用AJAX / Jquery替换div

Question

I am trying to set the content of an empty div after an AJAX call with the data message. I also wired the function to my CHtml::submitButton , which should call the function when clicked, but nothing is happening. Any suggestions?

<div id="myResult">        
</div>

JavaScript :

function successMessage(){
    $.ajax({
        type: "GET",
        data: "<div> Replace div with this contentf</div>",
        success: function(data){
            $('myResult').html(data);
        }
    })
}

PHP:

echo CHtml::beginForm(array('myForm'), 'get', array('form'));
echo '<div class="row form">';
echo '<div class="row buttons">';
echo CHtml::submitButton('Download Content', array('htmlOptions' => 'successMessage()'));
echo '</div>';
echo '</div>';

Answer 1

Try this:

 $.ajax({
             url: "test.html",
            type: "GET",
            data: "<div> Replace div with this contentf</div>",
            success: function(data){
                $('#myResult').html(data);
            }
        })

selector jQuery incorrect in response ajax. and define Url in ajax.

Answer 2

Your problem relies in the following line:

$('myResult').html(data);

Here, you are trying to do a jquery selection to an element, which you are not using in your html (this is only possible via pollyfils). So you have to select the element by its ID:

$('#myResult').html(data);

And another thing i've seen, what is the url where you are doing the request?

<script>
    function successMessage(){
        $.ajax({
            type: "GET",
            url: "/please/add/an/url/",
            data: "<div> Replace div with this contentf</div>",
            success: function(data){
                $('myResult').html(data);
            }
        })
    }
</script>

Answer 3

first of all, when you are using onclick function like this :

<input type="submit" onclick="successMessage()">

you should use this instead:

<input type="submit" onclick="successMessage();result false;">

but when you are already using jquery, then better approach is:

 $( document ).ready(function() {
        successMessage(){
           // your ajax goes here
        }

        $('#myResult').click(function(e){
          e.preventDefault();
          successMessage();
        });
     });

Then you need to repair your successMessage function. You see, the data you are setting there are not the data, that are coming out as an output. If you need ajax then you probably want to get the result from some php script on some other url. Then you should do it like this :

function successMessage(){
        $.ajax({
            type: "GET",
            url : 'index2.php',
            dataType: "json",
            data: { mydata: '<div> Replace div with this content</div>'},
            success: function(data){             
                $('#myResult').html(data);
            }
        })
    }

Then you need a php file named index2.php which can look like this :

<?php
    echo json_encode($_GET['variable']);
?>

And i dont know if this your line :

echo CHtml::submitButton('Download Content', array('htmlOptions' => 'successMessage()'));

also put the </form> tag after the form to close it.

This should work for you. I tried it and it works fine.