I'm trying to have something like the title of a page generated through PHP. What I have are a few pictures with a title (like Gallery, About, Home, etc.) that get animated onto the page via JQuery. I was wondering if it's possible to determine what picture is animated by looking at the tag. For example, if the title tag reads "Gallery (1-20)", the picture displayed has the text "Gallery" written on it.
I have the picture of the title set as the background of a span that is originally hidden from view.
<ul>
<li><span class="Title" id="AboutTitle"></span></li>
</ul>
When the page loads, this JQuery runs.
<script type="text/javascript">$(function() {$(".Title").stop(true, true).animate({width: 'show'}, 1000);})</script>
I'm wondering if it's possible to do something like this:
<title>Gallery: Pictures 1-20</title>
<ul>
<li><span class="Title" id="*title tag*Title"></span></li>
</ul>
where the PHP looks for the first word in the title and inserts it where the asterisks (*) are.
You could have a hidden form on the page, and when the jquery animates, have it set a value of an input name in the form to whatever's animating. Then, you could have a hidden iframe which posts the form values to PHP to be processed.
in the main page have an iframe
<iframe.....></iframe>
in the iframe have a page with:
<form name="input" action="html_form_action.php" method="post">
<input type="hidden" name="animatedItem" id="animatedItem"></input>
</form>
then from query have it set the value of animatedItem to whatever's being animated and submit the form. As it's all happening in the iframe, it has no effect on the user experience on the current page.
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 main.php file that contains two iframes: test1 and test2
<iframe id="test1" name="test1" src="test1.php" height="300" width="200"></iframe>
<iframe id="test2" name="test2" src="test2.php"></iframe>
The #test1 contains display: none;
I would like to display the content of test1.php when a button at test2.php is clicked. I have tried a number of options and referred to previous posts related to this issue but couldn't load test1.php. How can I accomplish this?
Edit: I'm unsure about what you mean by "load". Is the content of the other div loaded initially, and you're just trying to change its visibility? Or are you trying to change the whole contents of the iframe?
Case 1:
If you're trying to change the visibility of contents that are already loaded in an iframe when you click the button, then check this question:
Javascript - Get element from within an iFrame
Once you access the element you wish, you can easily modify its display attribute
Case 2:
If you're trying to change the whole contents of the iframe when you click the button, you need to change its src attribute. Check this question for an answer:
Changing iframe src with Javascript
use jquery , when a button on test2 is clicked make test1 display block and test2 display none and vice versa
$('#buttontest2').click(function() {
$('#test1').css('display' : 'block');
})
I am trying to submit a form using a hyperlink and it is not posting values onto the next page.Here is my code form:
<?php
$email = array('name'=>'accountno','id'=>'accountno','value'=>set_value('email'));
?>
<form method="post" id = "login_form" action="/salesrep/check" name = "login_form" class="custLogin">
<fieldset style="color: #BD1313; width: 440px;"> <input type="hidden" name="submit_type" id="submit_type" value="account_only">
<br><center><label for="customerNo"><b>Customer No:</b></label>
<? echo form_input($email);?>
Submit<? echo form_input($button);?> </center>
<p> </p>
</fieldset>
</form>
The code on the next page looks like this:
<?
print_array($_POST);
die();
?>
When i use the button here,it posts values to next page successfully.BUT I HAVE not been able to post values using the hyperlink on onclick event. Where i am making mistake??
Why i am getting empty array when i am already inserting value in the text box.?? Or is there any way i could post values using the link and retrieve them in the next page???
The real problem is that you are trying to use a link plus some JavaScript to submit a form in the first place. Don't do this. Buttons inform users that they will submit the form. They will show up in screen readers when they are in forms mode (a link with some JavaScript won't). They "just work".
If you insist on using a link and some JavaScript, then the reason that your code doesn't work is that the JavaScript runs, the form starts to submit, then the link is followed and a GET request is made to the page instead.
Normally you could call preventDefault on the event to stop this, but you are using old style intrinsic event attributes so you need to return false; from there instead.
Recommended reading: Progressive Enhancement and Unobtrusive JavaScript
I have an area on my webpage that is populated by different <div> containers of information. When a link in my navigation bar is pressed, one <div> will fade out and another will fade in. What I'd like to do is have one of these content <div>'s filled with dynamic information, and when a link is pressed on another one of the "pages" it would change which database to load the information from and then display, or fade in, that <div> with the new information.
Sudo:
View information
<div id = "dynamicDiv">
<?php include 'file.php' ?>
</div>
file.php
**Find which database to load information from and display content**
I thought about using $GLOBAL vars, but I'm not sure how to set those from a link, and also it wouldn't reload the div content.
I also considered using a form, but I'm not sure of the "correct" way of doing this would be, and also when the page is reloaded the <div> that is displayed by default would be loaded, not the <div id = "dynamicDiv>
Any suggestions/ideas are very much welcomed....
In this case you should use ajax.
AJAX is used for changing the page content from server without reloading the page.
You can use this JQUERY AJAX And JQUERY LOAD
$(document).ready(function(){
$("#changediv").load("load.php?id=1");
})
in load.php
$id=$_GET['id'];
// use that id for dynamic query in database
$query="SELECT *.....";
$result=mysql_query($query);
echo mysql_fetch_array($result);//somthing like that
All the word echoed in php become response in ajax.
the page url is http://example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>
there are some contents on the page:
<div>price </div>
<div> the content....</div>
if i click the price, the content will be arranged according to the price with ascending.
<div>price </div>
<div> the content....</div>
if i click the price, the content will be arranged according to the price with descending.
now, i want to get when the visitor click the price text, the content arranged can be exchanged. the default state is ascending. and don't refresh the page.
how should i do?
Can use JQuery load to assign the html from the url without reloading the page.
On the click the on the price link you can load the content div.
e.g.
$('#content_div').load($('#a_price').attr('href'));
For html below -
<a id="1d" href="example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>&sort=1d">1d</a>
<a id="1a" href="example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>&sort=1a">1a</a>
<div id="productListing" />
Javascript -
$('#1d, #1a').click(function(event){
// Prevent default link behaviour
event.preventDefault();
// load the div contents from the link
$('#producListing').load(this.attr('href'));
})
Have added the ids to the link. Can be made generic.
Also, the link contents should render partial content only with the results, which you would need to display.