Question

I’m new to jQuery, I used this code but it does not work:

<script type="text/javascript" src="jquery.js" ></script>
<script>
    $(document).ready(function(){
        $("#add_cl").click(function(){
            $("#formtag").load("main.php");
        });
    });
</script>  

On clicking the button having id="add_cl" want to load main.php in #formtag like ajax. On clicking it, it shows main.php page in live view in Dreamweaver but not in Chrome and Firefox.

Answer 1

• I suppose you’re using Chrome. You should use a local server like Xampp to make this work locally. Or upload it to your online server to test. should work!
• Instead of using localhost try with: 127.0.0.1
• Chrome fights a bug using AJAX due to same origin policy or something related to it, so don’t get mad and use some other browser. P.S: I use XAMPP and Chrome, and AJAX works really well. hope it helps

Related to your comment:
to load different pages inside the same element try using the data attribute to store your URLs:

<button class="loader" data-loadpage="main.php"> Load main.php </button>
<button class="loader" data-loadpage="about.php"> Load about.php </button>
<button class="loader" data-loadpage="contact.php"> Load contact.php </button>

$(document).ready(function(){
    $(".loader").click(function(){
        $("#formtag").load( $(this).data('loadpage') );
    });
});

additionally you could try also .empty() to remove old content from your #formtag:
$("#formtag").empty().load( $(this).data('loadpage') );