Trouble with jQuery on click function, no actions triggered

I am having trouble with this jQuery function that is supposed to post the value of a variable to a PHP page and display it in the correct status class. I have included the necessary jQuery file, but for some reason, nothing is happening.

Any assistance would be greatly appreciated. Thank you!

<script>
 var num = 1;
function ajax_post(){ 
    $.ajax('javas.php', {
        success: function(response) {
            $(".status").html(response);
        }, 
        data: "num=" + (++num)
    });
}

function ajax_posta(){
    $.ajax('javas.php', {
        success: function(response) {
            $(".status").html(response);
        }, 
        data: "num=" + (--num)
    });
}

$(document).ready(function() {
    $('.eventer > .button').click(function () {
        ajax_post();
    });
    alert("lol");
});
</script>

This is my current setup, including the PHP code related to classes:

<div id='eventcontainer'>

<?php

// Retrieve posts from DB
$event1 = mysql_query("SELECT post,date,memid FROM postaction WHERE memid = '$id' ORDER BY date DESC LIMIT 5;");

while ($row1 = mysql_fetch_array($event1))
{
    $event = $row1['post'];
    $timeposted = $
    row1['date'];

    $eventmemdata = mysql_query("SELECT id,firstname FROM users WHERE id = '$id' LIMIT 1");

    while($rowaa = mysql_fetch_array($eventmemdata))
    {
        $name = $rowaa['firstname'];
        $eventlist = "$event <br> $name";
    }

    echo "<div class='eventer'> $timeposted <br>$eventlist <input name='myBtn' type='submit' value='increment' onClick='javascript:ajax_post();'>
<input name='lol' type='submit' value='dec' onClick='javascript:ajax_posta();'></div>
<div class='status'></div>";
    echo "<br>";
}

?>

Answer №1

Instead of using $.post, consider switching to $.ajax

You could attempt rearranging the parameters to make it function with $.post, however, the code you currently have seems more suitable for execution with $.ajax.

Additionally, within this block:

$(document).ready(function() {
    $('.eventer > .button').click(function () {
        var self = this;
        $.post('javas.php', function (data) {
            $(self).closest('.eventer').find('.status').html(data);
        })
    });
    alert("lol");
});

Are you certain you didn't intend for it to be like this?

$(document).ready(function() {
    $('.eventer > .button').click(function () {
        ajax_post();
    });
    alert("lol");
});

Answer №2

What occurs when you attempt to place an alert within the click function?

It is possible that your function is not correctly attached to the intended object.

Answer №3

It appears that there may be an error in the parameter order when calling the $.post method. The correct format should be:

$.post("url", { data:'something' }, function(result){
    //callback
});

Answer №4

It seems like there may be some confusion between the jQuery post and ajax methods. Make sure to include the data argument (your num variable) in your post request.

$('.eventer > .button').click(function () {
    var self = this;
    $.post('javas.php', num,function (data) {
        $(self).closest('.eventer').find('.status').html(data);
    })
});

http://api.jquery.com/jQuery.post/

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

Combining filters with AJAX, PHP, and MySQL for seamless interaction

I've been working on a table that displays a list of users, and I'm trying to implement filters using select boxes to refine the results based on certain parameters. The table is generated dynamically through a PHP script triggered by AJAX when t ...

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

Locate the closest text to an element within an HTML document

My HTML content contains specific tags with text and images. If I am able to select an image, is there a way to retrieve the text nearest to that image? <div class="topStory"> <div class="photo"> <a href="somelink"><img src="s ...

Error with redirect in Ajax request

I have a question regarding an Ajax issue (not using jQuery)... I am trying to extract the URL from a blog that has an RSS feed in XML format. I am attempting to access the link using Ajax, which is working fine most of the time. However, sometimes I enco ...

Customizing SVGs for Ion Icons Version 5 in a React Application

I have been using ion icons in React by importing them directly into my index.html. While this method has been working well with the icons from ion icons found here, I know that you can also use custom SVGs by specifying an src attribute in the ion-icon ta ...

"Why are all the rows from my query being returned in my HTML/PHP/AJAX code

I've been working on a webpage that allows users to input a minimum GPA in a textbox to search a database and display records of students who meet that specific criteria. The HTML code calls a separate PHP file and utilizes AJAX to call a function. Ho ...

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

Create a moving background gradient with styled-components

Currently, I am working on setting the background of the <Paper /> component using Material-UI version 1.0.0-beta.25 to display a gradient of colors. The colors are dynamically added by clicking the Add button and selecting one from the color picker. ...

Steps for designing a footer with a fixed width and transparent center gap that stays in place

Looking to create a fixed footer with a transparent gap at the center that is 100% fixed width? No scripts needed! EXPAND THIS WAY <<< ______ FIXED WIDTH GAP ______ >>> EXPAND THIS WAY MY OWN SOLUTION HTML <div id="Ftr"> ...

Styling the <Autocomplete/> component in Material UI with React to achieve rounded corners

Google's search bar has always been a favorite of mine, with its rounded corners and generous text padding. https://i.stack.imgur.com/UbKrr.png I'm attempting to replicate this aesthetic using Material UI's <Autocomplete/> component ...

Experience the full power of the bootstrap grid system with a unique feature: nested overflow-y scrolling

Struggling with the bootstrap grid and a nested div with overflow-y. I followed advice from this stack overflow post, attempting to add min-height:0 to the parent ancestor, but can't seem to make it work. View screenshot here - Chrome on the left, Fi ...

Retrieve the value of a TextBox and display it as the title of a Tool

Hello there, I am currently learning front-end technologies and have a question. I would like to retrieve the value of a TextBox and display it in a Tool-tip. The code for the TextBox has a maximum length of 30 characters, but the area of the TextBox is no ...

The absence of responseJSON in the jquery ajax response is causing an issue

Currently, I am developing a small web framework for conducting an HCI study and have encountered the following issue: In my setup, I have a Node server running with Express to serve local host data from JSON files. While it may not be the most advanced d ...

Is it possible for AJAX to update a button's argument?

After successfully using AJAX to extract a data value from a button click, I am now looking to pass this value as an argument to another button on the same page. Is there a way to achieve this seamlessly? Sample code from test.html: <a href="#" onClic ...

Adjust div height to match the dynamic height of an image using jQuery

I'm facing an issue with my image setup. It has a width set to 100% and a min-width of 1024px, but I can't seem to get the 'shadow' div to stay on top of it as the window size changes. The height of the shadow div also needs to match th ...

CSS cascading not happening

Within the usersettings.css.erb file, line numbers are provided for easier reference. 11 #userSettingMain .form-horizontal .controls { 12 13 margin-left: 30px; 14 } 15 16 #user_birthday_3i{ 17 18 margin-left: 0px; 19 } U ...

JavaScript mouse and touch movement events (mousemove, pointermove, touchmove) are not always accurate

I'm currently working on developing a JavaScript whiteboard and have implemented the following code: let lastTimestamp = 0; const fps = 1000/60; document.addEventListener("pointermove", moveMouse, false); function moveMouse (e) { e.preve ...

Modifying placeholder text styling using jQuery for font and color changes

I have a form with an input field like this: <input type="text" name="firstname" id="firstname" placeholder="First name"> Initially, I am checking if the input field is empty using jQuery: $("#submitreg").click(function(e){ if ($.trim($("#fi ...

How can I alter the div once the form has been submitted?

Is there a way to change the background of a form and its results after submitting the form? I need to switch the image background to a plain color. I attempted to use a solution I found, but it doesn't seem to be working as expected. You can view my ...