I am using ajax to grab two pieces of text from a seperate script with jQuery. I have done the check and the script correctly sends the infomation to the original php page.
I have a div container that holds the tags with the text in them. These <p> tags have a class name of summary_text.
<p class='fight_summary_text'>a random piece of text</p>
The first <p> tag is populated with information when the php page loads. When a button is clicked, the jQuery is fired off and two more pieces of information should follow:
$(".summary_text:first").before(data.message_one).slideDown(750, function() {
$(".summary_text:first").before(data.message_two).slideDown(750);
});
The problem I am having is that the first piece of information is inserted correctly on the page. It slides down and works fine, but the second piece of information does not appear.
However, that alone is not the problem. If I click the button a second time, both pieces of text appear correctly one after the other.
Does anyone know what is causing this? As I can't seem to locate the problem as it works when the button is clicked a 2nd, 3rd, 4th time etc.
I'm not sure if i understood your requirements correctly, but I tried and put together a fiddle. The problem I saw was the order of the statements.
Related
TESTING ENVIRONMENT: Windows 8 using the tool XAMMP. PHP and Mysql are up to date.
MY KNOWLEDGE: Starter.
QUESTION: I can't get the updated content immediately after the first click, only after the second, which can become pretty nasty considering I have two kind of buttons for my little voting system. Yes, I said a lot not alot : )
What is the cause for this predicament and how can I fix this?
WHAT I TRIED: Checked my developer tools network analysis and I get a status 200 with the correct value for every click. When using my firefox DOM inspector view I saw something unusual: upon the first click only #votes is marked in orange probably denoting that it has been affected. However, only on the second attempt on the same button both divs, #votes and #progress, get marked orange in addition with the updated values. So I expect it does on second click but not on the first one. Then I refreshed my page and tried something else. I clicked on "bad" and this time the second click landed on "good" with bad updating the value in the DOM. It seems as if the entire process is split and does not happen simultaneously which is why I speculate that:
Click 1: Sends data to php.
Click 2: Gets the data from php and displays it on the DOM.
The PHP code itself in conjunction with my database and HTML (if set to submit) works perfectly fine so I dont assume there is anything wrong on the server side. Connection to the database is set. My sessions work perfectly. No errors.
My console shows 0 javascript errors.
Test 1 : I commented out my entire php code and set up a testing variable with a simple string and changed the values in my code below accordingly. To my suprise, on clicking it immediately took the data and display the content of my testing variable.
Test 2 :: I removed the php codes from the two div tags which you will see below. They act as placeholders that show the current value before any AJAX happens. I removed those and I get an update on first click as the container was first empty. Although, on second click and toggling between good and bad happened to be a mess again.
Test 2 :: Placing jquery and my AJAX script in the head of the document did not do the job either (just to be on the safe side). Prior it was before the </body> tag
I access the returned json object through my callback parameter named data which then inserts html and css via jquery into the respective div containers.
Converted the jquery below to pure javascript but no positive change could be observed.
JAVASCRIPT / AJAX
function vote(type) {
$.get('php/core/voting_system_function.php', {vote:type}, function(data) {
$('#votes').html(data.votes_sum);
$('#progress').css('width', data.progress);
}, 'json');
}
HTML
The buttons onclick event feeds the data on to the parameter within my vote functions which then sends it to {vote:type} and then to my php file. This allows me to do several checks to see if the click was either 'good' or 'bad' and substract or add data accordingly in my database.
#votes and #progress
<div id="quality_meter">
<div id="progress" style="width:<?php echo $progress ?>"></div>
</div>
<div id='votes'><?php echo $votes_sum ?></div>
The connection to the database is correct and readable through a require.
The script works assuming the user actually logged in as they cant access the page otherwise. As you can see I am making use of two session variables.
As you can see, I am making checks to see which button has been clicked and query accordingly.
The last bit of the code returns a json object through an associative array with the data stored by the variables you see there which is votes_sum and progress. I use json_encode to return the json representation of my value.
When you say you're not getting the response until the second click, do you mean the "votes_sum" in the votes div isn't updating with the latest votes?
The reason for this is that you calculate the $votes_sum value before you call the voting_system() function which is what updates the votes count, then after voting_system() you move the $votes_sum - unchanged - to the $output array.
I'm having a few problems with jQuery/AJAX and was wondering if anyone could point me in the right direction!
I have an AJAX request on my page that populates a div (call it with div 1) with a select box. Also contained is another DIV (call it div 2). After selecting an option from the select box and clicking a button, I then want to populate div 2 with some extra information. However, when I try to do this, it appears that jQuery is trying to load div 1 with the new information. When I use chrome to inspect the element, I can see that when the button is clicked that div 2 is removed for some reason. Can anyone advise?
Not really possible to answer this question without seeing your code, but here is another SO question that discusses how to populate <select> control B, based on the contents of <select> control A.
Three Ajax examples (look at the last one)
Ok, so the weirdest thing happened here.
I have a php file with Javascript to write onto elements based on events on the webpage.
And there are 3 html forms on the page. One is a searchbox, one has all inputs hidden and gets submitted on a certain event, and one is a textbox and a button on clicking which the javascript writes the text to a certain element in the page.
Also, this third form is itself written onto the document by the javascript on clicking another button.
The problem is, while doing certain operations with this third form, i need to reference one of its inputs values (newSkillName).
So for this third form, In Chrome-
document.forms[1].newSkillName.value
works,
while in Firefox-
document.forms[2].newSkillName.value
works.
I, however, managed to fix the code. But i'm still curious. Why did Chrome and Firefox process the abnormality differently?? Any idea?
Give the form elements unique ID attributes and reference them with document.getElementById(id).
You could also use the NAME attribute and reference the form by name document.forms["name_of_form"];
The quick workaround/copout fix is to hunt down the field in the DOM a diffferent way. For example, with id='NewSkillName' use document.getElementById('NewSkillName').value.
I've created a PHP web form which when all the data is present has 2 submit buttons (Continue and Print). Continue calculates details based on the entered information and displays it on the page. Print performs the same calculations, but then creates a PDF in a new window.
When I click Print the original page still loads (which is fine) but the styling is altered.
To see what I mean head to this page and for speed enter "1" in all text boxes except Position (which must be text). After you've clicked Continue, click Print to generate a PDF, then look back at the original web page to see altered styling.
Any ideas would be useful.
Thanks,
Adrian
Assuming you mean the tables overrunning the footer, get rid of the height: 100%; on #prodselector_text, solves the issue for me.
Further to my question yesterday (here), I am working on a webpage that has a section that shows 'live' order details.
The top half of my webpage has Spry Tabbed Panels. One of the panels contains an include call to a separate php page that I have created (getOpenOrders.php). This contains an SQL query to obtain all open orders and then puts the details into a table.
As a result, the table of open orders is shown in the Spry panel. What steps do I now need to take to have this refresh every 15 seconds?
Do you really want to call the database every 15 seconds for each user? isn't that an overload?
I'm not saying that your database will be overloaded, but, thats how you shouldn't do things!
Edited
you should show an image, or the link to that page in order to gt an appropriate answer, because it all depends in what are you doing in the table.
because I don't know, I will give you an answer on what probably is happening.
Because you said that you're new to the ajax world, let's make things simple, and not to complicate on the you should return a JSON object and use it to re populate your table. :)
So we will start with 2 buttons (Previous and Next) so the user can move the data that is showing (you probably don't want to give him/her 100 lines to see right?)
let's say that you have 2 pages, a showData.php and getTable.php, in the showData.php you will need to load jQuery (wonderful for this) and add a little code, but where the table is to be placed, just add a div tag with an id="myTable" because we will get the data from the getTable.php file.
getTable.php file has to output only the table html code with all the data in, without no html, body, etc... the idea is to add inside the div called myTable all the code generated by getTable.php
Let's imagine that getTable.php gets a page variable in the queryString, that will tell what page you should show (to use LIMIT in your MySQL or PostgreSQL database)
You can use jQuery plugin called datatables witch is one of my choices, check his example and how small code you need to write! just using jQuery and Datatables plugin.
The first description follows the jQuery.Load() to load the getTable.php and add as a child of the div and wold do this for the previous and next buttons, passing a querystring with the page that the user requested. It's to simple and you can see the website for that, if you prefer to use the DataTables plugin, then just follow their examples :)
if you, after all this need help, drop me a line.
<META HTTP-EQUIV=Refresh CONTENT="15; URL=<?php print $PHP_SELF ?>">
This should be in between the head tags.
-or-
header('Refresh: 15');
This should be before the head tag and directly after the html tag.
As said by balexandre, a different method should be used. One that does not require a database hit every 15 seconds for every single user that is connected to the site. But, there is your answer anyways.
Although, balexandre makes a very good point, if you do decide that you need a refresh, you could simply do something like this in your JavaScript:
window.onload = function( )
{
setTimeout( 'window.location.refresh( )', 1500 );
}
(I've not tested the above code, so syntax may need to be tweaked a little, but you get the idea)