asp net

dimanche 28 juin 2015

Cannot Click button when table row with button is appended

$('#insertBtn').click( function(){
    $('#mytable > tbody:last-child').append('<tr><td>'+$('#fnameText').val()+'</td><td>'+$('#lnameText').val()+'</td><td>'+$('#pointText').val()+'</td><td><button type="button" class="deleteClass">Delete</button></td></tr>');
    $('#textTable input').val('')
});

$(".deleteClass").on("click",function() {
    alert('row deleted');
});

Try typing anything into the textboxes. Then click on the insert button. Then click on the delete button on the first column. Notice the alert didn't trigger even though the button has the intended class

What is wrong with my code?

Load ajax success data on new page

My ajax call hits the controller and fetches a complete JSP page on success. I was trying to load that data independently on a new page rather than within some element of the existing page. I tried loading it for an html tag but that didn't work either. I tried skipping the success function but it remained on the same page without success data. My ajax call is made on clicking a normal button in the form and the code looks like as shown below.

$.ajax({

    url : '/newpage',
    type : 'POST',
    data : requestString,
    dataType : "text",
    processData : false,
    contentType : false,
    success : function(completeHtmlPage) {
        alert("Success");
        $("#html").load(completeHtmlPage);
    },
    error : function() {
        alert("error in loading");
    }

});

Javascript keep element at element's position

I have multiply divs in my html where i want to overlay a window. It is no problem to set the overlay to the correct position of my div with position: aboslute and top and left but when i resize the window or scroll the overlay is not moving with the element. How can i do that simple?

    function showDetails(e, elem) {
        var parentPosition = getPosition(e.currentTarget);
        var overlay = document.getElementById("overlay");
        overlay.style.top = parentPosition.y;
        overlay.style.left = parentPosition.x;
    }

html:

<body>
   <div class="content">
      <div class="button" onclick="showDetails(event,this)"></div>
      <div class="button" onclick="showDetails(event,this)"></div>
      <div class="button" onclick="showDetails(event,this)"></div>
   </div>
   <div id="overlay"></div>
</body>

Different width of column in the HTML table

I am trying to make the width of tds different in the HTML tale but I am unable to do so.

HTML Code

<table class="TFtable" border="1">
        <tr>
            <th >Heading1</th>
            <th >Heading2</th>
            <th >Heading3</th>
        </tr>
        <tr>
            <td>Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
            <td >Text</td>
            <td >Text</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
             <td>Text</td>
            <td>Text</td>
        </tr>
    </table>

CSS

.TFtable {
    width: 50%;
    border-collapse: collapse;
    table-layout: fixed;
}

.TFtable tr {
    padding: 7px;
    border: #4e95f4 1px solid;
}

/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr {
    background: #FFFFFF;
}

/*  Define the background color for all the ODD background rows  */
.TFtable tr:nth-child(odd) {
    background: #FFFFFF;
}

/*  Define the background color for all the EVEN background rows  */
.TFtable tr:nth-child(even) {
    background: #BCCECE;
}

.TFtable td{
table-layout: fixed;
width: 20px;
height:auto;
overflow: auto;
}

Link to JSFiddle.

Here

Upload is reading PHP variable as null

I am having trouble getting a picture to load from mysql database. The directory is randomly generated and gets stored in the database just fine. When the page refreshes the img returns a broken link, echos 'not set.', and inspect element tells me that $default_pic isn't defined. I can't figure out what is going on here can anyone help?

<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
$listingid = $_SESSION['edit_listing'];
if(isset($_FILES['listingpic'])){
    if($_FILES['listingpic']['type']=="image/jpeg"||$_FILES['listingpic']['type']=="image/png"||$_FILES['listingpic']['type']=="image/gif"){
        if($_FILES['listingpic']['size']<1048576){
            $chars = "abcdefghijklmanopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
            $rand_dir_name = substr (str_shuffle($chars), 0, 15);
                                    mkdir("userdata/listingpics/$rand_dir_name/") or die("directory error");
            if(file_exists("userdata/listingpics/$rand_dir_name/".$_FILES['listingpic']['name'])){
                echo "File already exists.";
            }
            else{
                move_uploaded_file($_FILES['listingpic']['tmp_name'], "userdata/listingpics/$rand_dir_name/".$_FILES['listingpic']['name']) or die("Failed to move file.");
                $listing_pic_name = $_FILES['listingpic']['name'];
                $listing_pic_query = mysql_query("UPDATE properties SET default_pic='$rand_dir_name/$listing_pic_name' WHERE id='$listingid'"); 
                $default_pic = "userdata/listingpics/$rand_dir_name/".$_FILES['listingpic']['name'];//<-PROBLEM
                header("Location: ../list_property/upload.php?id=".$listingid);
            }
        } else echo "File must not exceed 1MB.";
    } else echo "File must be a JPEG, PNG, or GIF image.";
} else echo "Not set.";

?>
<form action="" method="POST" enctype="multipart/form-data">
    <img src="<?php echo $default_pic; ?>" width="50%" height="50%"/><br>
    <br>
    <input type="file" name="listingpic" />
    <input type="submit" name="uploadpic" value="Upload Picture">
</form>

Uncaught TypeError: Cannot read property 'length' of undefined when trying to populate responsive datatable using php?

I am trying to fill responsive datatable with ajax request to a php script , the response is returned a JSON_encode format , i can see the response in xhr requests: ["abc","def","ght","jkl"]

Here is the code i am using

Name

                                    </tr>
                                </thead>
                             <tfoot>
        <tr>
            <th>Name</th>

        </tr>
    </tfoot>
    </table>




    $('#dataTables-example').DataTable({
            responsive: true,
               "ajax": "search_autocomplete.php",


    });

});

here is the php script-

   if ($result->num_rows >0) {
// output data of each row
while($row = $result->fetch_assoc()) {


    $list[] =$row['name'];

    }       
      echo json_encode( $list );

}

loading image using css animation VS loading using gif image

I encounter a problem showing loading css animation while doing heavy js operation, so I wonder if css animation is taking more resources then showing simple loading gif image, I made the following tests 1 created page with loading css

created page with loading css animation
created page with loading gif image
compare their resources using chrome task manager

here are the results look like css animation is using more CPU,and more memory so basically I want to consult about using css animations, Isn't that too heavy? should I avoid using it in loading cases?

loading example using css animation

loading example using gif image

css loading animation compare to gif loading image

Here is the code for loading with css animation

style

            /* beautiful loading screen */
            #loadingWrap{
                width: 100%;
                height: 100%;
                top: 0px;
                z-index: 250;
                background-color: rgba(255, 255, 255, 0.46);
            }
            .glyphicon.spin {
                font-size: 36px;
                -webkit-animation: spin 1.822s infinite linear;
                -moz-animation: spin 1.822s infinite linear;
                -o-animation: spin 1.822s infinite linear;
                animation: spin 1.822s infinite linear;
                -webkit-transform-origin: 50% 58%;
                transform-origin:50% 58%;
                -ms-transform-origin:50% 58%; /* IE 9 */
                line-height: 0px;
            }

            @-moz-keyframes spin {
                from {    -moz-transform: rotate(0deg);  }
                to {    -moz-transform: rotate(360deg);  }
            }

            @-webkit-keyframes spin {
                from {-webkit-transform: rotate(0deg);}
                to {-webkit-transform: rotate(360deg);}
            }
            @keyframes spin {
                from { transform: rotate(0deg); }
                to {transform: rotate(360deg); }
            }
            #loadingIcon {
                z-index: 10;
                position: absolute;
                right: 20px;
                bottom: 20px;
                line-height: 0px;
            }

html

        <div id="loadingWrap">
            <div id="loadingIcon">
                <i class="glyphicon glyphicon glyphicon-cog spin">Q</i>
            </div>
        </div>

here is the code for loading using simple gif

style

    #loadingWrap{
        width: 100%;
        height: 100%;
        top: 0px;
        z-index: 250;
        background-color: rgba(255, 255, 255, 0.46);
    }
    #loadingIcon {
        z-index: 10;
        position: absolute;
        right: 20px;
        bottom: 20px;
        line-height: 0px;
        background: url(../1-0.gif) no-repeat center center;
        width: 20px;
        height: 20px;
    }

html

    <div id="loadingWrap">
        <div id="loadingIcon">
        </div>
    </div>