How can i update a webpage and url without reloading the web page. I saw this at SoundCloud and i want to use this at my own project.
This is an idea of what i want:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<?php
$url = $_SERVER['REQUEST_URI'];
if (url == /login){
include 'php/login.php';
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/login')
});
</script>"
}
if (url == /home){
include 'php/home.php'
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/home')
});
</script>"
}
?>
</html>
the problem is, when i enter www.mydomain.com/home for example i get (of course) a server error that the file not exists. How can i fix this problem?
Try window.location.hash=your_hash_string in JavaScript
That file doesnt exist. Error occur when some php script on ur server is utilizing those file locations.
Try something like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="navigation">
<ul>
<li>Login</li>
<li>Home</li>
</ul>
</div>
<div id="content"></div>
</body>
<script type="text/javascript">
function _load_content(url) {
$("#content").slideUp("slow", function() {
$("#content").html('<p align="center">Loading...</p>');
}
$.ajax({ type: "get", url: url,
success: function(response) {
$("#content").html(response);
$("#content").slideDown("slow");
},
error: function() {
alert("An error occured");
}
});
}
$(document).ready(function() {
_load_content("php/home.php");
});
</script>
</html>
NOTE: This is the very basic function I made... You should really learn jQuery AJAX.
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
I am trying to send JSON data from page1 on submit button click and try to receive this data dynamically from page2 using AJAX and print the data in console. I don't know the proper syntax to do this. One suggested code which is not appropriate. The code is given:
page1:
<?php
if(isset($_POST["submit"])){
$x = "ok";
echo json_encode($x);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>page1</title>
</head>
<body>
<p>This is page is sending json data on submit button press</p>
<form method="post">
<input type="submit" name="submit">
</form>
</body>
</html>
page2:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>
<body>
<p>Get json data from page1 dynamically using ajax</p>
<script>
setInterval(checkVariableValue, 5000);
function checkVariableValue() {
$.ajax({
method: 'POST',
url: 'page1.php',
datatype: 'json',
success: function(data) {
console.log(data);
}
});
}
</script>
</body>
</html>
What should I write to make it works properly?
You can do like this
session_start();
if($_SERVER['REQUEST_METHOD']=='POST' && isset($_POST["submit"])){
$value = 'I am test'; //can be any value
$_SESSION['key'] = $value;
} else if($_SERVER['REQUEST_METHOD']=='POST')){
echo $_SESSION['key'];
}
I'm trying to retrieve json data from local server in my phonegap android app.
I've put a submit input to get data.I am using the method $.ajax in jquery to do that.
My problem is that when i click the submit, nothing is displayed but the page is refreshed.
I don't see how to fix this.
Could you please help me? Thanks in advance.
(ps: the json returned is correct and i've changed the access in config.xml)
Here is the full code :
<!DOCTYPE html>
<html>
<head>
<title>Application test</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#testform').submit(function(){
$('#content').html("<b>Chargement...</b>");
$.ajax({
url: "http://localhost/projects/api/getAllCategorie.php"
}).done(function(data){
$("#content").html('<p> ID: ' + data.categories[0].id + '</p>');
log('erreur');
}).fail(function(){
alert("Erreur!!");
$("#content").html('erreur');
log('erreur');
});
return false;
};
</script>
</head>
<body>
<img src= "css/images/logo-annuaire-mayotte.png">
<ul data-role="listview" data-filter="true" data-filter placeholder="Rechercher..." data-inset="true">
<li>Restaurants</li>
<li>Bâtiments</li>
<li>Numéros utiles</li>
</ul>
<form id='testform'>
<div><input type="submit" id="driver" value="Synchronisation" /></div>
</form>
<div id="content">
</div>
</body>
</html>
If you want to connect to your localhost php file use port number(working for me) or IP address of your actual system like this
http:// localhost:8080/projects/api/getAllCategorie.php,(for emulator)
http:// 10.0.2.2/projects/api/getAllCategorie.php
Close your document ready function
$(document).ready(function(){
$('#driver').click(function(event){
event.preventDefault(); // To prevent default action of the form
$('#content').html("<b>Chargement...</b>");
$.ajax({
url: "http://localhost:8080/projects/api/getAllCategorie.php",
dataType:"json",
beforeSend:function(){
alert("Request is going to send now");// place your loader
},
success:function(data){
$("#content").html('<p> ID: ' + data.categories[0].id + '</p>');
log('erreur');
},
error:function(xhr, status, error){
alert(xhr.responseText);
$("#content").html('erreur');
log('erreur');
}
});
return false;
});
});
HTMl : Replace your form tag with this input tag
<div><input type="button" id="driver" value="Synchronisation" /></div>
I would like to know what can I do to show a list into a html page using jquery.html and $getJson,
I have a server.js running on http:localhost:8080/list and I want to show the list between html tags
the html code
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$.get( "http://localhost:8080/clubs", myCallBack );
</script>
</body>
</html>
The myCallBack is where you define a function which can take the data as a parameter.
$.get("http://localhost:8080/clubs", function (data) {
$("#myDiv").html(data);
});
HTML
<div id="myDiv"></div>
The jQuery Documentation for jQuery.get() includes the following example:
$.get("ajax/test.html", function(data) {
$(".result").html(data);
alert("Load was performed.");
});
I am trying to remove all the links from a parsed site which has then had a div removed and placed in the main code. The problem is that I am trying to remove all the 'href' links in the extracted div but am unable to get anywhere. I have tried using 'CSS' and works but only in chrome and I have to use IE. I have looked at 'php simple html dom' parser to see if i could do it before the file is saved but can't get anything to work. so my last resort is to use 'jquery' but the problem is that the links to remove is being extracted from the file and is not directly in the code. If anyone could help me I would really appreciate it. below is the code I am using.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>example News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://example.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
</body>
Just remove the href attribute from the <a /> tags
$("#postsArea").load( "site/result.htm", function() {
$("#postsArea a").removeAttr("href")
});
If you still want the tags to appear clickable...
$("#postsArea a").removeAttr("href").css("cursor","pointer");
Hope this helps
Try this:
$('document').ready(function () {
$.ajax({
url : 'site/result.htm',
dataType: 'html',
success : function(html){
$html = $(html).find(a).attr("href", "");
$("#postsArea").html($html);
},
error : function(){
$("#postArea").html("<div>No Data Found.</div>");
}
})
});
Here's how I did it:
$(function() {
$('a[href]').each(function() {
var link = jQuery(this);
link.after(jQuery('<span/>').text(link.text()));
link.remove();
});
});
It replaces Foo with <span>Foo</span>.