• 0

Using jQuery+Ajax to update MySQL

Asked by Andrew Lyle,

 Share

Question

Grand Master

Andrew Lyle Global Moderator

Posted
  • Global Moderator
Posted

As the title suggests, i'm trying to update a database entry using jQuery and Ajax to accomplish this, however, the task won't be submitted through a form, checkbox or anything like that, but through a link.

How would I go about updating my DB through a link click?

For the record, the link doesn't actually have to go anywhere, it would just be a "press to update" sort of deal.

Link to comment
https://www.neowin.net/forum/topic/949086-using-jqueryajax-to-update-mysql/
Share on other sites

10 answers to this question

Recommended Posts

  • 0
Grand Master

jimbo11883

Posted
Posted

This is a real simple example of using jquery and php.

<?php
  if (isset($_POST['action'])) {
    $link = mysql_connect(...);
    mysql_query("...", $link);
    mysql_close($link);
  }
?>
<html>
  <head>
    <script type="text/javascript">
      function performAjaxSubmission() {
        $.ajax({
          url: 'file.php',
          method: 'POST',
          data: {
            action: 'save',
            arg1: 'val1',
            arg2: 'val2'
          },
          success: function() {
            alert("success!");
          }
        });
        return false; // <--- important, prevents the link's href (hash in this example) from executing.
      }

      jQuery(document).ready(function() {
        $("#linkToClick").click(performAjaxSubmission);
      });
    </script>
  </head>
  <body>
    <a href="#" id="linkToClick">Click here</a>
  </body>
</html>

  • 0
Grand Master

jimbo11883

Posted
Posted

Yes. I tend to do it like so:

<?php
  if (isset($_POST['action'])) {
    $link = mysql_connect(...);
    mysql_query("...", $link);
    mysql_close($link);
  }
?>
<html>
  <head>
    <script type="text/javascript">
      function performAjaxSubmission() {
        $.ajax({
          url: 'file.php',
          method: 'POST',
          data: {
            action: 'save',
            field: $(this).attr("db_field"), 
            val: $(this).attr("db_value")
          },
          success: function() {
            alert("success!");
          }
        });
        return false; // <--- important, prevents the link's href (hash in this example) from executing.
      }

      jQuery(document).ready(function() {
        $(".linkToClick").click(performAjaxSubmission);
      });
    </script>
  </head>
  <body>
    <a href="#" class="linkToClick" db_field="field1" db_value="value1">Click here</a>
    <a href="#" class="linkToClick" db_field="field2" db_value="value2">Click here</a>
    <a href="#" class="linkToClick" db_field="field3" db_value="value3">Click here</a>
  </body>
</html>

If you need me to explain how any of this works, just let me know.

  • 0
Grand Master

Andrew Lyle Global Moderator

Posted
  • Author
  • Global Moderator
Posted

Just to make sure I got the database info correct, this should work, right?

<?php
  if (isset($_POST['action'])) {
  	$field = $_POST['db_field'];
  	$value = $_POST['db_value'];
    $link = mysql_connect("localhost", "admin", "admin");
    mysql_query("UPDATE example SET $field='$value' WHERE username='yourusernamehere'", $link);
    mysql_close($link);
  }
?>
<html>
  <head>
    <script type="text/javascript">
      function performAjaxSubmission() {
        $.ajax({
          url: 'file.php',
          method: 'POST',
          data: {
            action: 'save',
            field: $(this).attr("db_field"), 
            val: $(this).attr("db_value")
          },
          success: function() {
            alert("success!");
          }
        });
        return false; // <--- important, prevents the link's href (hash in this example) from executing.
      }

      jQuery(document).ready(function() {
        $(".linkToClick").click(performAjaxSubmission);
      });
    </script>
  </head>
  <body>
    <a href="#" class="linkToClick" db_field="field1" db_value="value1">Click here</a>
    <a href="#" class="linkToClick" db_field="field2" db_value="value2">Click here</a>
    <a href="#" class="linkToClick" db_field="field3" db_value="value3">Click here</a>
  </body>
</html>

  • 0
Community Regular

AdamLC

Posted
Posted
  On 28/10/2010 at 15:38, Andrew Lyle said:

Just to make sure I got the database info correct, this should work, right?

<?php
  if (isset($_POST['action'])) {
  	$field = $_POST['db_field'];
  	$value = $_POST['db_value'];
    $link = mysql_connect("localhost", "admin", "admin");
    mysql_query("UPDATE example SET $field='$value' WHERE username='yourusernamehere'", $link);
    mysql_close($link);
  }
