Page 1 of 1
How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 4:20 am
by simonmlewis
I have a page that shows a load of products.
Within that page, each row as a text box to enter a product's Brand name. Admin enter the brandname and click Go. That updates it in the database via Ajax query.
The problem is, all the boxes that have missing brands, have a red border. So after they click Go, even tho it has updated in the database, the page doesn't turn over (as it's Ajax), so the box remains with the red border.
How do I use some sort of PHP Listener to check that it is now 'occupied'.
I know nothing at all about Listeners.
Thanks.
Re: How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 4:53 am
by simonmlewis
I did look at this a few years ago.
This is what was said about the Ajax bit:
Code: Select all
$('.add_to_cart').click(function(event) {
var obj = $(this);
var item = obj.data('item');
var qty = obj.val();
$.ajax({
url: '/some/path',
method: 'POST',
data: {
item_id: item,
quantity: qty
},
success: function(data) {
$('.cart_selector_here').text(data.count);
}
});
});
This is my JS code:
Code: Select all
$(document).ready(function() {
$(".updatebrand").click(function() {
var form = $(this).parent('form');
var email = form.children('input[name=id]').val();
var buildid = form.children("input[name=brand]").val();
// etc
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&id=' + email + '&brand=' + buildid;
if (email == '') {
alert("Please Fill All Fields");
} else {
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_updatebrand.php",
data: dataString,
cache: false,
success: function(result) {
alert(result);
}
});
}
return false;
});
});
So if I replace my success: code with this:
Code: Select all
success: function(data) {
$('.cart_selector_here').text(data.count);
}
Or something a little more relevantly titled, where does it get data.count information from, and I assume I need a DIV with the id of cart_selector_here?
I want to use this method to state that we now have something in that field/db, and change the style='border: 1px solid #ff0000' etc... so it is just a normal field.
Re: How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 5:27 am
by Celauran
simonmlewis wrote:So if I replace my success: code with this:
Code: Select all
success: function(data) {
$('.cart_selector_here').text(data.count);
}
Or something a little more relevantly titled, where does it get data.count information from, and I assume I need a DIV with the id of cart_selector_here?
I want to use this method to state that we now have something in that field/db, and change the style='border: 1px solid #ff0000' etc... so it is just a normal field.
http://api.jquery.com/jquery.ajax/ (scroll down to success)
That's the payload you return from the AJAX call. Normally that would be a string or a JSON object. As you want data.count, you'd need to return either an array with count as a key, or an object with count as a property.
Re: How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 5:40 am
by simonmlewis
Ok - so I need it to, on 'success', to check that the field now has content in it. ie. it wasn't just a click of go, with nothing submitted.
Then the field:
Code: Select all
<!-- form id tag collates and post product id as parent --!>
<div id='form$row->id'>
<form onkeypress=\"return event.keyCode != 13;\">
<!-- values post other data as child --!>
<input type='text' id='brand' name='brand' value='$row->manufacturer' class='sendtofriendemail' placeholder='Enter Missing Brand'";
if ($usertype == "moderator") { echo " disabled readonly";}
if (!isset($row->manufacturer) || empty($row->manufacturer))
{
echo " style='border: 1px solid #ff0000; background-color: #ffff99'";
}
echo "/>
<input type='hidden' id='id' name='id' value='$row->id'/>
<input type='button' id='submit' value='Go' class='updatebrand'";
if ($usertype == "moderator") { echo " disabled readonly";}
echo "/>
</form>
</div>
I want the border color and background to be removed, and of course the content to have the submitted content.
How would I go about that? Do I need on 'success' to query that something is now in the field?
(how)
If something is in the field, how do I dynamically change the styling of the text field? I'm guessing that whole styling has to be done via some other code?
Re: How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 8:47 am
by simonmlewis
Code: Select all
$.ajax({
type: "POST",
url: "scripts/process.php",
data: dataString,
context: '#container',
success: function() {
$(this).html('<p> Your article was successfully added!</p>');
}
});
Just found this. Similar sort of thing.
So their DIV id is container. My <input> id is 'brand'.
But how do I use this html to set the color of the border back to normal? Do I assign maybe two classes to the input field.
One for Red and one for normal. And change the class in the HTML? And if so, what do I put in that html('') area of the code?
Re: How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 8:58 am
by simonmlewis
This is half way there.
Code: Select all
$(document).ready(function() {
$(".updatebrand").click(function() {
var form = $(this).parent('form');
var email = form.children('input[name=id]').val();
var buildid = form.children("input[name=brand]").val();
// etc
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&id=' + email + '&brand=' + buildid;
if (email == '') {
alert("Please Fill All Fields");
} else {
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_updatebrand.php",
data: dataString,
cache: false,
context: 'brand',
success: function() {
$("brand").css({'border':'0px solid'});
}
});
}
return false;
});
});
Only problem is, because each element on the page (each 'brand') has the same name it's changing the first one.
I cannot name each ID independently coz then this script wont' work.
ie. brand$->id.
Re: How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 8:46 pm
by Celauran
simonmlewis wrote:But how do I use this html to set the color of the border back to normal? Do I assign maybe two classes to the input field.
One for Red and one for normal. And change the class in the HTML? And if so, what do I put in that html('') area of the code?
Alternately, you could have a separate class for red/error text and remove that class when it is no longer needed, leaving any other classes alone.
Re: How do listeners work, after an Ajax update?
Posted: Thu Apr 27, 2017 8:49 pm
by Celauran
simonmlewis wrote:This is half way there.
Code: Select all
$(document).ready(function() {
$(".updatebrand").click(function() {
var form = $(this).parent('form');
var email = form.children('input[name=id]').val();
var buildid = form.children("input[name=brand]").val();
// etc
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&id=' + email + '&brand=' + buildid;
if (email == '') {
alert("Please Fill All Fields");
} else {
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_updatebrand.php",
data: dataString,
cache: false,
context: 'brand',
success: function() {
$("brand").css({'border':'0px solid'});
}
});
}
return false;
});
});
Only problem is, because each element on the page (each 'brand') has the same name it's changing the first one.
I cannot name each ID independently coz then this script wont' work.
ie. brand$->id.
IDs are meant to be distinct, so each input should have a separate ID. That aside, what does the markup look like? The echoed snippet I saw earlier showed a form with only two fields, only one of which was named brand. What is this .updatebrand you're listening on? Is that perhaps the wrong target?
Re: How do listeners work, after an Ajax update?
Posted: Fri Apr 28, 2017 3:12 am
by simonmlewis
Code: Select all
<!-- form id tag collates and post product id as parent --!>
<div id='form$row->id'>
<form onkeypress=\"return event.keyCode != 13;\">
<!-- values post other data as child --!>
<input type='text' id='brand' name='brand' value='$row->manufacturer' class='sendtofriendemail' placeholder='Enter Missing Brand'";
if ($usertype == "moderator") { echo " disabled readonly";}
if (!isset($row->manufacturer) || empty($row->manufacturer))
{
echo " style='border: 1px solid #ff0000; background-color: #ffff99'";
}
echo "/>
<input type='hidden' id='id' name='id' value='$row->id'/>
<input type='button' id='submit' value='Go' class='updatebrand'";
if ($usertype == "moderator") { echo " disabled readonly";}
echo "/>
</form>
</div>
This is it, row by row.
I guess to make this listener 'success' thing work, the brand "id" has to be distinct, unique. But how do I do that, and make the JS file identify it's ID number?
As I say, I was nearly there as I made it change the 'first' of all the input fields.
This is the PHP part that gets run.
Code: Select all
<?php
session_start();
$id = isset($_POST['id']) ? $_POST['id'] : null;
$brand = isset($_POST['brand']) ? $_POST['brand'] : null;
if (isset($_SESSION["loggedin"])) {
$usertype = $_SESSION["usertype"];
if ($usertype == "admin")
{
include "dbconn.php";
$result = mysql_query ("SELECT manufacturer, title FROM products WHERE id = '$id'");
while ($row = mysql_fetch_object($result))
{
mysql_query("UPDATE products SET manufacturer = '$brand' WHERE id = '$id'");
echo "$row->title updated brand from $row->manufacturer TO $brand";
}
}}
?>
Re: How do listeners work, after an Ajax update?
Posted: Fri Apr 28, 2017 5:32 am
by Celauran
simonmlewis wrote:This is half way there.
Code: Select all
$(document).ready(function() {
$(".updatebrand").click(function() {
var form = $(this).parent('form');
var email = form.children('input[name=id]').val();
var buildid = form.children("input[name=brand]").val();
// etc
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&id=' + email + '&brand=' + buildid;
if (email == '') {
alert("Please Fill All Fields");
} else {
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_updatebrand.php",
data: dataString,
cache: false,
context: 'brand',
success: function() {
$("brand").css({'border':'0px solid'});
}
});
}
return false;
});
});
Only problem is, because each element on the page (each 'brand') has the same name it's changing the first one.
I cannot name each ID independently coz then this script wont' work.
ie. brand$->id.
Looking at it with fresh eyes this morning, I see no reason you'd need to worry about any of that. Your submit button is triggering the call (might be better to attach the listener to the form's submit() event than the button's click(), but that's separate), you're finding the parent form, and then finding the child elements. Which is to say you already have everything you need. Rather than grabbing the brand ID directly, why not grab the element instead? You can grab its value when you're putting together your datastring
and and you've still got a reference to the element to which you can apply the style.
Code: Select all
$(document).ready(function() {
$(".updatebrand").click(function() {
var form = $(this).parent('form');
var email = form.children('input[name=id]').val();
// Instead of this
// var buildid = form.children("input[name=brand]").val();
// Get the element
var brand = form.children("input[name=brand]");
// etc
// Returns successful data submission message when the entered information is stored in database.
// Now you can grab the value of the element
var dataString = '&id=' + email + '&brand=' + brand.val();
if (email == '') {
alert("Please Fill All Fields");
} else {
//AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajax_updatebrand.php",
data: dataString,
cache: false,
context: 'brand',
success: function() {
// But you still have brand, which you can then style directly
brand.css({'border':'0px solid'});
}
});
}
return false;
});
});