I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.
Related
I am trying to use Backstretch to show photos. The plugin requires this code to correspond with a button to display the photo.
$("#someId").click(function(e) {
e.preventDefault();
$.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
});
I have a dynamic site built with PHP, I can loop through my photos to create the thumbnails and links, but I cant get the values into this code. This jQuery code needs to be looped through with the data from the photo PHP loop.
I tried using a .each() loop to grab the data, but still no luck.
Here is what I have so far
$(".id").each(function(){
var id;
var photo;
$(this).attr('id', function(i, val){
id = '#' + val;
$(".img").each(function(){
$(this).attr('src', function(i, val){
photo = val;
});
});
console.log(id)
console.log(photo)
$(id).click(function(e) {
e.preventDefault();
$.backstretch(photo);
});
});
});
Nothing seems, to work, any help would be appreciated.
HTML
<?php
$category = "urban";
$photos = Photo::find_all_category($category);
?>
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/jquery.backstretch.js"></script>
<div class="row urban">
<div class="col-lg-2">
<div class="row">
<?php foreach($photos as $photo): ?>
<a class="id" id="<?php echo $photo->id; ?>" src="admin/images/<?php echo $photo->filename; ?>"><img class="img-responsive" src="admin/images/<?php echo $photo->filename; ?>" alt=""></a>
<?php endforeach; ?>
</div>
</div>
<div class="col-lg-10">
<div class="backstretch"></div>
</div>
</div>
I changed the format to
$(".id").each(function(){
var id;
var photo;
id = '#' + (this).getAttribute('id');
console.log(id);
photo = (this).getAttribute('src');
console.log(photo);
$(id).click(function(e) {
e.preventDefault();
$(".backstretch").backstretch(photo);
});
});
And also found I was including jQuery twice. Removed it and it works. Thank you!
You can simply target the classname:
$('.id').click(function(ev){
ev.preventDefault();
$(".backstretch").backstretch($(this).attr('src'));
});
I'm trying to refresh this part of the page
<div class="refresh">
<?php
include("message.php");
?>
</div>
with this code :
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#refresh').empty();
$('#refresh').load('message.php');
}, 500);
</script>
Could you help me?
change this
<div class="refresh">
To
<div id="refresh">
because you are using id selector in jquery to load the content.
if you are using $('#refresh') then "#" represents the id, so change this
<div class="refresh">
to
<div id="refresh">
or change this
$('#refresh')
to
$('.refresh').
I'm trying to create a 'print' button to open a new window and display a PHP Variable in it.
The code below is looped through the PHP script as many times as there are tickets, however I can't seem to get the correct number to display when the window opens (the number that displays in the print link is correct - but when the new window is opened it's incorrect).
<script type='text/javascript'>
jQuery(function($) {
$('a.new-window').click(function(){
var recipe = window.open('','PrintWindow','width=600,height=600');
var html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + $('<div />').append($('#ticket').clone()).html() + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
Print <?php echo $EM_Booking->get_spaces() ?>
<div style="display:none;">
<div id="ticket"><?php echo $EM_Booking->get_spaces() ?>
</div>
</div>
why not try something like this:
<a href="#" class="new-window">Print <?php echo $EM_Booking->get_spaces() ?>
<div class="ticket" style="display:none">
<?php echo $EM_Booking->get_spaces() ?>
</div>
</a>
<script>
jQuery(function ($) {
$('a.new-window').click(function () {
var btn = $(this),
ticket = btn.find('.ticket').html(),
recipe = window.open('','PrintWindow','width=600,height=600'),
html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + ticket + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
But much better solution would be to give a button a unique ID, and onclick open an existing (php-generated) page from the server passing that ID, e.g. /getBooking.php?id=123 and that page would output whatever's needed.
This is my test.php page and I am trying to load in << id="new-nav" >> the content of an external page.
The senario is as follows: I want to click the li from my menu which is in the <?php include 'Menu/Side-menu.html.php'; ?> and load the content in the test.php at the << id="new-nav" >> area
<div id="left">
<?php include 'Menu/Side-menu.html.php'; ?>
</div>
<div id="main">
<p>This is a test</p>
<b>see the text:</b>
<ol id="new-nav"></ol>
</div>
<script>
$(document).ready(function(){
$("#test li").click(function (e) {
// Stop the link from changing the page
e.preventDefault();
// Your jQuery code.
$("#new-nav").load(('Menu/Side-menu.html.php').attr("href"));
});
});
</script>
I suggest you to use this solution instead:
$("#test li").click(function (e) {
// Stop the link from changing the page
e.preventDefault();
// Your jQuery code.
$.post('Menu/Side-menu.html.php',function(response) { // (added quotes)
$("#new-nav").html(response);
});
});
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.