Jquery doesn't work after loading a PHP by ajax

Question

I try to load a php file by ajax.

This works fine by this code:

<body id="top">     
<div id="loadajaxhere"></div>
<script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("loadajaxhere").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", "myfile.php", true);
    xmlhttp.send();
</script>

But in my php file are jquery plugins, which dont work after loading via ajax... Maybe the solution is to using the ajax by jquery syntax. Is it right?

I tried it, but my Ajax didn't load the php... It should load the php automaticlly by loading the page in a defined div.

Many thanks in advance!

Is there any JQuery function calling? Please place that code. Also check your browser console for JS error if any. — AddWeb Solution Pvt Ltd, Jan 20 '16 at 12:24
There is no need to load any javascript with ajax. Just add it to the current page, if necessary inside some logic. For example http://stackoverflow.com/questions/15521343/conditionally-load-javascript-file — online Thomas, Jan 20 '16 at 12:30
I tried the content by copy the content of myfile.php instead of the
. this works fine. The content are normal html, php and jquery scripts, but this cant be the problem. — Matthias Stähle, Jan 20 '16 at 12:31

Gangadhar · Answer 1 · 2016-01-20T17:08:44.680

0

  <script>
       $.ajax({
                url: "myfile.php", 
                success: function(result){
                     $("#loadajaxhere").html(result);
                }
      });
 </script>

edited Jan 20 '16 at 17:08

answered Jan 20 '16 at 12:31

Gangadhar

11
2

okay, it is loading, but it returns a different than the non-jquery function. – Matthias Stähle Jan 20 '16 at 12:37
4

Please explain your answer. It is currently viewed as a low quality post. Thanks! – Dropout Jan 20 '16 at 14:32

score 0 · Answer 2 · answered Jan 20 '16 at 12:37

0

use Jquery ajax in stead. for example:

$.ajax({
        url: 'myfile.php',
        type: 'GET',
        data: {'submit':'true'}, // An object with the key 'submit' and  value'true';
        success: function (result) {
          document.getElementById("loadajaxhere").innerHTML = result;
        }
    });

answered Jan 20 '16 at 12:37

Hamid hd

103
1
2
12

its loading, but the jquery scripts in my content file, do not work. – Matthias Stähle Jan 20 '16 at 13:11

score 0 · Answer 3 · edited May 23 '17 at 11:59

A small part a solved

a small script in myfile.php works now:

<script type="text/javascript">
//$('.triggermore').click(function(){ //<- This is the old line
$('body').on('click', '.triggermore', function(event){ //<- This is the new one
        $(".weitere").slideDown();
        $(".weitere").addClass("open");
        $(".triggermore").addClass("bye");
        $('html, body').animate({ scrollTop: $("#weitere").offset().top }, 1000);       
});
</script>

Source of this solution: JQuery effect doesnt work for ajax content

But this huge script is stil not working:

<script type="text/javascript">
$(document).ready(function() {

    //http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/
    var nav_container = $(".menu");
    var nav = $("nav");

    var top_spacing = 0;
    var waypoint_offset = '40%';
    var first_section = '0%';

    nav_container.waypoint({
        handler: function(event, direction) {

            if (direction == 'down') {
                nav_container.addClass("sticky")
                .stop()
                .css("top", -nav.outerHeight())
                .animate({"top" : top_spacing});
            } else {    
                var inputPos = $( 'input:first' ).position();
                nav_container.stop().removeClass("sticky").css("top",first_section).animate({"top":first_section});
            }

        },
        offset: function() {
            return -nav.outerHeight()-waypoint_offset;
        }   

    });

    var sections = $("section");
    var navigation_links = $(".menu li a");
    var links = $("nav a");

    sections.waypoint({
        handler: function(event, direction) {

            var active_section;
            active_section = $(this);
            if (direction === "up") active_section = active_section.prev();

            var active_link = $('.menu li a[href="#' + active_section.attr("class") + '"]');
            navigation_links.removeClass("selected");
            if(active_section.attr("class") != "top") {
                active_link.addClass("selected");
            }

        },
        offset: waypoint_offset
    })


    links.click( function(event) {

        $.scrollTo(
            $(this).attr("href"),
            {
                duration: 1500,
                offset: { 'left':0, 'top':0 }
            }
        );
    });




});

</script>

**The Jquery Scripts are in my index.php not in myfile.php. only the html markup an in the myfile.php

score 0 · Answer 4 · answered Jan 20 '16 at 14:32

Okay, I found an answer by myself.

Im using this:

$.ajax({
        url: 'myfile.php',
        type: 'GET',
        data: {'submit':'true'}, // An object with the key 'submit' and  value'true';
        success: function (result) {
          document.getElementById("loadajaxhere").innerHTML = result;
        }
    });

And pasting my scripts in the succes function. But not everything is working. I'm on it.

Jquery doesn't work after loading a PHP by ajax

4 Answers4