How do listeners work, after an Ajax update?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
How do listeners work, after an Ajax update?
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do listeners work, after an Ajax update?
I did look at this a few years ago.
This is what was said about the Ajax bit:
This is my JS code:
So if I replace my success: code with this:
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.
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);
}
});
});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;
});
});Code: Select all
success: function(data) {
$('.cart_selector_here').text(data.count);
}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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do listeners work, after an Ajax update?
http://api.jquery.com/jquery.ajax/ (scroll down to success)simonmlewis wrote:So if I replace my success: code with this: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?Code: Select all
success: function(data) { $('.cart_selector_here').text(data.count); }
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.
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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do listeners work, after an Ajax update?
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:
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?
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>
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do listeners work, after an Ajax update?
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>');
}
});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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do listeners work, after an Ajax update?
This is half way there.
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.
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;
});
});I cannot name each ID independently coz then this script wont' work.
ie. brand$->id.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do listeners work, after an Ajax update?
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.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?
Re: How do listeners work, after an Ajax update?
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?simonmlewis wrote:This is half way there.
Only problem is, because each element on the page (each 'brand') has the same name it's changing the first one.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; }); });
I cannot name each ID independently coz then this script wont' work.
ie. brand$->id.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do listeners work, after an Ajax update?
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 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";
}
}}
?>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do listeners work, after an Ajax update?
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.simonmlewis wrote:This is half way there.
Only problem is, because each element on the page (each 'brand') has the same name it's changing the first one.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; }); });
I cannot name each ID independently coz then this script wont' work.
ie. brand$->id.
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;
});
});