?>
<html>
  <head>
    <script type="text/javascript">
      function performAjaxSubmission() {
        $.ajax({
          url: 'file.php',
          method: 'POST',
          data: {
            action: 'save',
            field: $(this).attr("db_field"), 
            val: $(this).attr("db_value")
          },
          success: function() {
            alert("success!");
          }
        });
        return false; // <--- important, prevents the link's href (hash in this example) from executing.
      }

      jQuery(document).ready(function() {
        $(".linkToClick").click(performAjaxSubmission);
      });
    </script>
  </head>
  <body>
    <a href="#" class="linkToClick" db_field="field1" db_value="value1">Click here</a>
    <a href="#" class="linkToClick" db_field="field2" db_value="value2">Click here</a>
    <a href="#" class="linkToClick" db_field="field3" db_value="value3">Click here</a>
  </body>
</html>

Looks like that should work fine :)

  • 0
Grand Master

Andrew Lyle Global Moderator

Posted
  • Author
  • Global Moderator
Posted 

<?php
  if (isset($_POST['action'])) {
  	$field = $_POST['db_field'];
  	$value = $_POST['db_value'];
    $link = mysql_connect("localhost", "admin", "admin");
mysql_select_db("database", $link);
    mysql_query("UPDATE example SET $field='$value' WHERE username='yourusernamehere'", $link);
    mysql_close($link);
  }
?>
<html>
  <head>
    <script type="text/javascript">
      function performAjaxSubmission() {
        $.ajax({
          url: 'file.php',
          method: 'POST',
          data: {
            action: 'save',
            field: $(this).attr("db_field"), 
            val: $(this).attr("db_value")
          },
          success: function() {
            alert("success!");
          }
        });
        return false; // <--- important, prevents the link's href (hash in this example) from executing.
      }

      jQuery(document).ready(function() {
        $(".linkToClick").click(performAjaxSubmission);
      });
    </script>
  </head>
  <body>
    <a href="#" class="linkToClick" db_field="field1" db_value="value1">Click here</a>
    <a href="#" class="linkToClick" db_field="field2" db_value="value2">Click here</a>
    <a href="#" class="linkToClick" db_field="field3" db_value="value3">Click here</a>
  </body>
</html>

just for record purposes, you need to add

mysql_select_db("database", $link);

to make this work :p

  • 0
Mentor

Tekkerson

Posted
Posted

Hi Andrew. If you allow me to suggest one more thing:

It is that you should look into parameterized queries whenever you have time to get some info on it. They've been around quite some time but I RARELY hear any developer talk about them. It seems only good developers know about it since it might be a little different than what we're used to for querying databases.

