/    Sign up×
Community /Pin to ProfileBookmark

Update DOM after html callback – Undefined function

Copy linkTweet thisAlerts:
Sep 16.2013

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);
});
};[/CODE]

href:

[code=html]<a class=’actions’ href=’#’ onclick=”deleteCatalogue($(this).closest(‘.row’).attr(‘id’))”>delete</a> [/code]

Thanks, James

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@PadonakSep 16.2013 — hello James

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

[B][I]html[/I][/B]

<i>
</i>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Search&lt;/title&gt;
&lt;style&gt;
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;}
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script&gt;
function deleteCatalogue(id){$("#search_results").append('&lt;br /&gt;&lt;br /&gt;&lt;div&gt;The function works OK! The passed id = '+id+'&lt;br /&gt;type of &lt;b&gt;deleteCatalogue&lt;/b&gt; is &lt;i style="color:Green;font-weight:bold;text-decoration:underline"&gt;'+typeof(deleteCatalogue)+'&lt;/i&gt;&lt;/div&gt;');}
function searchCatalogue(search){
$("#search_results").html('&lt;h1&gt;Wait...&lt;/h1&gt;');
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();
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="mf"&gt;
&lt;input type="text" id="searchdata" /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="reset" value="Reset" /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="button" id="btn" value="Search" /&gt;
&lt;/form&gt;
&lt;div id="search_results"&gt;result goes here&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;



[B][I]php[/I][/B]

<i>
</i>
&lt;?php
if(isset($_GET['search'])&amp;&amp;!empty($_GET['search'])){
echo '$_GET['search'] = '.$_GET['search']."&lt;br /&gt;&lt;br /&gt;&lt;a class='actions' id='server_side_data' href='#' onclick="deleteCatalogue($(this).attr('id'))"&gt;delete&lt;/a&gt; (&lt;i&gt;click me&lt;/i&gt;)";
}
else{echo '&lt;h1&gt;Nothing to search&lt;/h1&gt;';}
?&gt;



and [B][COLOR="#FF0000"]live demo[/COLOR][/B] you can check yourself how it works
Copy linkTweet thisAlerts:
@4xjbhauthorSep 16.2013 — 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

});[/CODE]

to this:

[CODE]$(document).ready(function(){
// ----------------------------------------------------------------------------------------------------------

// some methods here

});
// ----------------------------------------------------------------------------------------------------------

//functions here[/CODE]
Copy linkTweet thisAlerts:
@PadonakSep 16.2013 — good to hear that everything's good now )) greetings from Russia ?
×

Success!

Help @4xjbh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...