My problem seems pretty easy but I'm kinda new to web programming, so here it is :
I want my button to refresh the page, pass some GET parameters to trigger a PHP action and I don't want the screen to scroll on top of the page.
What I'm using at the moment is a mix of ajax and javascript, it does what I want but it's not reliable. Here's what I remember of the code (I don't have the code at hand)
<?php
echo '
<span href="$.ajax(\''.$_SERVER['PHP_SELF'].'?do=dosomestuff\'); setTimeout(function(){windows.location.reload()},100);)> ... </span>';
?>
I have three issues with this implementation :
I feel it's overkill to use ajax when a href would maybe do the job
A friend of mine tested it and he got the firefox pop up ("To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier") everytime he hits the button. I read it comes from POST data passing, but I only use GET data.
On some computers, the button doesn't work everytime. It's random, maybe the delay is not big enough. How big can the delay be so that I'm 100% positive it will work everytime but at the same time it's not noticeable for the user ?
Thank you for your help and advices !
Edit : following Tularis' advice, here's the code I came up with, but I can't manage to make it work
<?php
if (isset($_GET['do']) and $_GET['do'] == 'swap')
{
rename('img1.jpg', 'img3.jpg');
rename('img2.jpg', 'img1.jpg');
rename('img3.jpg', 'img2.jpg');
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#spanLink").click(function() {
$.ajax('<?php echo $_SERVER['PHP_SELF'];?>?do=swap');
});
});
</script>
</head><body>
<img src="img1.jpg" width="300" height="300" alt="cat">
<img src="img2.jpg" width="300" height="300" alt="dog">
<span style="cursor:hand;" id="spanLink">Some text to click</span>
</body></html>
First of all, don't combine html-links with javascript inside them. That's bad form (and leads to exactly the problem you're having). Instead I suggest using jQuery and linking the onClick event handler to the span element like so:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$.('#spanLink').click(function() {
$.ajax('<?php echo $_SERVER['PHP_SELF'];?>?do=somestuff');
});
});
</script>
</head><body>
<span id="spanLink">Some text to click</span>
</body></html>
I suggest you to use ajax and jQuery where you can easily get the new content and update it anywhere you want in page without reloading the complete page.
Related
Say I have a string defined in php
<php?
$string="value";
?>
How do I pop up the content of $string in a new small window by clicking a button?
Add the following lines:
<?php
$string="value";
$link = "<button onclick='window.open(url?str=$string)'></button>
echo $link;
?>
In the specified url may be php file - write code like:
echo $_GET['str'];
Popup windows should be considered deprecated because most browsers have them disabled by default. If your purpose is only to display a particular string, it would be much better to store it in your page's Javascript and use a modal instead.
If you must do it with PHP alone, then have another page (string.php or something), store the string there, and link to it from the button. There's no way to redirect to a page/location that doesn't exist, unless you are using Javascript.
How to do it with Javascript: The easiest way for someone who doesn't know JS would be to use jQuery, which is a library that makes a lot of functions available, and has a huge number of plugins written for it. I just did a search for "simplest jquery modal plugin" and found this. There's also a page with example code. Basically, you would need to include the jquery library, and this jquery modal plugin, like so:
<!DOCTYPE html>
<html>
<head>
<!--add jQuery:-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- save the modal script on your server and link to it -->
<script src="/path/to/jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- all your page code -->
<div id="ex1" style="display:none;">
<p><?php echo $string?></p>
</div>
<!-- Button / link to open the modal -->
<button>View String</button>
</body>
</html>
You can see the modal at work here: http://kylefox.ca/jquery-modal/examples/index.html
1) Here is what works just fine:
SearchTool.aspx (in the code snippet below) is a 3rd party product that will actually insert an iframe into the page at page load time with the search tool inside of it.
<html>
<head>....</head>
<body>
...
...
<h2>Search Tool</h2>
<script type='' src='http://foo.com/SearchTool.aspx</script>
...
</body>
</html>
2) Here is what I want to do:
I want my page to load quickly without the search tool being loaded at the same time. The user can read through my page and then, if they want, they can click on a button to load the search tool thereby delaying the tool load time to when they want it.
I want to be able to invoke the SearchTool.aspx from the click of a button as below, but I don't know what the code would look like in the showSearch() function below:
<h2>Search Tool</h2>
<script type='text/javascript'>
function showSearch(){
**** What would go here? *****
}
</script>
<input .....="" onclick="showSearch();"></input>
3) I have already explored creating the iframe manually:
In the code snippet #1 above that works just fine, if I do a view source and then create an iframe exactly like they do with all of the same properties, the Search Tool doesn't completely work properly. Weird I know, but true. So this is NOT an option.
Wrap your script tag in a div with the style display:none to hide it:
<h2>Search Tool</h2>
<div id="searchTool" style="display:none">
<script type='' src='http://foo.com/SearchTool.aspx</script>
</div>
...
Then, in your function, just show it :
function showSearch(){
document.getElementById("searchTool").style.display = 'block';
}
I don't know if this is possible or allowed, but basically I want to go to http://www.nfl.com/scores and get the scores for a particular week. It seems like each game has a certain class and I could the scores and team easily if I can access their html. I think I need to use AJAX or JSON or some combination. Thanks!
UPDATE:
proxy.php
<html>
<head>
</head>
<body>
<?php
$url = "http://www.nfl.com/scores/2012/PRE1http://www.nfl.com/scores/2012/PRE1";
$htm = file_get_contents($url);
echo $htm;
?>
</body>
</html>
nflScores.php
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<p></p>
<script type="text/javascript">
$.get("proxy.php", function(response) {
alert(response) });
</script>
</body>
</html>
It seems that my alert box is filled with tons of html. Can I use some sort of .getElementByID() method to find certain elements?
Thanks
This is not possible due to XHR's same-origin policy.
Check if NFL has an API you can use to get the scores. Look at this question. Doesn't look like they have an API released, but you may be able to gather the information anyway.
Write your server-side (PHP?) script, download nhl.com site, parse html, send to javascript using json or print it directly on your website.
However, i think nfl.com won't be happy about it.
Either way, the laws around "screen scraping" are pretty grey.
I'd like to JavaScript, or JQuery (or any plug in actually) to force the browser to load a specific page when the back button is clicked.
Basically insert a page into the browser's history.
I've found a way of doing it below, but it seems long winded. Am I missing something?
<html>
<head>
<title>Back button test</title>
</head>
<body>
<script type="text/javascript">
window.history.pushState('other.html', 'Other Page', 'other.html');
window.history.pushState('initial.html', 'Initial Page', 'initial.html');
</script>
Initial page <br />
<script type="text/javascript">
window.addEventListener("popstate", function(e) {
if(document.URL.indexOf("other.html") >= 0){
document.location.href = document.location;
}
});
</script>
</body>
</html>
In general, you can't modify the history of a browser, this is a major security feature. If you've found a way around it, that might work well for you, but keep in mind it might upset people. I know if I was on a site that hijacked the back button, I wouldn't be back. Instead, use better UX to give the user links.
On my site a number of operations can take a long time to complete.
When I know a page will take a while to load, I would like to display a progress indicator while the page is loading.
Ideally I would like to say something along the lines of:
$("#dialog").show("progress.php");
and have that overlay on top of the page that is being loaded (disappearing after the operation is completed).
Coding the progress bar and displaying progress is not an issue, the issue is getting a progress indicator to pop up WHILE the page is being loaded. I have been trying to use JQuery's dialogs for this but they only appear after the page is already loaded.
This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.
Here's simple example to illustrate the problem. The code below fails to display the dialog box before the 20 second pause is up. I have tried in Chrome and Firefox.
In fact I don't even see the "Please Wait..." text.
Here's the code I am using:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
</head>
<body>
<div id="please-wait">My Dialog</div>
<script type="text/javascript">
$("#please-wait").dialog();
</script>
<?php
flush();
echo "Waiting...";
sleep(20);
?>
</body>
</html>
You'll need to run that piece of code immediately after your <body> tag, something like:
<html>
<head>
</head>
<body>
<div id="please-wait"></div>
<script type="text/javascript">
// Use your favourite dialog plugin here.
$("#please-wait").dialog();
</script>
....
</body>
</html>
Note I omitted the traditional $(function (){}) because you need this to be loaded as soon as the page is shown, not after the whole DOM is loaded.
I've done this before and works great, even if the page has not finished loading yet.
EDIT: you'll have to be certain the jQuery dialog plugin you're using is loading before your entire DOM loads. Usually this is not the case, you it won't work. In that case, you'll need to use a g'old plain JavaScript solution, such as Lightbox 1 or Lightbox 2.