Send a pair of values using a set of two parameters

My current code is currently passing only one parameter value. However, I would like to modify it to pass two values with two parameters.

This is my current code:

<script>
function getfilter(str){

                document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";

    if (str==""){
        document.getElementById("result").innerHTML="";
        return;
    }

    $.ajax({
        url: "Views/mapresult.php?q="+str,
        type: "GET",

        success: function ( responseText ) {

$("#result").empty().append($(responseText)); 
        }
    });
}
</script>

<li class="android" data-mosaic-filterby="android" onclick="getfilter(this.id)" id="'.$cd[$i][0].'" >'.$cd[$i][1].'</li>

However, I want to pass two parameters instead of one.

For example:

<li class="android" data-mosaic-filterby="android" onclick="getfilter(this.id)" id1="'.$cd[$i][0].'" id2="'.$cd[$i][0].'" >'.$cd[$i][1].'</li

Answer №1

$(function() {
  $(".android").on("click", function(e) {
    var id1 = $(this).data("id1");
    var id2 = $(this).data("id2");
    if (id1 !== "") {
      $("#result").html("<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div>");

      $.ajax({
        url: "Views/mapresult.php?q="+id1+id2,
        type: "GET",
        success: function (responseText) {
          $("#result").empty().append($(responseText)); 
        }
      });
    }
});
</script>

<li class="android" data-mosaic-filterby="android" data-id1="'.$cd[$i][0].'" data-id2="'.$cd[$i][0].'" >'.$cd[$i][1].'</li          

Answer №2

Avoid using the onclick function. Instead, you can directly store the data in attributes within your list item.

<li class="android" data-mosaic-filterby="android" data-first="Some information" data-second="some other details">Click Here</li>

You can achieve this using the following JavaScript code:

$(document).ready(function(){
    // Listen for clicks on the specified element
    $('.android').on('click', function(){

        // Retrieve the stored data
        var data1 = $(this).attr('data-first'),
            data2 = $(this).attr('data-second');

        // Pass the data to your designated function
        getfilter(data1, data2);
    });

});


function getfilter(data1, data2){
    var spinner = "<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div>",
        $result = $('#result');

    // Display a loading spinner
    $result.html(spinner);

    // Perform any necessary validation checks
    if (data1==""){
        $result.html("");
        return;
    }

    $.ajax({
        url: "Views/mapresult.php?q=",
        type: "GET",
        data: { 
            "data1" : data1,
            "data2" : data2
        },
        success: function ( responseText ) {
            $("#result").html(responseText);
        }
    });
}

Check out this demo on JSFiddle

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

What is the best way to combine an additional array into a different project attribute?

There are 2 arrays being used. This is the content of userGroups: console.log(this.items) [ { "id": 63, "name": "URLGROUP-1643836551908" } ] The contents of urls are shown below: userGroup can contain ...

Tips for modifying the width of the mat-header-cell in Angular

Is there a way to customize the mat-header-cell in Angular? I've been trying to change its width without success. Any suggestions would be greatly appreciated. <ng-container cdkColumnDef="name"> <mat-header-cell *cdkHeaderCellDe ...

What is the process for loading JavaScript along with its dependencies?

Imagine a scenario where I have script A that loads another script B: $.getScript('B.js', foo); Now, what if script B also loads an additional script? In that case, I want the function foo to be executed only after both B and its loaded script ...

When importing a component that is passed as a prop in React, it is causing a blank page to render and is displaying an error in the

Visit this link for the code Everything was running smoothly with the app until I decided to include the Icon component in SidebarOption.js. Now, upon doing so, a blank page appears and an error is displayed in the console: An error occurred stating that ...

State update failing to modify arrays

Shown below is an array that contains boolean values: const [state, setState] = React.useState({ [`${"checkedA"+index}`]: false, [`${"checkedB"+index}`]: false, [`${"checkedC"+index}`]: false, [`${"checkedD"+index}`]: false, }); ...

Preventing direct URL access with Angular redirects after refreshing the page

My website allows users to manage a list of users, with editing capabilities that redirect them to the /edit-user page where form information is preloaded. However, when users refresh the page with F5, the form reloads without the preloaded information. I ...

How can you turn off the full-page display of Javascript errors in Visual Studio?

Recently, I've been experimenting with React on Visual Studio using a React app and C#. However, I find it frustrating that JavaScript errors are displaying as full pages instead of in the console. Is there a way to turn this feature off? I've s ...

What is the process for calculating the total sum of input values utilizing JavaScript?

My JavaScript skills are not perfect, and I'm struggling to calculate the total sum of values in the amount input boxes without refreshing the page. Can someone assist me with this challenge? Thank you. function Calculat ...

JavaScript implementation of Ancient Egyptian Multiplication using PHP code

Let's dive into the algorithm. If we have two integers, A and B (remember, only integers), that need to be multiplied, here is how it works: we continuously multiply A by 2 and divide B by 2 until B cannot be divided any further, or in other words, un ...

Tips for clearing a material-ui search input field with the help of a button

Currently, I am working on a tutorial that involves implementing react material-ui tables along with a search input textfield. I am attempting to enhance this by adding a button that not only resets the table report but also clears the search input textfie ...

Executing a REST call only when the previous one has successfully completed

Is there a way to execute a second REST request only after multiple successful responses from the first one? I have noticed that while in a normal state these requests are executed sequentially as required, issues arise when dealing with a large number o ...

Should I utilize Sockets or Ajax for my project?

My Login Script Journey I have a goal in mind - to create a login script using Nodejs. I am currently exploring the options of utilizing sockets or ajax posts for this task. My Progress So Far I have Nodejs installed and have referenced this code in my ...

Implementing Google Calendar access token in JavaScript: A practical guide

I have a question about Google Calendar and I'm hoping you can assist me. I currently have an access_token from Google Calendar that has been stored in the localStorage. const googleAccessToken = e.vc.access_token; localStorage.s ...

The gridOptions.$gridScope.columns in ng-grid is modified two times when hiding or showing columns

Question: Why does the $scope.$watch function get called twice when I manually hide/show a column but only once when I reorder/sort columns in ng-grid? When I specifically target a single column with the watch function, it is only called once. I suspect ...

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

Tips for displaying "onclick" content beside dynamically generated content

I am working on a feature where a dynamically generated list has radio buttons displayed next to it. The goal is to show a dropdown list next to the specific radio button and list item that was changed. Essentially, if the radio button is set to "yes," I w ...

What potential issue could this code be causing with repeated form submissions?

Trying to implement AJAX form submission using PHP code: <!doctype html> <html> <head> <meta charset='utf-8'> <script type='text/javascript' src="./js/jquery.min.js"></script> ...

Unexpected event in Coffeescript and Express framework: a tangled web of mysteries

Currently, I am working on developing an app using Express.js and Coffeescript. My code can be found here: https://github.com/findjashua/contactlist However, upon trying to run the application, I encounter the following error: app.coffee:11:24: error: un ...

Navigating between socket.io and express using while loops

Currently, I am running an express app with socket.io on my raspberry pi to control an LED panel. The panel is being driven by a while loop that updates the pixels. However, I am looking for a way to modify the parameters of this loop or even switch to a d ...

Using knockoutjs to call a component on the home page

I am currently facing some challenges with knockoutjs components, as I am following the guidance provided in the official knockout component documentation. Could someone please advise me on how to correctly invoke my widget component on the main page? It ...