Error encountered when attempting to call a JavaScript function by clicking on a link within a dropdown menu due to an unexpected end of

Here is the code snippet from my HTML file:

<html>
<head>
<link rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<title>CodeConfig</title>

<style>
.btn-primary-spacing 
{
margin-right: 10px;
margin-bottom: 5px !important;
}
body {
  padding: 10px;
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }
</style>
</head>

<body>
<div class="container">
  <h2>CodeConfig Keys</h2>
  <br>
  <div id="key-buttons">
  </div>
</div>

<script type="text/javascript">
function linkClickFunc(item,key)
{
  console.log("trying");
  console.log(item + key);
}
</script>

<script>
$(document).ready(function(){
    CodeConfigkeys = {"ENV": ["Subhayan", "Mary"], "DB_PARAMS": ["SQL_CONNECTIONS_DB", "SQL_CONNECTIONS_COLLECTION"]};
    var html_str = "";
    $.each( CodeConfigkeys, function( key, value ){
    html_str = html_str + "<div class=\"btn-group dropdown\">";
    html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key;
    html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>";
    html_str = html_str + "<div class=\"dropdown-menu\">";
    submenus = value;
    console.log(submenus);
    value.forEach(function(item, index, array) {
        html_str = html_str + "<li><a href=\"javascript:linkClickFunc('" + item + "','" + key + "');\">" + item + "</a></li>";
    });
    html_str = html_str + "</div></div>";

    });

    $("#key-buttons").html(html_str);

});

Upon clicking a link in the dropdown menu, I encounter a syntax error - "unexpected end of input."

I suspect that there may be some missing brackets or punctuation mistakes.

If anyone can pinpoint where I'm going astray, I would greatly appreciate it.

Thank you in advance.

Answer №1

Make sure not to forget the closing script tag </script> and include Jquery in your website:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Also, remove javascript: from the href:

 html_str = html_str + "<li><a href=\"linkClickFunc(\"" + item + "\",\"" + key + "\");\">" + item + "</a></li>";

Check out this working example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<title>CodeConfig</title>
<style>
.btn-primary-spacing 
{
margin-right: 10px;
margin-bottom: 5px !important;
}
body {
  padding: 10px;
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }
</style>
</head>
<body>
<div class="container">
  <h2>CodeConfig Keys</h2>
  <br>
  <div id="key-buttons">
  </div>
</div>

<script type="text/javascript">
function linkClickFunc(item,key)
{
  console.log("trying");
  console.log(item + key);
}

$(document).ready(function(){
    CodeConfigkeys = {"ENV": ["Subhayan", "Mary"], "DB_PARAMS": ["SQL_CONNECTIONS_DB", "SQL_CONNECTIONS_COLLECTION"]};
    var html_str = "";
    $.each( CodeConfigkeys, function( key, value ){
    html_str = html_str + "<div class=\"btn-group dropdown\">";
    html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key;
    html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>";
    html_str = html_str + "<div class=\"dropdown-menu\">";
    submenus = value;
    value.forEach(function(item, index, array) {
        //html_str = html_str + "<li><a href=\"#\">" + item + "</a></li>";
        html_str = html_str + "<li><a href=\"linkClickFunc(\"" + item + "\",\"" + key + "\");\">" + item + "</a></li>";
    });
    html_str = html_str + "</div></div>";

    });
    $("#key-buttons").html(html_str);

});
</script>

Answer №2

Eliminate javascript: from

<a href=\"javascript:linkClickFunc(\"" + it
and the functionality will work smoothly.

Furthermore, modify

<a href=\"javascript:linkClickFunc(\"" + item + "\",\"" + key + "\");\">
to
<a onclick=\"linkClickFunc('" + item + "','" + key + "');\">"

The issue lies in your href attribute appearing as

href="linkClickFunc("item","item")"
, resulting in excessive "

demonstration

function linkClickFunc(item, key) {
  console.log("attempting");
  console.log(item + key);
}

$(document).ready(function() {
  CodeConfigkeys = {
    "ENV": ["Subhayan", "Mary"],
    "DB_PARAMS": ["SQL_CONNECTIONS_DB", "SQL_CONNECTIONS_COLLECTION"]
  };
  var html_str = "";
  $.each(CodeConfigkeys, function(key, value) {
    html_str = html_str + "<div class=\"btn-group dropdown\">";
    html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key;
    html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>";
    html_str = html_str + "<div class=\"dropdown-menu\">";
    submenus = value;
    value.forEach(function(item, index, array) {
      //html_str = html_str + "<li><a href=\"#\">" + item + "</a></li>";
      html_str = html_str + "<li><a onclick=\"linkClickFunc('" + item + "','" + key + "');\">" + item + "</a></li>";
    });
    html_str = html_str + "</div></div>";

  });
  $("#key-buttons").html(html_str);

});
.btn-primary-spacing {
  margin-right: 10px;
  margin-bottom: 5px !important;
}

