Update variable using $.ajax on .click

Question

EDIT: The question has more to do with altering the variable (valueA) than anything. I am already getting the desired load result using the script below. I am trying to attach something to the script that will ultimately alter valueA once clicked.

I am designing multiple pages that will load into a main content div on click using .load

index.php

//Setting default value

$valueA = 5;

//Created separate div to allow me to monitor the variable and changes    

<div><?php echo $valueA; ?></div>

//Loading first page into div

<div id=main_content>

<?php include 'page1.php'; ?>    

</div>

Included in page1.php is a button that will load the page assigned to it.

page1.php

<button id="button1">Click Me!</button>

<script>
 $(document).ready(function(){
   $('#button1').click(function(){
     $('#main_content').load('page2.php').hide().fadeIn('slow');
     $.ajax({
        type: 'POST',
        url: 'index.php',
        success: $valueA += 5,
     });
  });
})

Upon clicking, page2.php will load, but the value will remain 5. I am trying to figure out how to add the 5 using the ajax script to the valueA. Ultimately, the new page would load, and the value would increase to 10.

success: $valueA += 5, is invalid you couldn't mix PHP and JS like that. — Zakaria Acharki
– Zakaria Acharki, Commented Mar 8, 2016 at 20:30
Any suggestion on a solution? I'm fairly green, so at best I am working with a theory that doesn't work, with not much experience using the ajax function. Thanks in advance. — Kyle Heier
– Kyle Heier, Commented Mar 8, 2016 at 20:41
It's not clear what you want to acheive, please try to describe more clearly the behavior. — Zakaria Acharki
– Zakaria Acharki, Commented Mar 8, 2016 at 20:43
Ultimately I am trying to attach the incremental value to the script. So when I click the button (.button1), it loads the page (which works), and adds the value to the original variable (valueA += 5;). The problem has to do with altering the variable on click than more than anything else. — Kyle Heier
– Kyle Heier, Commented Mar 8, 2016 at 20:46
Apologies. In my project, I am currently monitoring the variable in a seperate DIV that is outside of the #main_content div. This allows me to see the variable in real-time. I didn't include it here, sorry. I will edit to show. — Kyle Heier
– Kyle Heier, Commented Mar 8, 2016 at 20:52

mhodges · Accepted Answer · 2016-03-08 21:32:53Z

1

The incrementing of your php variable has to be done in a php script, not javascript. Javascript inherently knows nothing about your php, and vis-versa.

The other thing to mention is that the success property on the $.ajax object is a function, so you should define it as such. See jQuery Documentation for full details on $.ajax

$.ajax({
  ...
  ...
  success: function () { ... }
});

Edit

After clarification, here is an updated, more thorough example.

HTML

<div id="valueAContainer"><?php echo $valueA; ?></div>

jQuery

$.ajax({
  url: "yourphpscript.php",
  method: "GET" (or post, whatever is applicable),
  data: { valueA: $("#valueAContainer").text() },
  success: function (data) {
     $("#valueAContainer").text(data);
  }
});

PHP

// get valueA variable from request
$oldValue = $_GET['valueA'];
// Do whatever you want to it - increment, save to DB, etc.
$updatedValue = $oldValue + 5;
// Return updatedValue to javascript
echo $updatedValue

edited Mar 8, 2016 at 21:32

answered Mar 8, 2016 at 20:33

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kyle Heier Over a year ago

Given the problem, would you perhaps then set the valueA as a variable using javascript (ie. var valueA = 5;), and would that allow the ajax function work in some way to achieve the goal?

mhodges Over a year ago

It's hard to know, based on what little code we have been given, but there are a lot of ways to do it. If you have something in html or javascript holding that value, you can pass the current value to your php script increment, save it to a database, whatever you feel like doing, and then pass it back to your javascript using the data parameter of the success callback function. I will update my answer to show what I mean

Kyle Heier Over a year ago

I appreciate your efforts. I believe this should get me started down the right path. Thanks again.

mhodges Over a year ago

Updated again to be a little more specific.

Collectives™ on Stack Overflow

Update variable using $.ajax on .click

1 Answer 1

Edit

HTML

jQuery

PHP

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

HTML

jQuery

PHP

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related