ava_barbilla
-
Posts
47 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by ava_barbilla
-
Yes, I am using a localhost and installed Wordpress. Both the php file and the script file are stored under "wp-content" folder. Javascript and Ajax is executed not by double-clicking it on the desktop, but directly from my Wordpress site as if it were live. Once I place setRequestHeader() after .open(), the error is removes and I have to say the file could not be opened because the link was incorrect. Now I have inserted the correct path to my php file, my console is clear and still nothing appears.
-
Aaaaaah you were right. I have learned something new. Look at this: Uncaught InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED. This console error showed up. If I delete the 'setRequestHeader' this shows up: XMLHttpRequest cannot load http://localhost:888...-files/test.php. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, opera, https, chrome-extension-resource. test.js:15 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost:888...-files/test.php'. What could be causing the error?
-
Wow I have tried that as well and it still does not work. I have been working with html and never had a problem with the structure. It must be the Ajax request or not? Sorry to ask you again, how would you structure the Ajax request? Simply speaking, a way to use javascript in order to make an Ajax request which will execute some php code stored in an external file and return the result in a div. My external php file looks like this: <?phpecho(rand(10,100));?> This script works fine and presents a random number every time the page is refreshed, so I can assume that my php is working fine <script type="text/javascript">var num = <?php echo mt_rand(1, 100); ?>;alert(num);</script>
-
I have put the body tag inside a div with other scripts and it works perfectly fine. I checked it just in case and just displayed the body tag by its own with the div id="demo inside" and nothing appears. If nothing appears could it not be the Ajax request? I mean, does it make sense to you or is there something missing? How would you organize or structure the Ajax request in terms of getting the php code and placing it in html? If it is not too much work for you of course. Many Thanks!!
-
Sorry I forgot to say, the above code was just an example. My actual script is: function ajax_post(){ // Create our XMLHttpRequest object var xmlhttp = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var url = "http://localhost:888...-files/test.php"; // Set content type header information for sending url encoded variables in the request xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var return_data = xmlhttp.responseText;document.getElementById("demo").innerHTML = return_data; } } xmlhttp.open("POST", url, true); xmlhttp.send(); // Actually execute the request document.getElementById("demo").innerHTML = "processing...";} I do not use an input form. Just as I depicted previously, instead of having a button, I load the function using: <div style="display:none;"><body onload="ajax_post()"> <------ Here you can see that I have called the function which executes the AJAX Request after the page has loaded.<script type="text/javascript" src="http://localhost:888...ascript/test.js"></script></body></div><div id="demo"></div>
-
Thanks Foxy Mod. I have logged the data and still nothing appears. Does it have to do with this maybe: xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); What I have done was to combining the Ajax request from W3Schools and from this link (http://www.developphp.com/video/JavaScript/Ajax-Post-to-PHP-File-XMLHttpRequest-Object-Return-Data-Tutorial): my_parse_file.php <?php echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file'; ?> And the html example looks like follows: <html><head><script>function ajax_post(){ // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var url = "my_parse_file.php"; var fn = document.getElementById("first_name").value; var ln = document.getElementById("last_name").value; var vars = "firstname="+fn+"&lastname="+ln; hr.open("POST", url, true); // Set content type header information for sending url encoded variables in the request hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var return_data = hr.responseText;document.getElementById("status").innerHTML = return_data; } } // Send the data to PHP now... and wait for response to update the status div hr.send(vars); // Actually execute the request document.getElementById("status").innerHTML = "processing...";}</script></head><body><h2>Ajax Post to PHP and Get Return Data</h2>First Name: <input id="first_name" name="first_name" type="text"> <br><br>Last Name: <input id="last_name" name="last_name" type="text"> <br><br><input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();"> <br><br><div id="status"></div></body></html> As both examples deal with input forms, I thought to apply the same idea but instead of returning perhaps a "suggestion" for the first and last name like W3Schools stated, simply getting the php code from an external file. As I mentioned earlier, this may have to do with the header. What I may have also thought was that in the previous examples you can see that the variables are sent hr.send(vars); given that earlier var vars = "firstname="+fn+"&lastname="+ln;, but I do not know if this is really relevant. The idea of all this is to make an easy Ajax request which just picks some php code and places it on my html. Do I have to change something in the php? Something in the Ajax call? Does this work for you Foxy Mod? Best!!
-
Wow great explanation. Thanks once again. I have been researching since yesterday on how to make an Ajax request and came up with this: function ajax_post(){ // Create our XMLHttpRequest object var xmlhttp = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var url = "http://localhost:8888/.../my-php-files/test.php"; // Set content type header information for sending url encoded variables in the request xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var return_data = xmlhttp.responseText; document.getElementById("demo").innerHTML = return_data; } } xmlhttp.open("POST", url, true); xmlhttp.send(); // Actually execute the request document.getElementById("demo").innerHTML = "processing..."; } I saved this script as a file under: http://localhost:8888/.../javascript/test.js <-- I have tested other scripts saved at this location and they work perfectly fine. My php file contains the following data (it is named "test.php"): <?php echo(rand(10,100)); ?> After I make the request to the php file which should display a random number according to the php code, my html looks like this: <div style="display:none;"> <body onload="ajax_post()"> <------ Here you can see that I have called the function which executes the AJAX Request after the page has loaded. <script type="text/javascript" src="http://localhost:8888/.../javascript/test.js"></script> </body> </div> <div id="demo"></div> I keep refreshing the page and nothing appears. Does it have to do with my php code? Perhaps my Ajax request is wrongly structured? In terms of Ajax request, I have tried "GET" and "POST" as well and still nothing happens. As you know I am new at Ajax and the might syntax my not make sense... Thank you for the great support. Regards!!
-
Well I am I bit new to this and have been working my way up in javascript and am starting with php, so these terms are not something I use every day. What I do know is that by rendering I am making sure that javascript executes at the same time as php in order to coordinate two languages (one client-side and the other server-side) to run basically "parallely" which makes sense; I have understood that. Could you provide any demo or link which describes any method of rendering javascript? How and where would I use rendering in my case? Or possibly explain: How I can convert this script into Ajax? Any advice or demo would really help. Regards!!
-
Sorry I forgot to say, do you refer to ".render()"? If yes, do I apply it to the variable equals to the php code? I my php code correct? I mean, is the structure of my javascript correct? Thanks!!
-
Thanks for the quick answer. To be honest, I have no idea on rendering JS with PHP. Could you explain or give me a brief insight? King regards once again!!
-
Hey guys. I have received great support from this forum on my last topic and I needed a little help. I was doing a javascript which automatically refreshes a div after a certain amount of time which looks like this: <div id="demo">Test</div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready( function() { setInterval(function() { var num = Math.random(); $('#demo').text(num); }, 3000); }); </script> This makes complete sense. The javascript refreshes the div after 3 seconds giving a random number. My question is: How can I equal the variable "num" to a php echo code that would present a random variable as well. I have tried something like this: <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready( function() { setInterval(function() { var num = <?php echo(rand() . "<br>")?>; <-- I have tried putting quotes around the php code, removing "php" from "<?php", etc. $('#demo').text(num); }, 3000); }); </script> In this case scenario, I utilize a random number just as a test. At a further stage, I would replace the php code that echoes a random number by this: <?php echo do_shortcode( $content ) ?> The reason for this is because I use Wordpress. I would like to equal a javascript variable by echoing a shortcode from the server side. This shortcode contains some data that refreshes with new content and instead of loading the entire page again, I only update the div's that are influenced by the javascript. Many Thanks!!
-
Ok, I finally found the solution and followed your advices. This is my code: <p id="price"></p><p id="prev"></p><script>document.getElementById("prev").innerHTML = localStorage.getItem("prev");var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;var prev = document.getElementById("prev").innerHTMLif (price == prev) {document.getElementById("prev").innerHTML = localStorage.getItem("beforeprev")}// Save previous to the one before & Save price to the previous valueif (price != prev) {localStorage.setItem("beforeprev", prev);localStorage.setItem("prev", price);}</script> What effect will this have? I mean, if I insert this script into my website for instance, as a server side code will everyone who visits my site be able to view the current price and the previous as my server has already stored the data? or does this depend on the clients browser and for everyone who visits my site the process wil start over again? Will the data be permanently stored? My enormous gratitude to you guys your tips really helped me!!
-
Sorry I forgot to say, I put in Number(6) for testing purposes as when a random number appears it works fine. Putting in a number by myself is for testing purpose to check if it really choose the second localStorage when the #price and #previous are equal.
-
This is my code: <p id="price"></p><p id="previous"></p><script>document.getElementById("previous").innerHTML = localStorage.getItem("previous");localStorage.setItem("beforeprevious", localStorage.getItem("previous");if( document.getElementById("price").innerHTML == document.getElementById("previous").innerHTML) {document.getElementById("previous").innerHTML = localStorage.getItem("beforeprevious");}var price = Number(6);document.getElementById("price").innerHTML = price;localStorage.setItem("previous", price);</script> I do not know why nothing appears Thank you again for your support
-
Sorry , this localStorage gets me so confused. How can I add a second localStorage to refer back when both values are equal? Once I add one my script adds the same value to both localStorages. Would you be able to provide a demo like last please? Best regards!!
-
Ok. Makes sense to me, I will add an if statement to compare the variables, and use the value required depending whether the the comparison is equal or not equal. Thank youuu!!
-
Assuming that the random number will not change for 5 page refreshes or for x amount of time, something like this?? <p id="price" onchange="myFunction()"></p><p id="previous"></p><script>document.getElementById("previous").innerHTML = localStorage.getItem("previous");var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;function myFunction() {localStorage.setItem("previous", price);}</script>
-
There is a last issue I have come up with. I think this is were .onchange() comes into play. The above script works perfectly fine, always refreshing the random number, showing the old random number and so forth. What function could I use when the value under price is not a random number. For instance, take the stock market. The value under price changes so this number is stored and when I refresh the page again this vale appears under previous, PERFECT! Now, what if the value under price does not change? The script regarding localStorage is still executed on page refresh and will always store the value that appears under price. This means, that is the number has not changed it will sotre the unchanged value and then eventually both #price and #previous will be the same. Here is what I mean: One case scenario: Page refresh #price = 1.3 #previous = 1.56 Page refresh #price = 1.45 #previous = 1.3 Page refresh #price = 1.14 #previous = 1.45 PERFECT UP TO HERE! Second case scenario: Page refresh #price = 1.26 #previous = 1.14 Page refresh #price = 1.9 #previous = 1.26 Page refresh #price = 1.9 <======= The price here remains unchanged #previous = 1.9 What I want to do is for this last page refresh, is that if the number remains unchanged, to not run the localStorage.setItem. The last page refresh would look like this: Page refresh #price = 1.9 #previous = 1.26 Many thanks again for the support!!
-
Wow!! Thank you very much for your support. With my folded view I could not see the solution altough it makes sense to me now, but hey, everyday you learn something more and all thanks to you guys. Best regards!!!!!
-
The problem with localStorage and sessionStorage out of my understandgin is that data is permanentyl stored, so once I refresh the page the script using local storage will always put in the recent value. What I want to do is once the page is refreshed, insert the new random number under #price and old random number (which was the random number that appeared before I refreshed the page) under #previous. This cycle continues on for every page refresh. Something similar to excel VBA: http://stackoverflow.com/questions/4668410/how-do-i-get-the-old-value-of-a-changed-cell-in-excel-vba This is just like when you watch the news and the stock prices appear with a section called previous. Under previous appears the price of the stock before it either increased or decreased. Those firms also use some type of scripts to record the prices and show under the previous section the value of the stock one record before. I want to apply this using a random number. Would you be able to provide any demo? I would really appreacite it!! Many thanks!!!!
-
To be honest, I have no idea on how to assign event handlers, however, I do have some knowledge about localStorage. I have been trying out some code since some days and it looks like this: <p id="price"></p><p id="previous"></p><script>var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;localStorage.previous = price;document.getElementById("previous").innerHTML = localStorage.previous;</script> This code does not work. I am finishing highschool and do javascript as part-time learning as it is simply lots of fun. I have been using javascript no for 6 months and know my way around but am not an expert. What do you propose to confront this problem? Best regards!!
-
I am currently trying to find out a way to automatically store the previous price of an item before it gets updated. For instance, if on my website I show the currency exchanges let it be USD to EURO and I only get the real time exhange price, how can I use javascript to display the previous value in one line and display the updated value in another line. This is an example code, assuming that the random number is the exchange price between the currencies. Markup: <p id="price"></p><p id="previous"></p> JavaScript: <script>var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;</script> In this case scenario, a random number appears and it is for example 1.11. Afterwards, I refresh the page, the script runs again and the random number changes to 1.43. I want to display the new random number which is 1.43 under #price and the old (or previous) random number which in this case was 1.11 under #previous. How can I use JavaScript to do so? I have done some research and got some clues like using .onchange or localStorage under the script.