Div reload doesn't work

Question

I want to reload a div after the click on a button. It works in Chrome, Firefox and Opera but in edge and Internet Explorer the reload doesn't work. It doesn't work when I click the button, or when i refresh the page. After I clear the Cache I get the right Information one time.

When I push the button I get the message "hier". But the div will not be reloaded in edge or Internet Explorer. The insert in database works, tho.

PHP:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
        $(document).ready(function (e) {
                $("#formfarbe").on('submit',(function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: "insertColor.php",
                        type: "POST",
                        data:  new FormData(this),
                        contentType: false,
                        cache: false,
                        processData:false,
                        success: function()
                        {   
                            reloadeigeneColor();
                        },
                        error: function() 
                        {
                        }           
                   });
                })); 
                //Seiten laden auf klick
                $('#usecolor').click(function(event){ 
                    $("#eigenecolor_liste").load('./showOwnColor.php');   

            });
        </script>

...

<div id = 'eigenecolor'>
    <br>
    Farbe einfügen:
    <br><br>
    <form id = 'formfarbe' method = 'POST'>
        #<input type = 'text' name = 'owncolor' id = 'owncolor' style = 'width: 10vw;'><br><br>
        <input type = 'submit' name = 'usecolor' id = 'usecolor' value = 'hinzufügen'>
    </form>
    <br>
    <div id = 'eigenecolor_liste'>
        <?php
            $query = mysqli_query($connect,"select name,wert from color order by id desc");
            while ($zeile = mysqli_fetch_array($query,MYSQLI_ASSOC)):

                echo "<div id = 'farbe' style = 'background-color: #$zeile[wert];'>";
                echo "</div>";                      

            endwhile;   
        ?>
    </div>
</div>

...

JS Script

...

function reloadeigeneColor(div,page)
{
    alert('hier');

    //Eigene Colorliste div wird neu geladen
    $("#eigenecolor_liste").load('./showOwnColor.php'); 
}

...

showowncolor.php

<?php
    require("./connect.php");

    $query = mysqli_query($connect,"select name,wert from color order by id desc");
    while ($zeile = mysqli_fetch_array($query,MYSQLI_ASSOC)):

        echo "<div id = 'farbe' style = 'background-color: #$zeile[wert];'>";

        echo "</div>";                      

    endwhile;   
?>

Does the script showOwnColor.php actually return some content or is the response empty? — Martin Staufcik, Jan 14 '16 at 21:40
there is an query to database which will load all Colors. there is no return — Stefan Gum, Jan 14 '16 at 21:42

score 0 · Answer 1 · answered Jan 14 '16 at 21:54

0

A few things to check would be:

$("#eigenecolor_liste").length is 1
whether content is returned, this could be checked by using $.ajax() instead of (or in parallel to) .load() to see if it returns the content, then use .html() to assign the content to the element

answered Jan 14 '16 at 21:54

Martin Staufcik

8,295
4
44
63

I checked this: $("#eigenecolor_liste").length result: 1 and with .html i get the correct Code back. – Stefan Gum Jan 14 '16 at 22:00
i see, i delete the database and then i reload the page. after this procedure i get back the old datas. ?????????? – Stefan Gum Jan 14 '16 at 22:02
So the result of showowncolor.php is returned from cache? OK, is seems another issue. The first one is, why the content is not replaced in the element, even if the element is found by JQuery and content HTML is returned. This should work. Another test would be to try to set any content string to the element by using HTML DOM's `.innerHTML` property. – Martin Staufcik Jan 14 '16 at 22:10
so i get back the right data when i delete the load function and i add innerHTML (refresh the page) it work's fine. is it possible edge / IE has a Problem with the load function? – Stefan Gum Jan 14 '16 at 22:18
It looks IE may have caching problem as described [here](http://stackoverflow.com/questions/1061525/jquerys-load-not-working-in-ie-but-fine-in-firefox-chrome-and-safari), the two things (caching and not displaying) may be connected. – Martin Staufcik Jan 14 '16 at 22:23
I found one way: $.ajaxSetup({ cache: false }); it helps. IE / Edge doesn't Cache anymore. – Stefan Gum Jan 14 '16 at 22:50

Div reload doesn't work

1 Answers1