0

I want to hide some divs that display photo title and other details about a photo if a photo doesn't exists (404) and then show again these divs when a user click on another photo in page ex. in related photos section. I have used css to hide this divs and then js to show them again. I have considered hiding with css, creating elements with JavaScript and displaying html using ajax. Is there a better way to do this without using non semantic HTML?

<?php 
        if(PHOTO::exists($_GET["photo"])) {
            ?>

        <div id="title_wrap">
            <div id="title"><?php echo $photo->get_title(); ?></div>
        </div>

        <div id="time_views">
            <div id="time"><?php echo $photo->get_time();?></div>
            <div id="views"><?php echo $photo->get_views(); ?></div>          
        </div>
         <?php
        }
?>

so if photo doesn't exists these divs (#title_wrap, #time_views) will not be shown but when the user clicks a photo in the related section these divs need to be shown and updated with the new info loaded via AJAX. So whats the best way to show and hide these divs?

Improve this question
12
  • How are you loading the images? Page load or Ajax? If its page load are you using a server side system like PHP or Java to build the page? Commented Jan 29, 2015 at 21:20
  • 1
    fix the php script you made so your not sending bad urls to your Ajax code. At no time should you ever have 404 errors. Commented Jan 29, 2015 at 21:29
  • 1
    fix the problem at its source do not put a bandage over a bullet wound. The solution to your problem is to fix the server side script. Commented Jan 29, 2015 at 21:32
  • Include source code so we can give you a solution to your problem rather then a hypothetical problem. Commented Jan 29, 2015 at 21:35
  • Is the post being sent by an Ajax call? if so how is the Ajax call getting the string that its going to pass to this php script. Is your user is filling out a form and sending a file path they specify if so you may want to rethink that option. Commented Jan 29, 2015 at 21:49

1 Answer 1

Reset to default
3

If your pulling in images using ajax you can test to see if the data is available prior to creating a new image element and simply skip it. That way you don't load up your page with hidden elements. Every element you add to a page uses more memory. If your loading many image tags in the page that fail and your simply hiding them the page is going to get big depending on how big this loop is. When you get a response back check the data and if you get a 404 skip it and go to the next load request and don't add it to the page. also google bots don't like 404 messages. So loading bad image tags into your page will not be valid or clean and google will drop your SEO score.

Another thing you should consider is sending a request to the server have the server respond with a list of what files it has so your only sending load requests for what is on the server rather then guessing.

[UPDATE]

<?php if(file_exists($_GET["photo"])): ?>
     <div id="title_wrap">
         <div id="title"><?php echo $photo->get_title(); ?></div>
     </div>

     <div id="time_views">
         <div id="time"><?php echo $photo->get_time();?></div>
         <div id="views"><?php echo $photo->get_views(); ?></div>          
     </div>
<?php endif; ?>
<div id="relatedImages>this is outside the if statement and will be displayed even if the if statement is false</div>

If file_exists() returns false then none of this is displayed. so you don't have to hide it with css as it will not be on the page. There is no point in displaying the divs if there is no data to display. The solution is not css or JavaScript you should simply not show the content if the file is not there.

also this part of your code is not your problem. The problem is your giving the user the option to select images that do not exist. If your only giving the user the option to select images where you have the file then file_exists() will return true every time and you will never need to deal with a 404 error.

based on your questions and how you wright your PHP, I highly recommend getting a book on PHP. You should refresh on operators and if statements. Once you have reviewed the section on if statements check out formatting of inline php statements. This will get you on track for a very successful career in web programming. (the link to the book was the first one i found when searching amazon) It will be a good start. also check out http://www.w3schools.com/php/ they have a few beginner tutorials that can help you on your way. and remember KISS(Keep It Stupid Simple).

http://www.amazon.com/PHP-Absolute-Beginners-Jason-Lengstorf/dp/1430268158/ref=sr_1_1?s=books&ie=UTF8&qid=1422575607&sr=1-1&keywords=php+absolute+beginner&pebp=1422575612138&peasin=1430268158

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I don't think you fully understand me. It is a main image in page with some divs for title and other data about this image and it is a related images section. If this image doesn't exists this photo and other divs about photo will not be shown. But if the user click in a photo in the related section these divs should be shown and updated with info for the new photo. @Patric
Is the images being loaded on page load or by ajax?
If the image exists it will be loaded from server side. If it doesn't exists and user clicks in an image in the related section it will be loaded via AJAX. But I care more for these divs that show photo title, time etc should i hide them with css create with js or whatever is the best way? Becuse I will need them again to show the new image and image details loaded via AJAX
If the image doesn't exist then you should not have the server side render the option to begin with. Sounds more like you should change how your loading the images on the server side. At no time should you have to be dealing with many 404 image loads on a site. If your getting a bunch of 404s you have a problem with the logic on the server that's passing you bad urls to files that don't exist.
Its not the image the problem I can do it in php if it doesn't exists. The problem is this div <div class='title'>image title</div> and some other divs like this div which diplay image info. If the image doesn't exists this divs should not be there but if a user clicks another image these divs should be shown with the new image info.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.