Results 1 to 3 of 3

Thread: Module does not display

  1. #1
    Junior Member
    Join Date
    Jul 2016
    Posts
    3

    Module does not display

    My module does not work properly. I cannot figure out why. Does anyone know why the module wouldn't work and how to fix it? I suppose something is conflicting with it but I don't know what, or some code is bad. All this code worked on a previous page of mine and the panel class use to be a module. and when I changed it to a panel class I tried changing the rest of the code but can't figure out how this is happening.



    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    
        <meta charset="utf-8">
    
        <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="css/custom.css" />
    
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link type='text/css' rel='stylesheet' href='css/modal.css' /> 
    
        <title>Website</title>
    </head>
    <body>
    
    <?php
    include("includes/loggedInNav.php");
    ?>
    
    <script>
    
        globalJsonArr = [];
        var currId;
        
    </script>
    
    <br>
    <br>
    <br>
    <br>
    <br>
    
       <?php
            $id = urldecode($_GET['id']);
    
       		include("settings.php");
    
            if($id){
    
            $query = "SELECT * FROM housing WHERE active=1 and id='$id'";
            $resultSet = mysqli_query($link, $query);
            $num = mysqli_num_rows($resultSet);
    
            for($i = $num - 1; $i >= 0; $i--) {
                $row = mysqli_fetch_assoc($resultSet);
                $id = $row['id'];
                $university = $row['university'];
                $complexname = $row['complexname'];
                $contractprice = $row['contractprice'];
                $negotiable = $row['negotiable'];
                $gender = $row['gender'];
                $crossstreets = $row['crossstreets'];
                $incentives = $row['incentives'];
                $contractlength = $row['contractlength'];
                $numberofrooms = $row['numberofrooms'];
                $renewable = $row['renewable'];
                $roommates = $row['roommates'];
                $roomtype = $row['roomtype'];
                $approvedhousing = $row['approvedhousing'];
                $moveindate = $row['moveindate'];
                $monthlyutilities = $row['monthlyutilities'];
                $image = $row['image'];
                $image2 = $row['image2'];
                $image3 = $row['image3'];
                $description = $row['description'];
                $email = $row['email'];
                $active = $row['active'];
                $date = $row['datePosted'];
                $username = $row['username'];
    
                ?>
                <script>
    
                    var jsonObj = {
                        id: "<?php echo $id ?>",
                        university: "<?php echo $university ?>",
                        complexname: "<?php echo $complexname ?>",
                        contractprice: "<?php echo $contractprice ?>",
                        negotiable: "<?php echo $negotiable ?>",
                        gender: "<?php echo $gender ?>",
                        crossstreets: "<?php echo $crossstreets ?>",
                        incentives: "<?php echo $incentives ?>",
                        contractlength: "<?php echo $contractlength ?>",
                        numberofrooms: "<?php echo $numberofrooms ?>",
                        renewable: "<?php echo $renewable ?>",
                        roommates: "<?php echo $roommates ?>",
                        roomtype: "<?php echo $roomtype ?>",
                        approvedhousing: "<?php echo $approvedhousing ?>",
                        moveindate: "<?php echo $moveindate ?>",
                        monthlyutilities: "<?php echo $monthlyutilities ?>",
                        image: "<?php echo $image ?>",
                        image2: "<?php echo $image2 ?>",
                        image3: "<?php echo $image3 ?>",
                        description: "<?php echo $description ?>",
                        email: "<?php echo $email ?>",
                        active: "<?php echo $active ?>",
                        date: "<?php echo $date ?>",
                        username: "<?php echo $username ?>"
                    };
    
                    var id = <?php echo $id ?>;
                    globalJsonArr[id] = jsonObj;
    
                </script>
                
    
            
    
             <?php
    
                 }
              }
             ?>   
    
                <div class="container">
                    <div class='panel panel-primary' id="myModal">
                            <div class='panel-heading'>
                                <h2 id='complexname1'></h2>
                                <h4 id='university1'></h4>
                            </div>
                        <div class='panel-body'>
                            <div class='container' style='width:100%'>
                                <div class='row'>
                                    <div class='col col-md-6'>
                                            <div id='myCarousel' class='carousel slide' data-ride='carousel' data-interval='20000' width='auto' height='auto'>
                                                  
                                                         <ol class='carousel-indicators'>
                                                             <li data-target='#myCarousel' data-slide-to='0' class='active'></li>
                                                             <li data-target='#myCarousel' data-slide-to='1'></li>
                                                             <li data-target='#myCarousel' data-slide-to='2'></li>
                                                        </ol>
    
                                                      <div class='carousel-inner' role='listbox'>
    
                                                              <div class="item active">
                                                                    <a id="modalImageLink"><img id="modalImage"></a>
                                                              </div>
    
                                                              <div class="item">
                                                                    <a id="modalImage2Link"><img id="modalImage2"></a>
                                                              </div>
    
                                                              <div class="item">
                                                                     <a id="modalImage3Link"><img id="modalImage3"></a>     
                                                              </div>
    
                                                            <a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'>
                                                              <span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span>
                                                              <span class='sr-only'>Previous</span>
                                                            </a>
                                                            <a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'>
                                                              <span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>
                                                              <span class='sr-only'>Next</span>
                                                            </a>
                                                    </div>
                                            </div>
                                    </div>
                                    
                                        <div class='col col-md-6' id='here' style='display:inline-block;'>
                                            <ul style='width:100%'>
                                                <li id='university'></li>
                                                <li id='complexname'></li>
                                                <li id='contractprice'></li>
                                                <li id='negotiable'></li>
                                                <li id='gender'></li>
                                                <li id='crossstreets'></li>
                                                <li id='contractlength'></li>
                                                <li id='numberofrooms'></li>
                                                <li id='renewable'></li>
                                                <li id='roommates'></li>
                                                <li id='roomtype'></li>
                                                <li id='approvedhousing'></li>
                                                <li id='moveindate'></li>
                                                <li id='monthlyutilities'></li>
                                                <li id='incentives'></li>
                                                <li id='description'></li>
                                            </ul>
                                        </div>
                                </div>
                            </div>
                        </div>
    
                            <div class='panel-footer'>
                                <button class='btn btn-danger' data-toggle="modal" data-target="#myModal3">Report Posting</button>
                                <button class='btn btn-primary pull-right' data-toggle="modal" data-target="#myModal2">Make Offer</button>
                            </div>
    
                    </div> <!--End Div for Panal Main-->
            </div> <!--End div for Container-->
    Last edited by sam; 07-29-2016 at 07:04 PM.

  2. #2
    Junior Member
    Join Date
    Jul 2016
    Posts
    3
    Code:
                <!-- The Offer Modal -->
                <div id="myModal2" class="modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="close">x</span>
                            <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                            <h2>Make an Offer</h2>
                        </div>
                        <form method="post">
                            <div class="modal-body">
                                <p align="center" id="askingPrice"></p>
                                <p align="center">$<input placeholder="Price I am offering to pay" type="text" id="subject" name="offer" /></p>
                                <input style="visibility: hidden;" name="email" value="TRUE" />
                                <input style="visibility:hidden;" name="complexname" id="complexVal" value="" />
                                <input style="visibility:hidden;" name="gender" id="genderVal" value="" />
                                <input style="visibility:hidden;" name="university" id="universityVal" value="" />
                                <input style="visibility:hidden;" name="askingPrice" id="priceVal" value="" />
                                <input style="visibility:hidden;" name="emailAddress" id="emailVal" value="" />
                            </div>
                            <div class="modal-footer">
                                <input type="submit" class="btn btn-primary" value="Make Offer" />
                            </div>
                        </form>
                    </div>
                </div> <!--End div for myModal2-->
    
                    <!-- The Report Modal -->
                    <div id="myModal3" class="modal" role="dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <span class="close">x</span>
                                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                                <center><h2>Report Post</h2></center>
                            </div>
                            <form method="post">
                                <div class="modal-body">
                                    <p align="center"><b><font color="red">Are you sure you want to report this post?</font></b></p>
                                </div>
                                <div class="modal-footer">
                                    <input type="submit" class="btn btn-danger" value="Report Posting" onclick="report()"/>
                                </div>
                            </form>
                        </div>
                    </div> <!--End div for myModal3-->
    
     
    
    
    <script>
    
    //window.onload = function(id){
            id = <?php echo $id ?>;
    
       //var modalView = function(id) {
            
            currId = id;
            var housing = globalJsonArr[id];
            console.log(housing);
    
            document.getElementById("complexname1").innerText = housing.complexname;
            document.getElementById("university1").innerText = housing.university;
            document.getElementById("modalImage").src = housing.image;
            document.getElementById("modalImageLink").href = housing.image;
    
            if(housing.image2 === "NONE") {
                document.getElementById("modalImage2").src = "img/noimage2.jpg";//posting.image2;
                //document.getElementById("modalImage2").style = "width: 200px; height: 200px; visibility: visible";
                //document.getElementById("modalImage2Link").style = "visibility: visible";
            }
            else {
    
                document.getElementById("modalImage2").src = housing.image2;
                document.getElementById("modalImage2Link").href = housing.image2;
                //document.getElementById("modalImage2").style = "width: 300px; height: auto; visibility: visible";
                //document.getElementById("modalImage2Link").style = "visibility: visible";
            }
    
            if(housing.image3 === "NONE") {
                document.getElementById("modalImage3").src = "img/noimage2.jpg";//posting.image2;
               // document.getElementById("modalImage3").style = "width: 200px; height: 200px; visibility: visible";
               // document.getElementById("modalImage3Link").style = "visibility: visible";
            }
            else {
    
                document.getElementById("modalImage3").src = housing.image3;
                document.getElementById("modalImage3Link").href = housing.image3;
                //document.getElementById("modalImage3").style = "width: 300px; height: auto; visibility: visible";
                //document.getElementById("modalImage3Link").style = "visibility: visible";
            }
    
            document.getElementById("complexname").innerHTML = "<strong>Complex Name:</strong> " + housing.complexname;
            document.getElementById("gender").innerHTML = "<strong>Complex Type: </strong> " + housing.gender;
            document.getElementById("university").innerHTML = "<strong>University:</strong> " + housing.university;
            document.getElementById("contractprice").innerHTML = "<strong>Contract Price: </strong> $" + housing.contractprice + "/m";
            document.getElementById("negotiable").innerHTML = "<strong>Is the price negotiable:</strong> " + housing.negotiable;
            document.getElementById("crossstreets").innerHTML = "<strong>Cross Streets:</strong> " + housing.crossstreets;
            document.getElementById("incentives").innerHTML = "<strong>Incentives:</strong> " + housing.incentives;
            document.getElementById("contractlength").innerHTML = "<strong>Contract Length:</strong> " + housing.contractlength;
            document.getElementById("numberofrooms").innerHTML = "<strong>How Many Roommates:</strong> " + housing.numberofrooms;
            document.getElementById("renewable").innerHTML = "<strong>Renewable:</strong> " + housing.renewable;
            document.getElementById("roommates").innerHTML = "<strong>Are There Any Roommates Selling:</strong> " + housing.roommates;
            document.getElementById("roomtype").innerHTML = "<strong>Room Type:</strong> " + housing.roomtype;
            document.getElementById("approvedhousing").innerHTML = "<strong>Approved Housing:</strong> " + housing.approvedhousing;
            document.getElementById("moveindate").innerHTML = "<strong>Move in Date:</strong> " + housing.moveindate;
            document.getElementById("monthlyutilities").innerHTML = "<strong>Monthly Utilities:</strong> $" + housing.monthlyutilities;
            document.getElementById("description").innerHTML = "<strong>Description:</strong> " + housing.description;
    
            //modal.style.display = "block";
            housing = {};
    
        
    
        // Get the modal
        var modal = document.getElementById('myModal');
    
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
    
        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }
    
        var modal2 = document.getElementById('myModal2');
        var span2 = document.getElementsByClassName("close")[1];
    
        span2.onclick = function() {
            modal2.style.display = "none";
        }
    
        var modal3 = document.getElementById('myModal3');
        var span3 = document.getElementsByClassName("close")[2];
    
        span3.onclick = function() {
            modal3.style.display = "none";
        }
    
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    
        var makeOffer = function(currId) {
    
            modal.style.display = "none";
    
            var housing = globalJsonArr[currId];
            document.getElementById("complexVal").value = housing.complexname;
            document.getElementById("genderVal").value = housing.gender;
            document.getElementById("universityVal").value = housing.university;
            document.getElementById("priceVal").value = housing.contractprice;
            document.getElementById("emailVal").value = housing.email;
            document.getElementById("askingPrice").innerHTML = "Posted Price: $" + housing.contractprice + "/m";
            
    
            modal2.style.display = "block";
    
        }
    
        var report1 = function(currId) {
            modal.style.display = "none";
            modal3.style.display = "block";
        }
    
        var report = function(currId) {
            var posting = globalJsonArr[currId];
            $.ajax({
                type: "POST",
                url: "http://www.website.com/report",
                data: {postingId: posting.id}
            });
            window.alert("This posting has been reported and will be reviewed.");
        }
    
      </script>
    
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>
    The closing html and body tags are in the footer.

  3. #3
    Junior Member
    Join Date
    Jul 2016
    Posts
    3
    Here is an image of the problem.

    Last edited by sam; 07-29-2016 at 07:01 PM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •