I have implemented a datatable to display data and I'm using a context menu for navigation to another page. However, I encountered an issue where clicking on the context menu tab opens the new window in the same tab instead of opening it in a new tab as intended. Below is the code snippet that's causing this issue:
<script type="text/javascript" class="showcase">
$(function() {
var selectedVal;
$.contextMenu({
selector : '.context-menu-one',
callback : function(key, options) {
var row = options.$trigger;
var newUrl = key;
// Context menu actions based on selected key
if (key === 'calllist.do' || key === 'travel' ||
key === 'call_usage' || key === 'network_analysis' ||
key === 'location_analysis.do' || key === 'location_tracker.do') {
var rows = row.find("td").eq(3).html();
actionUrl = '?' + 'a_no=' + rows.toLocaleString();
} else if (key === 'personal' || key === 'newsim.do' ||
key === 'analyzecallingno' || key === 'simdensity.do') {
var rows = row.find("td").eq(1).html();
actionUrl = '?' + 'a_no=' + rows.toLocaleString();
}
document.forms[0].action = newUrl + actionUrl;
document.forms[0].submit();
},
items : {
"analyzecallingno" : { name : "Analyze Calling Number" },
"travel": { name : "Analyze Caller Tower" },
"network_analysis" : { name : "Social Network Analysis" },
"call_usage" : { name : "Call Analysis Summary" },
"location_tracker.do" : { name : "Location Tracking" },
"personal" : { name : "Caller Personal Details" }
}
});
});
</script>
<table class="tableData context-menu-one" id="tableData"
style="overflow-x: scroll">
<thead>
<tr style="font-size: 14px;">
<th align="left">CALLTYPE</th>
<th align="left">CALLER</th>
<th align="left">CALLEE</th>
<th align="left">DURATION</th>
<th align="left">START DATE</th>
<th align="left">END DATE</th>
<th align="left">FROM LOC</th>
<th align="left">TO LOC</th>
<th align="left">IMEI</th>
<th align="left">IMSI</th>
</tr>
</thead>
<tbody>
<c:forEach items="${searchpage}" var="listofvalues">
<tr class="context-menu-one notfirst" style="font-size: 12px;">
<td align="left"><c:out value="${listofvalues.call_type}" /></td>
<td align="left"><c:out value="${listofvalues.a_no}" /></td>
<td align="left"><c:out value="${listofvalues.b_no}" /></td>
<td align="left"><c:out value="${listofvalues.call_duration}" /></td>
<td align="left"><c:out value="${listofvalues.start_day}" /></td>
<td align="left"><c:out value="${listofvalues.end_day}" /></td>
<td align="left"><c:out value="${listofvalues.a_home_circle}" /></td>
<td align="left"><c:out value="${listofvalues.a_rome_circle}" /></td>
<td align="left"><c:out value="${listofvalues.a_imei}" /></td>
<td align="left"><c:out value="${listofvalues.a_imsi}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>