jquery ui button not appearing after ajax call

Question

I have a jquery ui button in a main page (index.php) which appears and works fine. In the main page I have a div <div id="cardarea"> which I use as a placeholder for dynamic content. The dynamic content is stored in another file (cardarea.php) and elements from this file is displayed dependent on the $_GET['key']; variable it gets from input forms in the main page.

Now the problem is that when I try to include the same jquery ui button (<settingsbtn>) in a part of the contents in the file cardarea.php, this does not display.

The javascript code and definitions are included in the header of index.php. I guess the button in the file cardarea.php cannot reach this information, or that there is an error in my javascript definitions. I've tried including the same javascript code and definitions also in the file cardarea.php, but with no effect.

I'm really quite at a loss of what is the problem here. I will include the javascript definitions, but I'm not sure what other code may be relevant to decifer this problem. Please let me know what additional information may be useful to find the problem, if applicable. Thanks.

Javascript:

    $(function() {

$( "settingsbtn" ).button({
        icons: {
                    primary: "ui-icon-triangle-1-s"
                },
        text: false
});

}); 

</script>

INDEX.PHP

<?php


include 'functions.php';
include 'incl_ajax.php';


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/amariffic.css" rel="stylesheet" type="text/css" />
<title>Test</title>


    <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.js"></script>

    <?php include 'snip_javascript.php'; // innholder både kode og css-link. ?>

</head>



<body class="body">

<settingsbtn></settingsbtn>

<a href="javascript:ajaxpage('_cardarea.php?key=5', '_cardarea');" class='nodecor'>Show</a>

<div id="_cardarea"></div> 

</body>
</html>

CARDAREA.PHP

<?php

include 'functions.php';
$key = $_GET['key']; 


    if ($key == '5') {
        echo '<div>';
        echo 'Button: <settingsbtn> </settingsbtn>';
        echo '</div>';
    }

?>

why don't you just use css to set the button background or just use an IMG tag? — php_nub_qq
– php_nub_qq, Commented May 29, 2013 at 17:19
I've added code now. Please also see bryggelogg.vinterstum.no/_index.php for the problem manifest with the above code. — jensmtg
– jensmtg, Commented May 29, 2013 at 17:41

funforums · Accepted Answer · 2013-05-29 21:04:05Z

2

You have to run the Javascript function you already wrote again after you complete the AJAX request.

Your function you have to run again:

$(function() {

$( "settingsbtn" ).button({
        icons: {
                    primary: "ui-icon-triangle-1-s"
                },
        text: false
});

});

I actually ran that function in my Chrome console after the AJAX call, and the second button was correctly shown.

Just define in your javascript functions:

function initButtons(){
   $( "settingsbtn" ).button({
           icons: {
                       primary: "ui-icon-triangle-1-s"
                  },
           text: false
   });
}

Then overvrite your previously pasted javascript code with:

initButtons();

In the end, you have to add this function call to the end of your AJAX callback function:

initButtons();

put it just right after the instruction where you append the code you recieve from AJAX to the HTML.

EDIT: i looked at your code and i saw that you should put this function here:

function ajaxpage(url, containerid){
[...]
   page_request.onreadystatechange=function(){
   loadpage(page_request, containerid)
   initButtons();
   }
[..]
}

edited May 29, 2013 at 21:04

answered May 29, 2013 at 18:17

funforums

3361 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

jensmtg Over a year ago

That sounds reasonable, but do you have any suggestion of how to put it in code, as compared to in the console?

jensmtg Over a year ago

Thanks! It looks like that solved my main problem. (The only thing I'm wondering about now is that the second button seem to disappear after a short while, but at least it's another problem...)

funforums Over a year ago

Actually, i'm trying to load your website but it gives me this error: Uncaught ReferenceError: inject is not defined

jensmtg Over a year ago

Oh, yes, my bad. That should be fixed now.

funforums Over a year ago

I made it wrong. You have to put initJs(), or initButtons() in my solution, at the end of the AJAX callback function. When the AJAX call is completed and the server text is appended to the HTML, call the initJS() function right after.

|

php_nub_qq · Accepted Answer · 2013-05-29 17:20:22Z

0

Perhaps delegate() is what you are looking for.

answered May 29, 2013 at 17:20

php_nub_qq

16.1k25 gold badges84 silver badges150 bronze badges

Collectives™ on Stack Overflow

jquery ui button not appearing after ajax call

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related