onclick in anchor tag

Isaac
Isaac used Ask the Experts™
on
How come my onclick isn't working below?

	function complete(data) 
	{		
		var bldRow=$('#Iblog').DataTable();
		

		for(var i =0; i < data.d.results.length; i++) 
		{		
					   //var rowNode = 
		    bldRow.row.add([ data.d.results[i].Created, "<a href='#' onclick='openModal();return false;'>"+data.d.results[i].Title+"</a>", data.d.results[i].NumCommentsId]).draw();				   
		}

		//$('#myBlogData').append(bldRow);
	 }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
David H.H.LeeDigital Marketing (Hospitality)

Commented:
Can i see your openModal() function?
IsaacSharePoint Client Side Developer

Author

Commented:
Nothing special...just an alert()
	 function openModal() {
alert("HELLO WORLD");
	 }

Open in new window

David H.H.LeeDigital Marketing (Hospitality)

Commented:
Do you get the result in the looping recordset below?

eg:
data.d.results[i].Created
data.d.results[i].Title
data.d.results[i].NumCommentsId]

var v1,v2,v3, rv2;

for(var i =0; i < data.d.results.length; i++) 
		{	
           v1=data.d.results[i].Created;
           v2=data.d.results[i].Title;
           v3=data.d.results[i].NumCommentsId;

           //alert(v1);  
           //alert(v2);  
           //alert(v3);
  
           rv2= "<a href='#' onclick='openModal();return false;'>"+v2+"</a>";

          bldRow.row.add([v1,rv2,v3]).draw();				   
}

Open in new window


If you can't get the result above, then you may replace this line:
 rv2= "&lt;a href='#' onclick='openModal();return false;'&gt;"+v2+"&lt;/a&gt;";

You may need to unveil more code for further inspection.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
Vimal DMSenior Software Engineer

Commented:
Hi,

I guess it might be the single quotes or double quotes which you have used to populate the tag link in the script.
IsaacSharePoint Client Side Developer

Author

Commented:
Maybe this will help.  Here is the whole javascript and html code in different files

$(document).ready(function(){
		$('#blog').DataTable();

		getListItems('http://www.mysite.com','Posts','complete', 'failure','timeout');
	});


function getListItems(url, listname, complete, failure, timeout) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?select=Created,Title,NumCommentsId",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
		timeout: 2000,
		dataType:"json",
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (xhr,status,error) {
            console.log(status);
        }
    });
	
	function complete(data) 
	{		
		var bldRow=$('#Iblog').DataTable();
		

		for(var i =0; i < data.d.results.length; i++) 
		{		
					   //var rowNode = 
		    bldRow.row.add([ data.d.results[i].Created, "<a href='#' onclick='openModal();return false;'>"+data.d.results[i].Title+"</a>", data.d.results[i].NumCommentsId]).draw();				   
		}

		//$('#myBlogData').append(bldRow);
	 }
	 
	 function openModal() {
		alert("open modal");
	 }
	function failure(data) {
	 alert("Operation failed.");
	 }

}

Open in new window


HTML Code
<html>
<head>
	<title></title>
<style>
table.dataTable {
    width:auto !important;
}
</style>

</head>
<body>

<table id="Iblog" class="display nowrap dataTable dtr-inline" cellspacing="0">
	<thead>
		<tr>
			<th>Date</th>
			<th>Title</th>
			<th># of Comments</th>
		</tr>
	</thead>
	<!-- <tfoot>
		<tr>
			<th>Date</th>
			<th>Title</th>
			<th># of Comments</th>
			<th>Category</th>
		</tr> 
	-->
	</tfoot>
	<tbody id="myBlogData">

	</tbody>
</table>

</body>

</html>

Open in new window

Expert of the Year 2008
Top Expert 2008
Commented:
try moving line 46 (the closing brace) to line 24 so that openModal() is defined globally.  The way you have it now, openModal() is defined within function getListItems(){...}, but the onclick handler is looking for a global definition of openModal:
$(document).ready(function(){
		$('#blog').DataTable();

		getListItems('http://www.mysite.com','Posts','complete', 'failure','timeout');
	});


function getListItems(url, listname, complete, failure, timeout) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?select=Created,Title,NumCommentsId",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
		timeout: 2000,
		dataType:"json",
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (xhr,status,error) {
            console.log(status);
        }
    });
}	
	function complete(data) 
	{		
		var bldRow=$('#Iblog').DataTable();
		

		for(var i =0; i < data.d.results.length; i++) 
		{		
					   //var rowNode = 
		    bldRow.row.add([ data.d.results[i].Created, "<a href='#' onclick='openModal();return false;'>"+data.d.results[i].Title+"</a>", data.d.results[i].NumCommentsId]).draw();				   
		}

		//$('#myBlogData').append(bldRow);
	 }
	 
	 function openModal() {
		alert("open modal");
	 }
	function failure(data) {
	 alert("Operation failed.");
	 }

Open in new window

IsaacSharePoint Client Side Developer

Author

Commented:
Good Catch!  Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial