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.
Related
I have a "home" page: home.php, that contains a "banner" for my website. On this banner is a box that shows the user a number, (think Facebook notifications..)
The actual page that loads, home.php, is only a placeholder, as most of what happens on the "page" happens in <div> elements that exist inside home.php. When the user takes an action on a page inside a <div> element on home.php, I'd like the "notification" to refresh, but I'm not sure how to do that since home.php is not ever refreshing itself - only the div content is refreshing, (ajax, etc.)
In my home.php, the code to display this is:
<div class="navbar-userData">
<?php
$count = count($_SESSION['cost']);
echo "<img class=\"hoverButton\" id=\"hoverButton\" src=\"../../img/button.png\">";
echo $count;
?>
</div>
The user will take actions that will push an additional item onto the end of $_SESSION['cost'], and when they do that, the the count of $_SESSION['cost'] will increase, but it will not refresh to the user until they refresh the page, (which I don't want.)
Is there a way for me to trigger this bit of code to auto-refresh, or use jquery in my ajax success call to reload <div class="navbar-userData">?
Through php i want to redirect the user to specific location :
header('Location:http://localhost/diplomska/#more')
and the url in the browser after redirect is :
http://localhost/diplomska/#more
But it still points to the home page. Even if i manualy write it in the browser, it is still the same. However, if i click the navigation link that go to the page #more , it works.
I have added data-url attribute, but still the same . Code in addition:
<div id = "more" data-role="page" data-url="http://localhost/diplomska/#more"data-title="More about you" >
And the link that work when i click on it is :
<a id="more" href="#more"
data-transation="slidedown"
data-role="button"
data-icon="arrow-d"
data-mini="true"
data-iconpos="top"
>More</a>
You can't have more than one element with a given id on a page. Remove the id from your anchor, it's href attribute references the div you want to jump to.
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.
I have a little problem with display data queried from mysql database table
the data obtained is 3d array and I would like to use it in a javascript function
Usually, data in cake php is displayed in a ctp page whose file name(excluding the extension) is the same as the controller function's.
I would normally call that page if I click on a link in the current page as
<a href='../nextpage'>Next page</a>
or
<input type='button' onclick='../nextpage'>
'nextpage' is a ctp page (nextpage.ctp) as well as a controller function name
My problem is like this
database data queried ---sent to---> current page (having a link/button)---click to open ---->nextpage
next page will again display some data queried from the database. I sure can make nextpage as a new ctp page but I would like to make nextpage as an overlay page (a popup that grays out its parent once it shows up).
Is there any to accomplish this ?
You could have an HTML link with the following markup:
Next page
which will trigger a javascript function defined as
<script>
function someJavascriptFunction(){
//do something here
}
</script>
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.