I've learned them just recently and I can't live without them now. It's so much cleaner and they have way too many advantages for you not to use them. You wouldn't need to waste extra space (neater code!) or waste CPU cycles on sanitizing code plus sanitizing code is prone to human error (it's only as good as your manual sanitation of the code). Not to mention that parameterized queries are faster as well. A parameterized query would look something like this:

$user_id = $_POST['uid'];

$stmt = Database :: prepare ( 'SELECT user_id FROM table1 WHERE user_id = :user_id_ ;' ) ;

$stmt -> bindParam( ':user_id_', $user_id, PDO::PARAM_INT);

$stmt -> execute ( ) ;

$user_id_info = $stmt -> fetch ( PDO::FETCH_ASSOC );

$stmt -> closeCursor ( ) ;

echo $user_id_info;

Where Database :: is a class to manage the PDO (PHP Data Object) which can be found here. http://www.php.net/manual/en/class.pdo.php

I'll post the database class I use if you're interested because I won't post it otherwise. If you want to learn more about it let me know if you have any questions.

As Jeff Atwood from codinghorror.com said: Give me parameterized SQL, or give me death

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Google Maps expands cycling routes and alerts for low-emission zones in Europe

      By Aditya Tiwari · Posted

      Google Maps expands cycling routes and alerts for low-emission zones in Europe by Aditya Tiwari Google announced some new Google Maps updates for users in Europe. These features are meant to help them get around more sustainably and reduce emissions in cities, according to the search giant. For starters, Google is expanding its AI-powered feature that predicts when walking or taking transit will take roughly the same amount of time as driving. Currently available in 60 cities, the feature recommends walking or transit routes and has helped avoid tens of millions of car trips. It will soon launch in Copenhagen, Stockholm, Warsaw, and other cities. Speaking of car trips, Google displays helpful alerts when a car enters an area designated as a low-emission or low-traffic zone in supported cities, such as London and Berlin. It informs users whether their vehicle is permitted in these zones, and they should select an alternative route if necessary. The feature will expand to more than 1,000 low-emission and low-traffic zones across Europe in the coming months, including Italy, Sweden, Austria, and other countries. For those interested in cycling on the roads, Maps will display helpful details about routes in more places. Riders will see bike lanes on their cycling route, as well as other useful information, such as whether there is heavy car traffic or a steep incline ahead. The feature will expand to 17 new cities, including nine in Europe, which will cover about 125,000 km (77,671 miles) of bike lanes globally. Google has partnered with local governments and public authorities in cities such as Hamburg, Madrid, Barcelona, Milan, Rome, Zurich, Budapest, Vienna, and Brussels to source the data. Additionally, Google announced that fuel-efficient routing, also known as eco-friendly routing, is now available globally. As the name suggests, it finds the most fuel or energy-efficient route for your trip. The feature was introduced in 2021, starting with the US, and later expanded to over 40 countries across Europe in its first major update in 2022. On average, about 500 million trips using fuel-efficient routing are taken each month. Google estimated that the feature collectively resulted in "more than 2.7 million metric tons of GHG [greenhouse gas] emissions avoided in 2024 alone," which is equivalent to taking "more than 630,000 gasoline-powered cars off the road for a year."
    • From cars to cosmos: Honda's experimental rocket aces first landing test

      By excalpius · Posted

      That's one impressive "baby step". Well done!
    • Sony and Bungie delay Marathon indefinitely after 'passionate feedback' from community

      By DramaInc · Posted

      They're already dead. They've been through many rounds off layoffs due to mismanagement and Destiny 2 is basically over as the interest levels are the lowest theyve ever been.
    • Redesigned Windows 11 Start menu: What users wanted and what Microsoft delivered

      By TarasBuria · Posted

      Redesigned Windows 11 Start menu: What users wanted and what Microsoft delivered by Taras Buria Windows 11 is getting a redesigned Start menu. This is a big deal for the soon-to-be-four-year-old operating system and its highly controversial design bits. After years of slow to no progress in the Start menu area, Microsoft is finally delivering a much better variant with many new features and plenty of feedback addressed. How much has been addressed? In 2023, we posted a list of the "Top 10 Start menu features and changes Windows 11 users want," so it is now time to compare that to the new Start menu. Note: The new Start menu is not yet publicly available. Microsoft is testing it in Windows 11 preview builds from the Dev and Beta Channels, and you can check out this article to learn how to enable it so that you can try it yourself. 1. Allow users to turn off the "Recommended" section - Delivered (17K+ upvotes) Round of applause for Microsoft, everyone, as the company actually delivered the most requested Start menu feature. The redesigned variant lets you turn off the Recommended section and hide it altogether so that it does not waste any space. Recommended section, begone!2. More customization options - Nope (5.4K+ upvotes) Although Microsoft now allows turning off the Recommended section and switching between three views for the All apps list, the menu remains quite restricted when it comes to personalization, so if you want true customization, Windhawk and the Start menu styler mod are here for you, allowing some seriously cool Start menu designs, as one on the screenshot below: 3. Allow resizing the Start menu - Sort of delivered (3.8K+ upvotes) You still cannot change the size of the Start menu manually like you could in Windows 10. However, the menu is now more adaptive, which means you will see more content if you have a bigger screen. Still, I would like to have the ability to make the menu bigger, so this one remains standing. 4. Go back to the Windows 10-style Start menu - Nope (3.4K+ upvotes) Microsoft is not going back to the Windows 10 Start menu, so if you are one of the 3,400+ people who upvoted this in Feedback Hub, your best course of action is to install a third-party Start menu or just stick to Windows 10. 5. Use Grid view for the All apps list - Delivered (1.5K+ upvotes) Another popular request was delivered fully. I would even say that Microsoft over delivered it. Instead of just killing the standard list view in favor of grid view, Microsoft let users decide what kind of view they want. You can stick to the classic list, switch over to grid view, or enjoy a categorized view. Again, well done! 6. Display jump lists when right-clicking pinned apps - Needs fixing (1K+ upvotes) Microsoft has already fixed this problem, and you can access jump lists and recent files by right-clicking pinned applications in the current Start menu version. However, turning off the Recommended section also turns off jump lists on the Start menu and taskbar for some reason. A very frustrating design for those who use jump lists and do not want the Recommended section. This needs fixing. Microsoft punishes you with no jump lists if you dare to turn off "Recommended." Why?7. Make the Start menu open on the All apps list by default - Delivered (1K+ upvotes) The new Start menu ticks this box as well. There is no need to click "All apps" when you open the Start menu. It now features a single-view user interface with the list of all apps right below your pins and recommendations. All you need to do is start scrolling. 8. Add a full-screen Start menu - Nope (1K+ upvotes) Even though Microsoft "has got this," nothing indicates that the company plans to reintroduce a full-screen Start menu from the days of Windows 10 and Windows 8. A shame, if you ask me. Interestingly, it appears that Microsoft considered a full-screen Start menu for Windows 11. The company recently showed some of the prototypes it considered implementing, including a scrollable full-screen menu. 9. Bring back live tiles - Nope (1K+ upvotes) Tiles are no longer alive. They are as dead as Windows Phone, and there is no return. 10. Make the Start menu button follow the system accent color - Nope (760+ upvotes) Microsoft "has got this," but the blue Start button is here to stay. Do you like what Microsoft did to Windows 11's Start menu? What features are still missing in your opinion? Share your thoughts in the comments.
    • Slack Business+ plan jumps to $15/month as AI features launch

      By Steven P. · Posted

      $15 per user is such BS.

  • Recent Achievements

    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      672
    2. 2
      ATLien_0
      286
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      195
    5. 5
      Steven P.
      141
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!