I am trying to display some info when a user clicks on an image. Here is the image tag
<img src="<? echo $list[image]; ?>" onclick="showUser(<?php echo $list['id']; ?>)">
I am directly using the example from w3schools. Here is the link
Is there something i am doing wrong? When I click the image nothing happens.
I don't recommend using that GET method, it would be better to use a load method instead because you would have less code to work with and in my opinion it would make things easier. Now here's how I would do it.
Assuming you got that code from there, this is what you can do:
<script type="text/javascript">
ShowUser(str) {$(function) {
$('#loadhere').load("thepagetoloadfrom.php?q="+str);
}};
</script>
#loadhere is where you want to load the output from the load().
This is much shorter and easier to understand I believe.
I figured out the problem myself. In my showUsers function when I call xmlHttp.open I had the path to my file wrong. Thanks anyway
Related
First, I want to apologize if this is somewhere else. I'm looking for something simple. I have a PHP script that uses glob to retrieve a list of files from a directory. The directory is determined by a request sent though the address bar. ie. http://somewebsite.com/?loc=mydirectory
I'm looking for a way to create a button that you can click on and the file list will display without refreshing the page.
Here is the PHP code.
<?php
$BaseLoc='./';
$SecLoc='archives';
$FullLoc=$BaseLoc.$SecLoc.'/';
$loc=$_GET["loc"];
parse_str($_SERVER['QUERY_STRING'], $urlparams);
$GFloc=$urlparams['loc'];
function DirList() {
global $FullLoc;
$DirList=glob($FullLoc.'*',GLOB_ONLYDIR);
foreach ($DirList as $dirlist) {
$edl=explode ('/',$dirlist);
$dirlist=end($edl);
echo '<li>'.$dirlist.'</li>';
}
}
function ListFiles($GFloc){
global $FullLoc,$GFloc;
$FileLoc=$FullLoc.$GFloc;
$FileList=glob($FileLoc.'/*');
foreach ($FileList as $filelist) {
echo $filelist.' - '.$GFloc.'<br />';
}
}
?>
keep in mind that this is a test project for the purposes of getting a handle on how to do this type of AJAX. I know there is some Jquery with .get and I could have sworn I'd done this before but for the life of me I just can't seem to wrap my head around it. I know it's got to be something simple with a button click and then write the result into a div. Any help would be appreciated or even a link to an answer that I missed.
Thanks.
I'm editing this on 1-28-2017 to try and clarify what I'm attempting to do.
With the current php code above. When this .php page is visited it generates a list of sub-folders inside a folder and turns that list into clickable links. Inside each of those sub-folders is a group of media files. Currently if I click on one of the now generated sub-folder links. The entire page refreshes and I get a display of all the files inside that sub-folder. This is done by using php get and a variable inside the url. The only thing I 'm trying to change is that I get the same result, without refreshing the page. If you want to see an example of this functionality as it currently is, you can go to my test page. http://testbed.myreth024.tk/ajax/ I keep thinking it's something simple with the jquery .get. I just can't seem to find a good example of how to pass those url parameters through. Anyway. Thanks again for all the responses.
<button type="button">Click Me</button>
<div id="iamdiv"></div>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){ //you can use class(with .yourclass) or id(with #yourid) instead of button if you need to be.
$.ajax({
type: 'POST',
url: 'script.php',
success: function(data) {
alert(data);
$("#iamdiv").html(data);
}
});
});
});
</script>
In script.php
<?php
echo "You win";
?>
I hope that helps cheers!
I want to thank everyone for their time and input. I want to point out that I feel as programmers we have a tendency to over-complicate things. Eventually I arrived at a solution to this question. It's entirely possible I didn't ask the question as clearly as I could have. Before I post the code let me walk through the basics of what occurs. Hopefully this will help someone else who is looking for a similar solution.
The index page opens and the php code executes and generates a directory listing. Each of the directory names is clickable through javascript. When a directory is clicked, the space below the directory listings displays a list of files in that directory.
Here is the index file:
<style>.menu{cursor:pointer;padding:1%;float:left;}</style>
<?php
$loc=$_GET["loc"];
function DirList() {
global $loc;
$dlist=glob("./files/*",GLOB_ONLYDIR);
$dend=$dlist[0];
$dende=explode ('/',$dend);
$default=end($dende);
foreach ($dlist as $Dlist) {
$edl=explode ('/',$Dlist);
$DList=end($edl);
echo '<div class="menu" id="'.$DList.'">'.$DList.'</div> ';
}
if(!$loc){header("Location: ?loc=".$default);}
}
?>
<p></p>
<div><?php DirList();?></div>
<div><div id="flist" style="clear:both;border:1px solid black;min-height:25px;"></div></div>
<p></p>
<script type="text/javascript">
$(".menu").click(function() {
var dloc=this.id;
$.get("file-list.php?loc="+dloc,function(data) {
$("#flist").html(data);
});
});
</script>
Then I have a file-list.php for the purposes of generating the list of files.
<?php
function FileList() {
$loc=$_GET["loc"];
$dloc = "./files/".$loc.'/';
$flist=glob($dloc.'*');
foreach ($flist as $fList)
{
$efl=explode ('/',$fList);
$FList=end($efl);
echo '<div style="padding:1%;width:45%;margin:0px auto;">'.$FList.'</div>';
}
}
FileList();
?>
Ultimately what I was missing was how I could take the data and put it into a div. When creating my links, I used the css id to store the directory name as well. This allowed me to reference it more easily in the code. Ultimately it was essentially about retrieving the "data" from the file-list.php and then simply writing that "data" into the div with the jquery .html. It ended up being a simple .get command which if I understand it, is a jquery ajax solution. If anyone has any questions or comments on how I could have asked the question better or ways to improve the code, feel free to let me know. I'm still learning some of this and I'm always open for improvement.
I have created a form to upload a a newsletter into the database. I'm using the iFrame method to post the date without the page refresh and I'm displaying a nice jQuery dialog for the loading.
I am now having issues with closing that dialog when the upload is complete. All the tutorials I have read online say that I must just echo out the code like this:
<?php
echo "<script type='text/javascript>uploadComplete();</script>";
?>
Now the JavaScript does run when I do something stupid to test like just echo out an alert, but when I try and call any function or just go straight to the jQuery to close the dialog it just says that the function is not defined. I can post my code if it is necessary, but it's pretty standard and I didn't think I would need to in this kind of example.
Any help would be appreciated! Thanks in advance.
you forgot ' in the end of 'text/javascript'
echo "<script type='text/javascript'>uploadComplete();</script>";
NB : the type attribute is entirely unnecessary if the script is JavaScript
using just php
echo '<script type="text/javascript">'
, 'jsfunction();'
, '</script>';
escaping from php mode to direct output mode
<?php
// some php stuff
?>
<script type="text/javascript">
jsFunction();
</script>
I eventually solved this by using the following code:
<?php
echo "<script type='text/javascript>top.uploadComplete();</script>";
?>
The "top" keyword just solved all of my problems. I hope this helps whoever has the same issue I had!
I have a small piece of javascript to get a user to confirm things on my website. I have a link that I also ask them to confirm before proceeding. I've used the 'onclick' function with buttons no problem, but how do I use it on a link?
Heres my link:
echo"Delete";
And heres my 'onclick':
onclick="return confirm('Please confirm you wish to edit these details')"/>
Any help would be great!
Ummm...
<?php ?>
Delete
You can use onclick on an anchor tag the same way you'd use it on a button:
Delete
However you'd be better off using an event handler:
<script type="text/javascript">
function myClickHandler() {
return confirm("Really?");
}
document.getElementById("my_link").onclick = myClickHandler;
</script>
<a id="my_link" href="<?php echo $urlHTML; ?>">Delete</a>
I recommend you also read up on jQuery. It'll save you a lot of time.
You might want to consider using addEventListener and attachEvent (IE) instead of using inline JavaScript.
I have no idea how to do this. I want to insert php code into an image source through jquery.. but it is not working. Here is my code and help would be greatly appreciated!
JQUERY:
var mainId = $(this).attr('id');
$("#intabdiv img").attr('src', '<?=resize("../php/admin/portfolio/before/'+mainId+'",$settings)?>' );
HTML:
<div id="intabdiv">
<?php $settings = array('w'=>450,'h'=>450,'crop'=>true); ?>
<img src="" border="0" class="pic" />
</div>
</div>
It looks to me like you're trying to have the client browser execute PHP. That's not going to work for you. I'm not sure you have a completely clear idea of the separation between server and client, and what happens where.
Here's a simple model that you can use to think about where things occur:
User puts URL in browser and hits enter
Browser sends request to server
Server receives request and attempts to provide the resource requested
At this stage, if the file is a PHP file, any PHP instructions are executed. The end result of this, after all PHP is finished and done, is an HTML file, perhaps with some javascript.
The server sends this HTML file back to the browser.
The browser loads the HTML file, and executes any javascript, which can manipulate the HTML on the client side.
So, where does that leave us? You're attempting to take an image file that exists on the server, resize it, and display it to the end user. Presumably the "resize" function is one you have defined somewhere in your PHP code. I'll go on the assumption that you just need to do this once and have it show up for the user when the page loads.
In this case, what you need to do is something more like the following (all in the same file):
<?php
$settings = array('w'=>450,'h'=>450,'crop'=>true);
$imgsrc = resize("../php/admin/portfolio/before/imageid.jpg",$settings);
?>
<div id="intabdiv">
<img src="<?= $imgsrc; ?>" border="0" class="pic" />
</div>
... no javascript required. Obviously, imageid.jpg must be the actual filename of the image you're trying to access. If, instead, you're trying to have some user action trigger the access to the image, please provide more context for what you're trying to accomplish and a better answer can be given.
The problem is you set the html as having an ID, but jquery is using the selector as being a class.
So change it from:
$(".intabdiv img")...
To
$("#intabdiv img")...
Why not use something like jcrop? http://deepliquid.com/projects/Jcrop/demos.php
I have a thumbnail gallery populated from a database using php. Each thumbnail is also a link. What I would like is to be able to load an external php page in each case, with the large version of each thumbnail on it, flanked with related images.
The database tables are all set up properly in a relational sense, but I'm not sure about the functionality of being able to send data, in this case imgId, from the thumbnail gallery page, to the external page, and load the external page at the same time.
I thought it would be possible to do with a form submit, but since I need this functionality on every single thumbnail link, I thought that Ajax would work using jQuery. But alas it doesn't seem to be sending the data when I click on the link.
Hopefully someone can give me some advice. Thanks in advance.
The HTML:
<a target="_blank" href="secondary_imgs.php" class="gallery" value="16">
<img src="new_arrivals_img/thumbnails/boss-skaz1_black_front.jpg">
</a>
The jQuery:
$('.gallery').click(function(){
$.get("secondary_imgs.php", { imgId: $('.gallery').attr('value') });
});
Use $(this) inside the function to reference the clicked gallery
$('.gallery').click(function(){
$.get("secondary_imgs.php", { imgId: $(this).attr('value') });
});
Try this:
$('.gallery').click(function(){
$.get("secondary_imgs.php", { imgId: $(this).attr('value') }, function(data) {
$('body').append(data);
});
});
If that does nothing when you click on it, browse to "/secondary_imgs.php?imgID=xxx" and see if it is returning the data correctly at all.
Ok, I feel kinda stupid, but I figured out that all I needed to do was pass the data through the URL. The PHP code below shows what I mean, and I do thank those who helped me with this problem. My fault for making it faaaar more complicated than needed.
My question is however, is it safe to place data in the href as I'm showing below? I remember someone mentioning a potent ion problem concerning google spiders and the like.
The PHP:
while($row = mysql_fetch_assoc($result_pag_data)) {
echo "<a target='_blank' href='secondary_imgs.php?imgId=".$row['imgId']."'></a>";
}