Onclick function on div not working

Question

I have a function for getting records from database on keyup event. Here is my code:

function displaySearch(key) {
$.ajax({
    type:"POST",
    url:"searchprofile.php",
    data:{
        k:key
    },
    success:function(data){
       var details_arr=data.split("+");
        $('.searchresult').empty();
        for(var i=0;i<details_arr.length-1;i++){
            $('.searchresult').append("<div class='profile' id='searchprofile'><img class='profilepic' src='images/profile.jpg'/><div class='doctorname'><div class='pname' onclick='saveName("+details_arr[i]+")'>"+details_arr[i]+"</div></div></div>");
            $('.searchresult').show();
            $('.searchresult .profile').show();
        }
        details_arr.length=0;
    }
});
}

But i am getting javascript error here saying "Unexpected token ILLEGAL". How do i give the onclick function with the value of details_arr[i]? Please help.

"unexpected token ILLEGAL" means you have a syntax error in your code. — John Dvorak
– John Dvorak, Commented Dec 14, 2012 at 9:01
Perhaps you have a syntax error in your previous code? The code you have posted is correct, syntactically. — John Dvorak
– John Dvorak, Commented Dec 14, 2012 at 9:04
Using onclick='saveName("+details_arr[i]+")' is ugly, especially in dynamically generated code. It would be much cleaner if you attached the handler with jQuery. — John Dvorak
– John Dvorak, Commented Dec 14, 2012 at 9:10
@Jan Dvorak This error is at line 1 i.e at the <html> tag. I have php code before that. — Chetana Kestikar
– Chetana Kestikar, Commented Dec 14, 2012 at 9:11

Denys Séguret · Accepted Answer · 2012-12-14 09:23:17Z

4

As you have jQuery, you really shouldn't inline code. As you see it makes it more difficult to handle quotes inside quoted strings (yes, you're missing quotes around your argument to saveName).

You may do this :

  (function(i){
      $('.searchresult').append(
        "<div class='profile' id='searchprofile'>"
        + "<img class='profilepic' src='images/profile.jpg'/>"
        + "<div class='doctorname'>"
        + "<div id=someId class='pname'>"+details_arr[i] // <- give some Id
        +"</div></div></div>"
      );
      $('#someId').click(function(){saveName(details_arr[i])});
  })(i);
  $('.searchresult').show();

Note that I used a closure to ensure that i has the needed value in the callback (not the value at end of iteration).

Be careful with the split: on most browsers "+aaa".split('+') makes ["", "aaa"] and as you don't iterate up to the end of the array, this sample string would made you iterate on nothing.

edited Dec 14, 2012 at 9:23

answered Dec 14, 2012 at 9:00

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

4 Comments

John Dvorak Over a year ago

@ChetanaKestikar and still there is one less bug in the code. Upvoting.

Denys Séguret Over a year ago

@ChetanaKestikar Why don't you loop over the whole array ? Is that a bug ?

Chetana Kestikar Over a year ago

@dystroy Hey i tried your code again, this time i just added an alert before 'saveName(details_arr[i])'. The value of details_arr[i] i am getting is 'undefined'. And i did not understand the loop over idea. Can u please explain?

Chetana Kestikar Over a year ago

@dystroy To avoid getting the blank record, in for loop i gave the condition 'i<details_arr-1'. I think that overcomes the empty record problem.

Pankaj Dubey · Accepted Answer · 2012-12-14 09:45:34Z

1

function openNow(x)
{
    var pageUrl = '<%=ResolveUrl("~/OnFriends.php")%>'
    $.ajax({
        type: "POST",
        url: pageUrl + '/CreateNew',
        data: '{k: "'+ x +'"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success:function(data)
        {
            <---Now Do Your Code Hear--->
        }
        });
}

CreateNew is my web service what i created in .php file

answered Dec 14, 2012 at 9:45

Pankaj Dubey

8163 gold badges10 silver badges33 bronze badges

8 Comments

Pankaj Dubey Over a year ago

now this AJAX request will execute the 'CreateNew' function of OnFriends.php file and return the result as 'data'

Chetana Kestikar Over a year ago

So CreateNew is a function in the php file called? I did not know we could give the function name in url.

Chetana Kestikar Over a year ago

Thanks for the info. But i am getting the data from the php page. The issue is i am not able to get the onclick function result on div.

Pankaj Dubey Over a year ago

not just a function... that must be a Static Function (WebService)

Pankaj Dubey Over a year ago

if you never created a web service theGoogle it "How to create a web service in php"

|

Nerdroid · Accepted Answer · 2014-02-12 23:58:09Z

1

I would use something like that bare in mind ID must be unique inside a document (HTML Page) because the content is generated on the fly; it's better to use the JQuery "on"

   $(".pname").on("click", function (event) {
       saveName($(this).text());
   });

event handler to bind the click event

function displaySearch(key){
    $.ajax({
        type: "POST",
        url: "searchprofile.php",
        data: {
            k: key
        },

        success: function(data) {
            var details_arr = data.split("+");

            var searchResults = "";
            for (var i = 0; i < details_arr.length - 1; i++) {
                searchResults += "<div class='profile'>" +
                    "<img class='profilepic' src='images/profile.jpg'/>" +
                    "<div class='doctorname'>" +
                    "<div class='pname'>" + details_arr[i] +
                    "</div></div></div>";

            }
            $('.searchresult').html(searchResults).show();
        }
    });
}

$(".pname").on("click", function (event) {
    saveName($(this).text());
});

use the Jquery html to replace everything inside searchresult outside the loop that way it will be called once not details_arr.length - 1 times

edited Feb 12, 2014 at 23:58

answered Dec 14, 2012 at 10:29

Nerdroid

14.1k5 gold badges62 silver badges72 bronze badges

3 Comments

Chetana Kestikar Over a year ago

Hey thanks for the help. But this is not working. The onclick event on $(".pname") is not working.

Nerdroid Over a year ago

can you give us the website address to debug it for you or you can use jsfiddle.com

Chetana Kestikar Over a year ago

Okay... But this will take me sometime.

Pankaj Dubey · Accepted Answer · 2012-12-14 09:14:00Z

0

you should tell the line at which you are getting error

i think you did not specified you web service in ajax call at... "url:"searchprofile.php"

answered Dec 14, 2012 at 9:14

Pankaj Dubey

8163 gold badges10 silver badges33 bronze badges

6 Comments

Denys Séguret Over a year ago

@Pankaj I don't understand your point. Maybe you could make it clearer ?

Pankaj Dubey Over a year ago

first you have to create a web service in searchprofile.php the write like this... url:"searchprofile.php/<--your service name-->"

Denys Séguret Over a year ago

It depends on how your page is made. It's fine to have a page directly answering searchprofile.php?data=33.

Pankaj Dubey Over a year ago

@dystroy you are suggesting him to send data as Querystring that's not the right way... data may be confidential

Denys Séguret Over a year ago

If it's confidential, then use SSL, don't try to hide the data in a post body. And please don't try to say it's always wrong to use parameters in an URL...

|

Chetana Kestikar · Accepted Answer · 2012-12-17 06:35:03Z

0

Finally got the onclick function working. :)

Instead of appending the div everytime, i just editted my php page by adding the html i needed in the data that is returned in ajax.

answered Dec 17, 2012 at 6:35

Chetana Kestikar

5706 silver badges23 bronze badges

Collectives™ on Stack Overflow

Onclick function on div not working

5 Answers 5

4 Comments

8 Comments

3 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

8 Comments

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related