On the first page load all my database items are displayed via php. I have some jquery code that allows these items to be dragged and deleted. I have an input field and button and when the button is pressed Ajax is called and an entry is added to the database. I am able to update the page to show this new entry, but my jquery code no longer works.

How can I refresh the javascript/jquery file after Ajax is called? I can post my code, but there is a lot of it and might be confusing.

  • Are you able to post snippets of the codes here? Just the parts concerned will do. Or if you have it online for us to browse to, will be great. What you want to do isn't uncommon and I'm quite sure it can be achieved. o.k.w over 6 years ago

4 answers

Chad 25
0
points
This was chosen as the best answer

Take a look at the jQuery .live() method.

Description: Attach a handler to the event for all elements which match the current selector, now or in the future.

Or I could be reading your question all wrong. ;)

Answered over 6 years ago by Chad
  • Stephen, posting answers to your own questions is frowned upon. Did you know that you can actually EDIT your original question any time you like? Gary Hepting over 6 years ago
0
points

I do not believe live() is what I am looking for.

I have jquery code that makes all things with the class .draggable draggable:

$(".draggable").draggable({
        revert:true,
        containment: 'container'
    });

I have some other jquery php and ajax code that pulls data from a database and displays it on the page, all without a reload.

var ajaxRequest;  // The variable that makes Ajax possible!
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.getElementById("items").innerHTML = ajaxRequest.responseText;
        }
    }
    var itemName = document.uploadForm.itemName.value;
    itemName = "?itemName=" + itemName;
    ajaxRequest.open("GET", "js/uploadItem.php" + itemName, true);
    ajaxRequest.send(null); 

After this Ajax is executed my javascript/jquery is no longer recognized and I cannot drag things anymore. How do I keep this from happening?

Answered over 6 years ago by Stephen Cronin
  • Just realized the reason behind why it is not working. When the page is first loaded the items div is filled with the items in the database and these are made draggable because they have the draggable class. My ajax code posted above, when called, refills the items div with the items in the database giving them the class draggable. What I think is happening is jquery is not recognizing these elements as having the draggable class. So i need to figure out how to have the javascript rescan the html to see which elements have certain classes/ids. Stephen Cronin over 6 years ago
0
points

Ok was able to replicate the problem and realized the problem is just with javascript and not Ajax.

I have this html:

<div id="holder">
<div class="square"></div>
</div>

<div id="button"></div>

And this javascript/jquery:

$(document).ready(function(){

    $(".square").draggable({
        //revert:true,
        containment: 'holder'
    });

    $("#button").click(function() {
        document.getElementById("holder").innerHTML = '<div class="square"></div>';
    });

});

Before clicking button I can drag square around. After clicking button I cannot. I am assuming javascript goes through the file when it is first loaded and finds all the elements that are called in the javascript. How can I have javascript rescan the document?

Answered over 6 years ago by Stephen Cronin
0
points

solved it. Used this instead of the other draggable code, guess live was the answer.

<pre>$(".square").live('mousedown', function() {
        $(this).draggable({
            //revert:true,
            containment: 'holder'
        });
    });</pre>
Thanks
Answered over 6 years ago by Stephen Cronin