www.webdeveloper.com
Results 1 to 4 of 4

Thread: Update DOM after html callback - Undefined function

  1. #1
    Join Date
    Sep 2013
    Posts
    2

    Update DOM after html callback - Undefined function

    I am doing a search and php is returning the results correctly. Part of the returned html includes a href. The href does not work, the console is reporting 'deleteCatalogue' is not defined. I am guessing that the updated DOM cannot find the defined function in the js file linked to index.html.

    What is the best way to ensure any updates to the DOM sync any selectors in the loaded html with any methods/functions loaded prior to callback?

    Index.html executes:

    Code:
    function searchCatalogue(search) {     
        var dataString = 'search='+search;         
        $.get('php/catalogue_search2.php',
          dataString,
          function(returnData) {$("#search_results").html(returnData);
          });
        };
    href:

    HTML Code:
    <a class='actions' href='#' onclick=\"deleteCatalogue($(this).closest('.row').attr('id'))\">delete</a>
    Thanks, James

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    hello James

    it seems that your javascript has errors or something else goes wrong. here is the simplified reconstruction of your files

    html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Search</title>
    <style>
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;padding-top:100px;}
    #search_results{text-align:center;padding:50px;}
    input[type=reset],input[type=button]{cursor:pointer;}
    input[type=text]{text-align:center;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    function deleteCatalogue(id){$("#search_results").append('<br /><br /><div>The function works OK! The passed id = '+id+'<br />type of <b>deleteCatalogue</b> is <i style="color:Green;font-weight:bold;text-decoration:underline">'+typeof(deleteCatalogue)+'</i></div>');}
    function searchCatalogue(search){
    $("#search_results").html('<h1>Wait...</h1>');
    var dataString = 'search='+search;
    $.get('php/catalogue_search2.php',dataString,function(returnData){$("#search_results").html(returnData);});
    };
    $(document).ready(function(){
    $('#btn').click(function(){searchCatalogue($('#searchdata').val());});
    $('#searchdata').focus();
    });
    </script>
    </head>
    <body>
    <form id="mf">
    <input type="text" id="searchdata" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" />&nbsp;&nbsp;&nbsp;<input type="button" id="btn" value="Search" />
    </form>
    <div id="search_results">result goes here</div>
    </body>
    </html>
    php

    Code:
    <?php
    if(isset($_GET['search'])&&!empty($_GET['search'])){
    echo '$_GET[\'search\'] = '.$_GET['search']."<br /><br /><a class='actions' id='server_side_data' href='#' onclick=\"deleteCatalogue($(this).attr('id'))\">delete</a> (<i>click me</i>)";
    }
    else{echo '<h1>Nothing to search</h1>';}
    ?>
    and live demo you can check yourself how it works

  3. #3
    Join Date
    Sep 2013
    Posts
    2
    Padonak, Fantastic effort on the response. With your code matching mine so closely I had to look elsewhere and I found the problem. The closing }); for $(document).ready(function(){ was below my functions. By moving it I resolved my problem 100%. I owe you a beer.

    James

    changing this

    Code:
    $(document).ready(function(){
    // ----------------------------------------------------------------------------------------------------------    
    
    // some methods here
    
    // ----------------------------------------------------------------------------------------------------------
    
    //functions here
    
    });
    to this:

    Code:
    $(document).ready(function(){
    // ----------------------------------------------------------------------------------------------------------    
    
    // some methods here
    
    }); 
    // ----------------------------------------------------------------------------------------------------------
    
    //functions here

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    good to hear that everything's good now )) greetings from Russia

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles