Careless Careless - 7 months ago 8
PHP Question

Connecting query code with many different divs

If I have 5 divs

<div id="" class=""> Div11 </div>
<div id="" class=""> Div12 </div>
<div id="" class=""> Div13 </div>
<div id="" class=""> Div14 </div>
<div id="" class=""> Div15 </div>


And jquery code for like:

On click some div to hide it.

Now when I say in jquery
$("DIV").click(function(){ $("DIV").hide(); });


I named it DIV so I can ask you these questions:


  1. Is ID or CLASS one that is going to be same as all others and the other one different.

  2. If ID is different and if i have first div
    id="div1"
    and second
    id="div2"
    and till last, how can I connect query to every single one of them?



I tried but it is working only on one div... Like even better question:

If I set some textarea as hide in jquery on page load. And on div click it need to show up... My script works only on 1 div on others not, and the textarea is not hidden as it should be.

UPDATE:

My real thing is that I have php file and mysql database

mysql database contains first name and id and last name
it have 10 names

in my php file I have:

$sql = "SELECT * FROM names";
$result = $con->query($sql);

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
$fname = $row['firstname'];
$id = $row['id'];
echo $fname."

<textarea id='div".$id."' class='divsss'>Enter last name:</textarea>

";

}

}


Then I have jquery code:

<script type="text/javascript">
$(document).ready(function() {


$('.divsss').keypress(function(event) {

var key = (event.keyCode ? event.keyCode : event.which);
if (key == 13) {

var lname = $('.divsss').val();

var forid = '<?php echo $id; ?>';

$.ajax({
method: "POST",
url: "intodb.php",
data: {ln: lname, fi: forid},
success: function(status) {
alert("lname: " + lname + "for id: " + forid);
$('.divsss').val('');

}

});
};
});

});
</script>


It wont work but when I change it to ids with same id it worrk only for first output it have value as 0 or 1. But When I try by classes it is not working.
And inside intodb.php I just have update into DB...

Answer

Regarding Your Questions

Is ID or CLASS one that is going to be same as all others and the other one different.

The id attribute by definition should be unique and can be used to identify a specific element within the DOM. The class attribute on the other hand can be shared my multiple elements and is generally used for styling the elements.

If ID is different and if i have first div id="div1" and second id="div2" and till last, how can I connect query to every single one of them?

You can accomplish this in a variety of ways. jQuery supports a wide variety of attribute-based selectors, so you could easily target every element that has an id that "starts-with div" as seen below :

// This would hide any elements that have an ID that starts with "div"
$('[id^="div"]').hide();

Likewise, you could also apply a CSS class to all of those elements to group them and select them that way :

<div class='your-class'></div>
<div class='your-class'></div>
<div class='your-class'></div>

along with :

// This would hide any elements that have the class "your-class"
$('.your-class').hide();

Regarding Your Code

With regards to your actual code, you'll need to ensure that you are properly scoping what you are trying to do within your keypress events :

// When a key is pressed within this element (presumably a <textarea> or <input>
$('.divsss').keypress(function(event) {
        // Store a reference to this for your AJAX callback
        var _self = $(this);
        // Get the key
        var key = (event.keyCode ? event.keyCode : event.which); 
        // If it was enter
        if (key == 13) {
            // Get the last name (of this element), using $(this)
            var lname = $(this).val();
            // Get an id predefined by your server-side PHP
            var forid = '<?php echo $id; ?>';
            // Make your AJAX post
            $.post('intodb.php',{ln: lname, fi: forid}, function(status){
                    alert("lname: " + lname + "for id: " + forid);
                    _self.val('');
            });
});