I got a PHP index document that is loaded when I visit my site, in the address bar it doesnt show the expected www.samplewebpage.com/index.php but it just shows www.samplewebpage.com. I am using background scripts that depend on a extension to that url e.g. www.samplewebpage.com/index.php?page=index but that doesn't really work as expected since there is no /index.php to add that "variable" to.
I have looked around for some time but only found something like how to detect page load and how to change page url, but not them both in one script. I'm not sure if this is mixed Ajax and jQuery since I am not that into those yet but i'd apprechiate some help.
So I want to know how to change the url when the index page loads, I got a script that should work but doesn't.
<script type="text/javascript">
$(document).ready(function (){
history.pushState("", "", "www.mysamplepage.net/index.php/?page=index");
});
</script>
note: the link is not an actual website, its just for demonstrational purposes.
EDIT:
Well to fix the initial problem I just had to add an line before my script:
But how does the pushState work? I want to add "/foler/index.php/?page=index" on page load, Only if there isn't already the index.php there
this test script works fine for me. my assumption is you are not loading jquery:
<html>
<head>
<title>ok</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
test
<script type="text/javascript">
$(document).ready(function (){
history.pushState("", "", "www.mysamplepage.net/index.php/?page=index");
});
</script>
</body>
</html>
Related
I have a file (lam.php) that displays a database-driven list of countries in Latin America. I would like to include it in various pages on my website as a convenient reference. But rather than simply include it, I'd like to use AJAX, so the users can decide whether or not they want to view the list.
So I'm learning how to work with AJAX. It sounds like I want to use jQuery + AJAX, using Post instead of Get.
But I immediately got hung up on an error on this line:
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php",data,callback);
I don't see any errors displayed when I preview the page, but the error is highlighted in Dreamweaver. Nothing happens when I click the button, so there's obviously an error somewhere. Can anyone spot the error(s) in my script?
This is the entire script:
<head>
<script>
$(document).ready(function(){
$("button#lam").click(function()
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php",data,callback);
)
}
)
</script>
</head>
<body>
<button id="lam">Latin America<button>
</body>
You need to add a DIV to the HTML for the result to be displayed in. Then the callback function has to fill in the DIV with the response from the AJAX call.
Since your PHP script doesn't take any parameters, you don't need the data argument.
<head>
<script>
$(document).ready(function(){
$("button#lam").click(function()
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php", function(response) {
$("#lam-result").html(response);
});
});
});
</script>
</head>
<body>
<button id="lam">Latin America<button>
<div id="lam-result"></div>
</body>
I have a problem with colorbox:
I have a page that would receive part of its content by AJAX. Now within that ajax retrieved content there are Colorbox links as well. Now these links don´t work, or rather said the first click would not work (but would lead to the link within the browser except the link within a colorbox), now after having the first click (which would not work as described before), hitting the back button of the browser all further links would display - as wanted - in a colorbox.
I tried several browsers with all having the same result. So I thought - especially since after having gone wrong once then working correctly - this could probably be a problem of having the colorbox library not in the cache.
So I tried to add this line of code (except for being on the main page anyway) within the ajax retrieved content
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
}
</script>
which leads to the error explained above not happening anymore but rather doubling and trippling the colorbox layers so to say, which means, after having hit 2 different colorbox links one would need 2 clicks to close the colorbox, after having hit 3 different colorboxes one would need 3 clicks to close those third colorbox and so on...
As I was asked to do so, here is the relevant code:
Now that is the main page including that:
<script type="text/javascript">var currentTime = '<? print date("F d, Y H:i:s", time())?>';</script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
});
</script>
as well as in the body then that:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
which would create work out good. But if I have the second part, so that one:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
being placed on the same page by AJAX it would not work any more (while having that AJAX is crucial to me).
It could be that you're using a class to select, $(".cbDetails").colorbox(); would apply to all elements with that class and open up a lot of windows as you're describing. Try to target your clicks more specifically with id's or $(this).
$(document).ready(function(){
$(".cbDetails").on("click", function()
{$(this).colorbox();});
});
I am new to jQuery AJAX function. I want to redirect my user to a webpage when he clicks a button. Please do not tell me to target the button to the webpage as I have to do some working in the php file... My current code is :-
TEST.html file :-
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php");
});
});
</script>
</head>
<button>Get External Content</button>
<div id="div1"></div>
</html>
Now my test2.php file is the following :-
<?php header("Location:http://google.com"); ?>
I am a beginner in AJAX jQuery. So, please do not downvote my post although it may sound silly. My code, for obvious reasons is not working. Please help me. Thanks in advance. Any help will be appreciated.
You cant redirect with an AJAX call. You can either create a simple link or link to a PHP page which then redirects the user on. Using AJAX will only let you manipulate this page you are on.
Of course, you can always redirect with simple Javascript as well.
window.location = '/my_url.php';
EDIT: In response to your comment question, what I would do is use the .get() function with the data parameter, check what has been returned from the PHP page if server side validation is required and then if I am happy with the result, redirect.
If no server side validation is needed, there is no need for AJAX.
Look at it this way: AJAX is requesting and reading the .php file. When AJAX sees the header("Location: ...") line, it redirects the AJAX request. Put simply, AJAX can't be used for redirects.
You can use the complete callback to redirect the user after the AJAX query has completed like so:
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php",
complete: function(){
window.location = 'http://new_url';
}
);
});
});
That being said if you just want to redirect a user on a button click there are better ways to do that.
$("#div1").load("test2.php");
appends the contents which are
returned from test2.php , it will not redirect. The test2.php should return a link and populate the div with the link. Then write a callback on ajax success which will
redirect using window.location = target , the target being the link which was dynamically loaded in the div1
I am using an external javascript file to call a function and it will not. i get function not defined in firebug too.
the name of the external js file is getpic.js
in the html, i put this in the header:
<script src="getpic.js" type="text/javascript">
</script>
php:
echo "<button id='sldkfj' onclick='hg();'>sdlkfj</button>";
js:
function hg()
{
alert("hello")
}
the file system is basically in one folder for wamp
this is all of getpic.js
function hg()
{
alert("hello")
}
for the php part
<html>
<head>
<script src="getpic.js" type="text/javascript">
</script>
</head>
<body>
<?php
echo "<button id='sldkfj' onclick='hg();'>sdlkfj</button>";
?>
EDIT-----
i also keep getting this in firebug:
Reload the page to get source for: http://localhost/iframe/getpic.js
Thanks
Edit:
add the code segment to the html page as a
<script type="text/javascript">
function hg()
{
alert("hello");
}
</script>
if still it doesnt work there should be something wrong with the browser.
(disabled java script) try a different browser
if it works,
obviously there's an error in linking the file.
on firebug go to the script panel and see whether it is loaded or not. (you can also use net panel as well)
try linking
<script src="/getpic.js" type="text/javascript">
if you are at the localhost(www) directory or the absolute path
<script src="/mytest/getpic.js" type="text/javascript">
add ; at the end of the alert() command
function hg()
{
alert("hello");
}
Try taking the script tag out of the head element and put it in the body. I've had this problem before and that's what fixed it for me.
I'm trying to get access to a Javascript API, I created, on other sites. The javascript is at https://ksc105.kscserver.com/query.js and it pulls ajax calls to https://ksc105.kscserver.com/suggestions.php (?action=getall). Of course using this on https://ksc105.kscserver.com/index.php works.
However I'm trying to use import that javascript into another domain site. I know cross-domain ajax calls do not work, but I supposed that if the ajax call is made from a javascript on that site that it was going to work. I supposed this based on Google's Map API. I'm pretty sure it uses ajax.
How do I get ajax to work like the Google Map API? Where any website can add my script and use its functions?
In firebug, I get the request to fire but I just get an empty return but it should not be returning empty. In IE9, I get the error "SCRIPT5: Access is denied." / "query.js, line 62 character 5".
If you go to https://ksc105.kscerver.com/index.php and type 3 or more characters in the box you should get "suggestions" much like Google Search. I need the same thing to work on any other website without a server proxy. You can use "Test" as it pulls a bunch of test data.
Try using AJAX callbacks. jQuery does this well but as a raw example, if you load some JSON with a callback function (From a <script> tag) it will run the function. This is how you can use the Twitter API across sites. I.E. if you call http://api.twitter.com/1/statuses/user_timeline.json?screen_name=twitter&count=20&callback=handletwitter and create a handletwitter function:
<script type="text/javascript">
function handletwitter(data){
console.log(data);
}
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=twitter&count=20&callback=handletwitter"></script>
This is also known as JSONP
There's a smart solution to do so. You can have an iFrame of width and height 0, so it won't be visible. From within it, you can load data on main page using 'parent' property. Since you are allowed to load anything in an iFrame, this should be a good solution for you.
Consider the following example (will also work on different domain).
<html>
<head>
<script type="text/javascript">
function loadData(data)
{
var a = document.getElementById("H");
a.innerHTML = data;
}
</script>
</head>
<body>
<div id="H">hello</div>
<iframe src="sample.html" width="0px" height="0px">
</iframe>
</body>
</html>
Sample.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script>
<!--
parent.loadData("I am inside iFrame");
-->
</script>
</body>
</html>