Request for the simplest jquery-ajax tutorial - javascript

I am a bit new to ajax and trying to understand how it works with jQuery.
I am searching for an example for the simplest tutorial just to understand how to get started.
Let's say - that when the page loads I want that to ask for server (PHP) to insert inside body tag the words "Hello world"
How do I do that? (in the html and in the server side file)

I suggest you take a look at the jQuery documentation. The documentation for load provides an example:
$('#result').load('ajax/test.html');
that loads the content of ajax/test.html and displays it in an element with id result
We can then mimic it and call the load function inside the ready function that is executed after the page has loaded. We use the selector body to select the body element(s) and instruct the content of the(se) element(s) to be replace with the content of ajax.php
$(document).ready(function() {
$('body').load('ajax.php');
});

OK in your HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="my_content">Nothing here yet</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
// When jQuery is ready
$(function(){
// Get the contents of my_page.php
$.get("/my_page.php", function(data){
// When the contents of my_page.php has been 'got'
// load it into the div with the ID 'my_content'
$("#my_content").html(data);
});
});
</script>
</body>
</html>
Then in your my_page.php PHP file:
<?
// This is what jQuery will get
echo "Something is here now!";
?>

index.html
<script>
$(document).ready(function() {
$('#body').load('ajax.php');
});
</script>
<div id="body"></div>
ajax.php
<?php
echo "Hello, World!";
?>

Related

function on javascript can't remove

how to remove ALL DOM in specific id, we know http://jsfiddle.net can test javascript for all condition.
directory file:
\root
\root\index.php
\root\load.php
index.php have script tag id='index' and this index.php using .load() (jQuery) for load.php, in load.php have script tag id='load',
i try use this method (in load.php for clean DOM from index.php):
$(document).ready(function(){
$("#index").remove();
});
but this not remove DOM Function, why??
EDIT :
This trouble is DOM cant be remove
i needed is delete a < script id='index' > and DOM Function (ALL FROM THIS TAG) if i loaded "load.php"
You can't use multiple elements with same id if you want to do so you need to use classes instead:
$(document).ready(function(){
$(".index").remove();
});
UPDATE
if what you want to hide your script when you load another file you could do so by surrounding your script between a div to hide for example:
<div class="divtohide">
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").load("load.php");
});
});
</script>
</div>
and in your load.php you could create a script to remove the .divtohide div:
<script>
$(document).ready(function(){
$(".divtohide").remove();
});
</script>
Your JavaScript will be run at .load(). So, we need to remove the string before loading the content into the webpage. I decided to use $.get, which will fetch the information as text. Then I run the data through a regex that will remove script#index. From there, I then append it to the page (for testing). If you notice there is no console.log's despite it being in the source of removeIndex.html, that's because we have successfully removed the JavaScript at script#index.
$.get("http://neil.computer/stack/removeIndex.html", function (data) {
data = data.replace(/<script.+?id=["']index["'](.|[\r\n])*?<\/script>/gi,"");
$("#container").html(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
removeIndex.html
This file has some sample input:
<div>
Testing stuff
</div>
<script id="index">
console.log("ignore me");
</script>
<div>
Testing more stuff
</div>

$.post() Get url of php in html

I am making an html script that will use jQuery.post() method in order to use a php script. The post() method needs an url of the php code but my php code is part of the html code
What Url should i use?
<html>
<body>
<button onclick="test()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var test = function() {
$('--I DONT KNOW--',{testvar:"hello"});
}
</script>
<?php
$testvar = $_POST['testvar'];
echo $testvar;
?>
</body>
</html>
An empty URL is a relative URL that resolves as the URL of the current page.
$.post("", {testvar:"hello"});
(Keep in mind that since your PHP does nothing with the data except output it, and your JS does nothing with the response, this will have no visible effect outside of the Network tab of your browser's developer tools).

how to add javascript inside php file with html content?

I have a Wordpress plugin. inside this plugin there is a php file.(for example name.php) this php file contains some codes which they are inside this code:
<script type="text/html" id="tmpl-dokan-single-variations">
//codes
</script>
Now I want to add some Javascript codes and I've tried this code:
<script type="text/html" id="tmpl-dokan-single-variations">
<script type="text/javascript">
//mycodes
</script>
//codes
</script>
Also I've tried echo script but it doesn't work either.
Please tell me how can I add some javascript code inside this file?
There is no way to include the raw string </script> inside a script element.
You would need to find some alternative representation of it (such as <!-- TEMPLATE: SCRIPT END TAG --> and then modify the code (which is presumably JavaScript) that reads the value of the <script type="text/html"> element so it can replace that alternative representation with the end tag you actually want.
I dont know what your php file looks like but you can echo your script like this
<?php
echo '
<script>
// your code here
</script>
';
?>

How to load php code into html tag DIV using Jquery?

I am trying to load php code into div tag to show the results but the below code doesn't work for.
Can anyone please help me...to resolve this
my code is below:
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$("document").ready(function()
{
$("#myDiv").load("refreshing.php");
}
</script>
</head>
<body>
<div id='myDiv'> </div>
</body>
</html>
Change script tag to this
<script type="text/javascript">
$(document).ready(function()
{
$("#myDiv").load("refreshing.php");
});
</script>
i.e. you're missing ); at the end
Also, document should not have quotes on it
You cannot load php code .load() because as the web server gets the GET request with .php, the request is passed to PHP interpreter which will execute the PHP script and return the result of the php script instead of code. So what you can do is in your PHP script, do a echo of all the code that you want to display. Or, you can define custom rule in your Apache configuration.
You've forgotten the closing bracket:
$("document").ready(function(){
$("#myDiv").load("refreshing.php");
});

Load external Web Page with jQuery

I was wondering what a good way to load an external web page (same server) would be. I have tried .load() and .get() however, The external page has a php script that spits out information every few seconds, the .load() and .get() only load it after the php is done. I have tried iFrame with does load it displaying the information being outputted by the PHP script. However, I don't really like to use iFrames. Thanks!
If your goal is for the PHP information (that is spit out every few seconds) to be updated on your site, then what you want to do is use AJAX, inside a setInterval routine.
See this post for the basics of AJAX -- it really is simpler than you might think. (You might first want to look at the simple examples linked at bottom).
Once you've got a simple ajax exchange happening, put that into a function called, for example, doAjax() -- and then create a setInterval, like this:
setInterval('doAjax();',60000);
Here is an important note when considering setInterval
Following is a simple copy/paste(able) example that will let you see exactly what I mean:
HTML/javascript: index.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
#timeDiv{width:40%;height:200px;background:wheat;padding:10px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
doAjax();
window.setInterval(function(){
doAjax();
},2000);
}); //END document.ready
function doAjax() {
$.ajax({
type: "POST",
url: "your_php_processor.php",
success: function(myData) {
$('#thetime').html(myData);
}
});
}
</script>
</head>
<body>
<div id="timeDiv">
The time is: <span id="thetime"></span>
</div>
</body>
</html>
Now, the PHP side... your_php_processor.php
<?php
$d = date("h:i:s");
echo $d;

Categories