javascript function inside jquery response not working

Question

Possible Duplicate:
Calling a JavaScript function returned from a Ajax response

var url = "showpdf.php";
$.ajax({
    type: "post",
    url: url,
    data:    {academic:academic,uni:uni,course:course,lan:lan,sem:sem,subject:subject,type:type,clz:clz},
    success: function(response)
    {
        alert(response);
        document.getElementById("alldata").innerHTML = response;

    }
});

inside response i have bellow html code with simple JavaScript function

<label onclick="popup()"> clickme </label>
<script>
function popup()
{
  alert("hello");
}
</script>

here, this popup()function is not working please help me.

take a look at: http://stackoverflow.com/questions/510779/calling-a-javascript-function-returned-from-a-ajax-response — simplyray, Dec 06 '12 at 11:43
ya i also tried this eval(document.getElementById("alldata").innerHTML = response); but still its not working :( — Jaydipsinh, Dec 06 '12 at 11:47
no i didn't got any error.. .but that javascript function not working even if i used eval — Jaydipsinh, Dec 06 '12 at 12:08
`eval()` won't work with the raw response because it contains HTML, eval will only accept the Javascript content. — MrCode, Dec 06 '12 at 12:15
but in response i have both html as well as javascript code so why my javascript function is not working? — Jaydipsinh, Dec 06 '12 at 12:18

MrCode · Accepted Answer · 2012-12-06T13:28:43.063

3

The problem is you expect that Javascript contained within an ajax response is executed. This isn't the case, the browser doesn't execute any Javascript contained within ajax responses. It might be possible to try to parse out the Javascript and execute it in some way, such as eval() but that would be nasty and not a good idea. Using eval() you also have to consider that it will only accept valid Javascript, so you couldn't just pass your response to it because that includes some HTML.

A possible solution could be to have the popup() function already defined in the page or an external Javascript file, and to assign the click handler after you add the HTML to the DOM.

For example:

function popup()
{
    alert(this.id);
}


document.getElementById("alldata").innerHTML = response;
document.getElementById("myNewLabel").onclick = popup;

edited Dec 06 '12 at 13:28

answered Dec 06 '12 at 11:42

MrCode

63,975
10
90
112

hii, i implemented same thing which you told, but i got one problem , i want to pass id of label in popup function so how to do that? i tried like document.getElementById("myNewLabel").onclick = popup(this.id); but its not working :( – Jaydipsinh Dec 06 '12 at 13:20
You don't need to pass the ID, just use `this.id` within the popup function. – MrCode Dec 06 '12 at 13:29
ya its working .. :) thanks MrCode – Jaydipsinh Dec 06 '12 at 13:32

score 0 · Answer 2 · answered Dec 06 '12 at 11:49

0

Make that string hidden in your page and just display it on success. like:

<label onclick="popup()" id="mylable" style="display:none"> clickme </label>
<script>
function popup()
{
  alert("hello");
}
</script>


var url = "showpdf.php";
$.ajax({
    type: "post",
    url: url,
    data:    {academic:academic,uni:uni,course:course,lan:lan,sem:sem,subject:subject,type:type,clz:clz},
    success: function(response)
    {
       // alert(response);
        $("#mylable").show();

    }
});

Better way to try with DOM. Let me know if above code is work for you.

answered Dec 06 '12 at 11:49

Uttam Kadam

458
1
7
20

hey but clickme this code i wrote in another file, so $("#mylable").show(); will not work der in jquery function – Jaydipsinh Dec 06 '12 at 11:53
Keep the HTML code on same page form where you are calling the ajax function and echo something like "click"/ notclick in showpdf.php file. Check the response in success function if it is click $("#mylable").show(). – Uttam Kadam Dec 06 '12 at 12:00
i couldn't understand what u r saying – Jaydipsinh Dec 06 '12 at 12:11

javascript function inside jquery response not working

2 Answers2