0

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.

Improve this question
5
  • 1
    take a look at: stackoverflow.com/questions/510779/… Commented Dec 6, 2012 at 11:43
  • ya i also tried this eval(document.getElementById("alldata").innerHTML = response); but still its not working :( Commented Dec 6, 2012 at 11:47
  • no i didn't got any error.. .but that javascript function not working even if i used eval Commented Dec 6, 2012 at 12:08
  • eval() won't work with the raw response because it contains HTML, eval will only accept the Javascript content. Commented Dec 6, 2012 at 12:15
  • but in response i have both html as well as javascript code so why my javascript function is not working? Commented Dec 6, 2012 at 12:18

2 Answers 2

Reset to default
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;
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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 :(
You don't need to pass the ID, just use this.id within the popup function.
ya its working .. :) thanks MrCode
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.

Improve this answer

3 Comments

hey but <label onclick="popup()" id="mylable" style="display:none"> clickme </label> <script> function popup() { alert("hello"); } </script> this code i wrote in another file, so $("#mylable").show(); will not work der in jquery function
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().
i couldn't understand what u r saying

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.