body {
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; // remove the gap so it doesn't close
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>CodeConfig Keys</h2>
  <br>
  <div id="key-buttons">
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing a single item from multiple elements in React using React and typescript

In this particular project, React, TypeScript, and ant design have been utilized. Within a specific section of the project, only one box out of three options should be selected. Despite implementing useState and toggle functionalities, all boxes end up bei ...

Top method for establishing multiple aliases for disabled elements in CSS

Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality? Code within file.css .overall-example input[type=checkbox]:checked + label { ...

The jQuery selector for input[type=text]:nth-child(2) is malfunctioning

I cannot utilize the ids or class names linked to the inputs because they are randomly generated on input. Here is how the render appears: <div class='dateSearch'> <label>Label 1</label> <input type='text' id=& ...

Immersive image display

Currently on my website, I have a table displaying 9 images with descriptions. I'm looking to enhance user experience by allowing them to click on an image and view it in a larger format like a gallery without disrupting the layout of the page. This ...

get the json array using the $.post() method

<script> $(document).ready(function(){ $("#click-me").click(function(){ $.post("/different/url/for/login", { email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9de9ddeeb3fef2f0">[email protected ...

Display a preview of a CSV file in a datagrid after uploading

My goal is to upload a csv file to the backend and show a preview of the data on the same page without refreshing or reloading. I believe using AJAX is the way to achieve this. I am curious about how we can accomplish this with Ajax and jQuery in the cont ...

"Dynamically moving" background on canvas

Struggling to animate a dynamic "background" for my canvas project using raphaelJS. Here's the code snippet I'm working with: function bg(){ h = 0; var terra = paper.rect(0, 500 + h, 900, 100); terra.attr({'fill': '# ...

Hover-activated dropdown menu

After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here ...

Managing multiple input fields with React Hooks

Over at the React documentation forms section, you'll find an example that utilizes class components like so: class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGu ...

Dealing with a div height problem in HTML/CSS

I'm experiencing an issue where my footer is overlapping with the bottom of my div. I've attached an image for reference but I can't seem to figure out what's causing the problem. I've tried adjusting the height values without succ ...

The interplay between javascript and PL/SQL tasks in a dynamic scenario

I'm attempting to run multiple pl/sql blocks within a Dynamic Action, providing real-time feedback to the user through a modal dialog displaying the current status. Here is an example of what I am trying to achieve: Processing Step 1... /*Run pl/s ...

Separating vendor and application code in Webpack for optimized bundling

Recently, I created a React+Webpack project and noticed that it takes 60 seconds to build the initial bundle, and only 1 second to append incremental changes. Surprisingly, this is without even adding my application code yet! It seems that the node_modules ...

Leveraging Web Services in Outlook Mail Add-On

I am facing a challenge with an Outlook Mail Add-In that I need assistance with. Using an Office 365 developer account, the Mail Add-In displays online in a browser as shown in this screenshot: https://i.stack.imgur.com/ZQ9qt.png My objective is to trigge ...

Is it possible to open a CSV file by clicking on a link in an HTML document using AngularJS?

Is it possible to open a CSV file using AngularJS if I know the absolute path? Additionally, is there a way to open it directly in Excel? I have been attempting this method: <a target="_self" ng-href="{{csv_link}}">download csv</a> However, t ...

Troubleshooting jQuery AJAX Errors in Internet Explorer 8

I've created a rather simple ajax call using jQuery. It's functioning flawlessly in IE9, the latest Firefox, and the latest Chrome, which leads me to believe that the page being posted to is working fine. However, it fails in IE8 (I haven't ...

What causes the React Query cache to be cleared upon page reload?

Hi there, I am new to Next.js and React Query. I would really appreciate any help or advice. I apologize for any mistakes in my English language skills. Currently, I am using Next.js v12 and React Query v3, along with the React Query DevTools. On one of ...

Adjustable height for Material UI tab components

I encountered an issue that I initially thought was related to the general configuration of my app and the height I assigned to my page wrapping classes. However, after creating a simple out-of-the-box material UI tab example, it became clear that this beh ...

Having trouble with React image rendering using webpack?

Struggling to display an image in my React Web App, I encountered a broken image despite the correct file path appearing in the console log. We're utilizing url-loader and file-loader with webpack, importing the file path directly as necessary. Attemp ...

The NGX countdown timer is experiencing a discrepancy when the 'leftTime' parameter exceeds 24 hours, causing it to not count down accurately

When the leftTime configuration exceeds 864000, the timer does not start from a value greater than 24 hours. <countdown [config]="{leftTime: `864000`}"></countdown> For example: 1. When leftTime is set to `864000`, the Timer counts down from ...

Error message: An error occurred while executing the AJAX PHP code due to a TypeError, specifically stating that the property 'status' cannot be

For some reason, I keep receiving an undefined return for my response. The event handler in index.php triggers the following code: $.post("getData.php", onNewPost()); function onNewPost (response){ if (response.status == "OK") { console.log(resp ...