I am attempting to display a confirmation box, using Jquery, after a user has clicked a delete link. When the delete link is clicked it sends the post_id to the url. As long as this is set and it isn't empty I trigger the animation which will display the hidden confirmation box.
This is what I have so far which isn't currenlty working:
// if admin wants to delete a post check for post_id
if(isset($_GET['post_id']) && !empty($_GET['post_id'])){
$delete_id = (int)$_GET['post_id'];
$animate = true;
echo '<script type="text/javascript">';
echo 'var animate = '.$animate;
echo '</script>';
}
The GET variable is set correctly.
In my jquery file I have:
$(document).ready(function(){
if(animate == true){
$("#delete_confirm").fadeIn('3000','swing');
}
});
and the confirmatino box:
<div id="delete_confirm">
<p>Please confirm you want to delete this post.</p>
<input type="button" id="delete" name="delete" value="confirm" />
</div>
Which has display:none; set in the style sheet.
Why does it not display when the animate variable is set to true?
Thanks
UPDATE:
Try this, tested and working:
<?php
if(isset($_GET['post_id']) && !empty($_GET['post_id'])){
$delete_id = (int)$_GET['post_id'];
$animate = true;
}
?>
<html>
<head>
<title>Simulation</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var prop = {
animate: "<?php echo $animate; ?>"
};
$(document).ready(function(){
if(prop.animate == 1){
$("#delete_confirm").fadeIn('3000','swing');
}
});
</script>
<body>
<div id="delete_confirm">
<p>Please confirm you want to delete this post.</p>
<input type="button" id="delete" name="delete" value="confirm" />
</div>
</body>
</html>
You should unset the display:none; property on the div and either call .fadeOut(0) on page load, or set its opacity:0.0; in the CSS file.
Additionally, instead of including all of this server side code injection stuff, you could handle the GET parameter check on the client side by using the window.location object's search property, then detect if a particular parameter is set with a regex match. That way you don't have to use any inline JavaScript.
var matches = window.location.search.match(/post_id/g);
if(matches && matches.length > 0)
{
// do animation
} else {
// do something else
}
Something like this should work, and personally I like doing this more than injecting script tags and inline JavaScript.
The php checks is the GET variable is set, if it is it sets $animate
to true. After this the Jquery does the check on the animate variable,
if its set to true then the fadein should happen.
For me this is very confusing. Let me try to research this a little bit more.
You have a page with the confirmation box.
When user press delete button the confirmation box (<div id="delete_confirm">) is show using jQuery script.
User press the 'delete' button on the page. What happens here? There are two options:
You do AJAX request.
You do HTTP GET request.
Based on your comments and the code I can guess that you do HTTP GET request. In this case you reload the page. Yes, PHP gets the proper value in $_GET['post_id'] and the post gets deleted.
But you get completely new HTML page. And on this page the div <div id="delete_confirm"> is invisible from the very beginning. This is why it is not shown and hidden.
When you look at the source code you can find you JS script <script type="text/javascript">... and I beg that the code $(document).ready(function(){... works too. But you get it on newly loaded HTML page.
Please correct me if I get you wrong here.
I think that you want to hide the confirmation box you might want to use AJAX. But then you might also want to remove the post from the page by altering the page.
Quoting the jQuery documentation: "The .fadeIn() method animates the opacity of the matched elements."
What .fadeIn() will do, effectively, is change the css opacity of an element from 0 to 1.
You've stated that in the CSS your element has display: none; so all you're actually doing is changing the opacity from 1 (as assuming you've not set that in the CSS) to 1 whilst leaving the display set to none ... so it'll never be displayed.
This seems to hold true for .animate() which doesn't allow you to "animate" the display type (from "none" to "block" - you'd use opacity)... but not for .fadeIn() / .fadeOut() which do allow you to fade a block in/out using the CSS display property.
My bad, I was confusing the two.
Related
I have used a form to submit an image id to the another page. I have done this rather than r than via url because it makes the url cleaner. However, when the user now reloads, it asks if they want to submit the form again. The won't know they have submitted a form, as far as they are aware they have simply clicked an image and been brought to a page that displays that image bigger.
Is there any way around this, that saves the image id the hidden form field has sent via the form, yet refreshes the page for the user?
HTML
<a class="gallery-img span4 js-img-submit" href="#">
<img src="img.jpg"/>
<form action="/image" method="post">
<input type="hidden" value="<?=$img['id']; ?>" name="image_id"/>
</form>
</a>
JQUERY
$('.js-img-submit').click(function(){
$(this).find('form').submit();
})
PHP
$image_id = isset($_POST['image_id']) ? $_POST['image_id'] : false;
Somehow the parameter needs to be send to the image page.
GET: You dont want that.
POST: You use that, but causes the refresh problem.
SESSION: Will be hidden, but cause troubles, when he opens multiple images, and then refreshing the first page.
So, i would to the following:
Use the hashtag, and load the image via javascript then. finally remove the hashtag:
MainPage:
<a class="gallery-img span4 js-img-submit" href="/image#<?=$img['id']; ?>">
<img src="img.jpg"/>
</a>
ImagePage:
<script language="javascript">
$(document).ready(function(){
var imgid = document.location.hash.slice(1);
document.location.hash = ""; //Remove
loadImage(imgid);
})
</script>
loadImage then needs to be the required javascript function.
The user might notice it for a split second. IF the user is not allowed to see, then your only way would be to use the PHP Session with seperate variables for every opened image-window.
You can do something like this:
$('.js-img-submit').click(function()
{
$.post("image.php", {id: $(this).find('input').val()});
})
I have a form which uses the target attribute to target an iframe when the form is posted which posts to a PHP script. This part is working fine but I need to do something based on several results that the php script will put in the iframe.
What I am thinking of doing is when the PHP script has finished posting it echo's out some hidden input fields that contain various elements, such as the state of the post, whether it succeeded and what the final result was if it was successfully posted.
However, if I did this it would put it into the iframe so then the main web page wouldn't be able to access the hidden input fields.
How would the main web page be able to access these hidden input fields so that the main web page can perform some action, I.e. make a div within the web page show a specific error message or whatever.
The other thing is, once I know how I can get the data from the hidden input field, how would I know when I can go and get the values. I was thinking that when the form is posted via a JavaScript document.forms["myform"].submit() code I could then do a while loop and check to see if another hidden input field status is set to complete and once it says complete I can then get the values from the hidden input field.
I'm not sure if the way I suggested is the right way or doing what I want to achieve or if there is a better way of doing it.
UPDATE
I've tried what #lanzz suggested but it doesn't appear to have worked. Below is what I have tried.
$("iframe#image_upload_frame").on('load', function()
{
var iframeBody = this.contentDocument.body;
var data = $(iframeBody).find("#imageDirectory");
alert("data: " + data);
});
Below is how the iframe is defined
<iframe id="image_upload_frame" name="image_upload_frame"></iframe>
and I am echoing out a hidden input field in the php script that's within the iframe.
echo '<input type="hidden" id="imageDirectory" value="'.$imageDirectory.'" />';
The echo is definetly working as when I see view the iframe source I can see the hidden input however, the alert dialog is never shown as if something isn't working. There are no errors being reported either by the google chrome dev console.
If I understand correctly - you need a value from the iframe in the parent window, once the value is loaded into the iframe. I would add javascript to the iframe calling the parent and executing a function.
In the main frame:
function incomingValue(val) {
alert(val)
}
and somewhere in the generated iframe:
<script type="text/javascript">
parent.incomingValue("Hello world");
</script>
This should work assuming both frame sources share the same domain.
You can use postMessage for cross document communication between an iframe and it's parent.
See:
http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes
http://javascript.info/tutorial/cross-window-messaging-with-postmessage
Since you're running on the same domain, your main page's Javascript will have no trouble to access the contents of the <iframe> (example uses jQuery, you could rewrite into whatever libs you plan to use):
$('iframe#the-id-of-the-iframe').on('load', function() {
var iframeWin = this.contentWindow;
var iframeBody = this.contentDocument.body;
// access global JS vars defined in the iframe:
var someIframeVariable = iframeWin.globalIframeVariable;
// or, directly access elements in the iframe:
var someIframeElement = $(iframeBody).find('#element-id-inside-iframe');
});
A while ago I wrote a piece of code to upload a picture using some javascript and two iframes. The most important thing for me was to preview the pic. Maybe it will help you:
HTML:
<div id='fakebutton' onclick='select_pic()'>Just a button to select a pic</div>
<iframe src='uploadform.php' name'pic_frame'></iframe>
<iframe src='#' name='target_frame'></iframe>
both the iframes are hidden. The targetframe has no source (or an empty page, if you want to).
uploadform.php contains a form:
<form id='upload_form' action='dosomething.php' method='post' enctype='multipart/form-data' target='target_frame' onsubmit=''>
<input id='realfoto' name='realfoto' type='file' onchange='parent.foto_upload(window.frameElement.id)'>
</form>
and then some javascript:
First of all something to trigger the filebrowser when the user clicks the fake
function select_pic(){
b=window.frames['pic_frame'];
b.document.upload_form.realfoto.click();
}
And then a part to actually upload the pic, triggered by the onchange() in the input element:
function foto_upload(o){
var b=o;
o=getElementById(o);
if(o.contentDocument ) {o = o.contentDocument;}
else if(o.contentWindow ){o = o.contentWindow;}
else{return false;}
if(test_pic(o,b)){ //test if it is really a pic
getObj('foto_tmpdir').value=o.getElementById('tmp_dir').value;
o.getElementById('doctype_nr').value=b;
o.fotoform.submit();
}
else{
return false;}
}
In dosomething.php I perform actions on the uploaded pic (rename, resize etc). And it contains a few lines of javascript:
$a = 'upload was succes';
$b = 'my_image_name';
$c = 'whatever you want to put here';
?>
<script type="text/javascript">
window.top.window.smurf(<?php echo "'$a','$b','$c'" ?>);</script>
<?php
if you create in javascripty a function named smurf(a,b,c) you can pass along whatever you want form the php-script. One of the most important things for me was that I now can pass the filename of the uploaded pic to javascript, and use it to change an image.src for a preview.
Hope you can use something of it.
Your iframe source page should has a javascript call function instead of the hidden field. The function will call the opener window (your main page) and then it do any functionality you want. As blue print look at the following:
//in iframe src.php
<?php
if ($something){
?>
<script>
function doSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doSomethingWithOpenerWindow()
</script>
<?php
}
else{
?>
<script>
function doAnotherSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doAnotherSomethingWithOpenerWindow()
</script>
<?php
}
?>
I am not sure if what I am trying to do is possible but here it is.
I have a header, inside that header is a php include for "login.php"
On "login.php" is a link that takes the user to "forgot.php".
What I would like to do is, instead of the user being taken to "forgot.php" is to just refresh the page with "login.php" include replaced with "forgot.php" or do some sort of content switch out, sort of like using an Iframe.
I dont want to bring the user to a new page, I just want to switch out the content displayed inside my header.
Thanks for any help you can provide, code samples appreciated.
If you are trying to accomplish this without reloading the page you will need to use AJAX.
If you want to just keep the login.php you can perhaps do something like:
link
with php something like
<?
if ( isset($_GET['p']) && $_GET['p']=="forgot") {
include('forgot.php');
} else {
include('login.php');
}
PHP is parsed in it's entirety before the page is displayed in a user's browser, therefore, things such as onclick() or onsubmit() that are featured in JavaScript (a client-side language) are not available in PHP.
There would be a few solutions possible:
1) Use AJAX to submit a query to the server and replace the HTML content on the page with the result.
2) As you mentioned, use iFrames.
3) Have a hidden <div> on your login.php page that contains the HTML for forgot.php, and use a simple JavaScript onclick() method to swap the page contents. In this case, both "pages" would actually all be in the same file of login.php.
I can think of two things:
What I would do, assuming that the differences between your login.php and forgot.php aren't too different because you don't to change the page, is to put the html for the forgot.php just below the html for the login.php and hide the login.php html and show the forgot.php content.
example:
<div id = "login">
<!-- Login HTML -->
</div>
<div id = "forgot" style = "display:none" >
<!-- forgot password HTML -->
</div>
<input type="button" value="Forgot Password?" onclick="forgot()" />
Javascript:
function forgot(){
document.getElementById('login').style.display='none';
document.getElementById('forgot').style.display='block';
}
Otherwise, you could use an ajax call to the page and insert the necessary elements. This would create a noticeable pause.
You can't change the include statement from javascript because the script was already executed by the time you see your page in the browser.
Use ajax to dinamically change the content of the page without refreshing.
If you're using jquery the code would be pretty simple:
<script type="text/javascript">
$(document).ready(function() {
$('#link').click(function() {
$.get('script.php', function(data) {
$('#divOfContainer').html(data);
});
});
});
</script>
<div id="divOfContainer"><!-- the content to be fetched with ajax will be put here --></div>
Link
I am trying to create a list of links that would make up the elements of a form (will be used as a search feature).
Basically, each link in the list represents a search category, so as users click on a link, their search results will be filtered.
I would need a category value to be able to be passed whenever someone clicks on one of those category links, and also have each link act as the form submit as well. Is that possible?
(There may be easier ways to accomplish this, however with the CMS and search module I'm using, this will have to do.)
Are you trying to pass values via both POST and GET? I am not sure that that would work. Why not just used hidden form fields? In your form, add a number of <input type="hidden" name="foo" value="bar"> and each one of them will be passed back to the server along with all the regular form fields.
Note: Hidden form fields can be read and edited by a sufficiently tech savy user (it is not too hard), but this would be the case with any variables that you are passing between the server and client, even cookies.
If you give the links an internal data-category attribute like this:
Foo
then you can do with jQuery:
$('a[data-category]').click(function() {
filterResults($(this).data('category')); // call the function that filters
// results according to chosen
// category
$('#theform').submit();
}
You can do something along the lines of...
Puma
and use the a script like...
$('a.category').click(function(e) {
$('#someForm input[name=category]').val( $(this).text() );
$('#someForm').submit();
});`
I'm not 100% sure what you intend to do with the data from the link, or even which part of it you need, but I hope this helps.
<form name="myForm">
link
</form>
<script>
function submitMyForm(link){
var mylinkText = link.text;
var myLinkHref = link.href;
document.myForm.submit();
}
</script>
If you need the link clicked to come across as part of your form data, perhaps you could put it in a hidden field on the form... something like:
document.myForm.myHiddenLinkField.value = mylinkText;
Since the jQuery tag has been removed, here's an example of doing this form submit with pure javascript:
http://www.neubreed.com.au/blog/2010/07/submit_form_anchor_tag_using_javascript_and_supply_action
You can create an extra hidden input like in the example to set your category:
function submitForm(id, category){
var myform = document.getElementById(id);
if (document.createElement) {
input = document.createElement('input');
input.type = 'hidden';
input.name = 'category';
input.value = category;
myform.appendChild(input);
}
myform.submit();
return false;
}
Then, in your form:
click
You could work with a hidden field.
<form id="cuteform" action="thedestiny.php">
<input type="hidden" id="filter"/>
</form>
<a onclick="javascript:linkaction(this);" id="linkA">blablabla</a>
<a onclick="javascript:linkaction(this);" id="linkB">blablabla</a>
<script>
function linkaction(link) {
// get the field
var f = document.getElementById("filter");
// then you could use some of the link element's property like id or innerHTML
f.value = link.id;
// or you could use a switch structure
switch (link.id) {
case "linkA": f.value = "the huge filter string"; break;
case "linkB": f.value = "another stuff"; break;
}
// submit the form
document.getElementById("cuteform").submit();
}
</script>
I'd be inclined to style an actual form button as a link using CSS.
So essentially for each "link":
<form method="get">
<input type="submit" class="form-link">
</form>
For the CSS (off the top of my head) something like this should do it:
.form-link {
background-color: transparent;
border: none;
text-decoration: underline;
color: #00f;
}
That way it isn't dependent on JavaScript to work and users without it will still be able to make use of your site. Additionally, inline event handlers (onclick) etc shouldn't be used as they mix semantics with behaviour. If the functionality isn't core to the experience and (perhaps therefore doesn't require a base non-JavaScript version) then write the links into the page with JavaScript from an external JavaScript include. You won't then have a bunch of dead links in the page for users that visit your site with JavaScript disabled or from a non-JavaScript capable device.
I want to display a data table when i click a button in the same php page. The button is used in a form with other inputs such as some text. The data table is hide by default. And it get the values from the form, and then make a query in database and display them in it.
How can i achieve the function of display/hide ?
Do you have any solutions?
Thanks.
its a simple ajax issue, you can use any popular java script library to achieve this functionality to perform ajax calls and show/hide table.
for example, you can use jquery's ajax functionality to get the data from the server and then
use jquery's built in effects to show the table enclosed in div. For example, to display the content in the div 'mydiv', simply write
$("#mydiv").show(); And to hide the content, write $("#mydiv").hide();
If you're okay with using Javascript, give your table tag an id attribute. Then, have an onclick event on the button that alters the CSS of the table to be display:none. Alter the Javascript of the button so that the next time it is clicked, it toggles the table CSS to be display:table. You could also use a Javascript library, such as Prototype, to do this.
<table id="myTable">
</table>
<input id="toggleButton" type="button" onclick="hideTable(true);" value="Toggle Table" />
And the Javascript might be:
function toggleDisplay(var hide) {
if (hide) {
document.getElementById('myTable').style.display = "none";
document.getElementById('toggleButton').onclick = hideTable(false);
} else {
document.getElementById('myTable').style.display = "table";
document.getElementById('toggleButton').onclick = hideTable(true);
}
}
Take that Javascript with a grain of salt; I haven't written any in a while.
If you don't want to use Javascript, then have the button submit a regular HTML form. Pass along in the form some input name such as hide_table with a value of true. On the server, if $_POST['hide_table'] == "true", don't allow the table to be output as HTML to the page. Also, toggle the form such that clicking the button will submit hide_table with a value of false.
<form method="post" action="the_same_page.php">
<input type="hidden" name="hide_table" value="<?php echo $_POST['hide_table'] == "true" ?>" />
<input type="button" value="Toggle Table" />
</form>
<?php if ($_POST['hide_table'] != "true") { ?>
<table>
</table>
<?php } ?>
If you wanted to use AJAX to only load the table content when the user decides to show it, it would be nice to make this degrade gracefully. If a user doesn't have Javascript enabled, the form should actually submit to the server and reload the page, toggling the table display. However, if the user does have Javascript enabled, an AJAX call could be made, load the table, and display it in-place.
Assuming that you want to do this client side (ie all data is sent to the client on page load) all you need to do is something thusly: (done with prototype for brevity)
...
<input type="button" id="showTableBtn" value="Show Table">
<table id="dataTable">
...
</table>
<script type="text/javascript">
<!--
Event.observe($("showTableBtn"), "click", toggleTable);
function toggleTable() {
if ($("showTableBtn").value == "Show Table") {
$("dataTable").show();
$("showTableBtn").value = "Hide Table";
} else {
$("dataTable").hide();
$("showTableBtn").value = "Show Table");
}
}
//-->
</script>
...