I have a input field that gets it value from a db lets say the value is M,K,H,J,V or G depending on the value it needs to open the div with aaa,bbb,ccc,ddd,eee or fff as text.
The code that is displayed on the page is as followed i left out the retrieval part from the db that part is working (the input box shows M,K,H,J,V or G depending on the id.)
echo "<input type='text' name='periode' id='periode' data-related-item='" .$row['periode']. "' value='" .$row['periode']. "'>";
echo "<div class='hidden'><div id='M'>aaa</div></div>";
echo "<div class='hidden'><div id='K'>bbb</div></div>";
echo "<div class='hidden'><div id='H'>ccc</div></div>";
echo "<div class='hidden'><div id='J'>ddd</div></div>";
echo "<div class='hidden'><div id='V'>eee</div></div>";
echo "<div class='hidden'><div id='G'>fff</div></div>";
When i check the source code in developer mode it shows that the data-related-item part is correctly retrieved from the db:
<input type="text" name="periode" id="periode" data-related-item="M" value="M">
I want to use the following JS but i need to change it to work with textboxes.
<script type="text/javascript">
function evaluate1(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate1).each(evaluate1);
</script>
The simplest approach is offcourse changing:
$('input[type="checkbox"]').click(evaluate1).each(evaluate1);
into
$('input[type="textbox"]').click(evaluate1).each(evaluate1);
But what do i need to do with:
if(item.is(":checked")){
Thanks for any help in advance.
I tried the following but it aint working.
if(item.is("M||K||H||J||V||G")){
SOLUTION BY ROBERT ROZAS
The solution is in jsfiddle
http://jsfiddle.net/dXTtz/7/
I made this code based on the code you provide:
$(document).ready(function(){
$("#periode").keyup(function(){
var valor = $("#periode").val();
$(".hidden").each(function(){
var hijo = $(this).children().attr('id');
if(hijo == valor)
{
$(this).removeClass("hidden");
}
});
});
});
Working fiddle here: http://jsfiddle.net/robertrozas/dXTtz/2/
This way is working on page load: http://jsfiddle.net/robertrozas/dXTtz/4/
Page load and removing the extra hidden divs: http://jsfiddle.net/dXTtz/5/
Related
i have a while loop within an SQL query that returns all comments for a specific post page , within that same loop i have another query and a while loop that searches for replies to that comment and returns only the first row using LIMIT 1. I did this so only one reply is shown for a comment at first, i added another another query and a loop within the second loop to search for other replies to the comment except this time I'm returning the other rows except the first row using LIMIT 1,18446744073709551615. I've put the result of the last query in a div which is hidden at first, and a trigger view all replies in the first query which comes before the hidden div.
So now i have a trigger view all replies inside the first loop (that contains the comments). using javascript i can show and hide the div when the trigger is clicked. this is a snapshot of what it looks like
First snapshot, div is hidden with only 1 reply being shown.
second snapshot, div is visible and text for trigger is changed
My problem:
Since I'm using the same class for all hidden div's, the trigger for a particular comment to show/hide its replies works for all comments. so when i click on view all replies for the first comment, the replies for the second,third etc are shown as well. How do rewrite my code to target specific comments to show/hide its replies?
JavaScript
<html>
<head>
<script language="JavaScript">
$(document).ready(function(){
var showText='View all replies';
var hideText='Hide';
// initialise the visibility check
var is_visible = false;
// append show/hide links
$('.view1').prev().append();
$(".licom").hide();
$(".view1").click(function(){
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
$('.licom').toggle(function() {
$(this).closest('view1').find('.licom').hide();
return false;
},
function() {
$(this).closest("view1").next(".licom").show();
return false;
});
});
});
</script>
</head>
<body>
</body>
</html>
info.php
<?php
...........
$stmt = $conn->prepare(
"SELECT *
FROM comment
WHERE post_id = :pid
");
$stmt->bindParam(":pid", $type_id, PDO::PARAM_INT);
$stmt->execute();
while($obj = $stmt->fetch()){
$username = $obj['user_name'];
$comment = $obj['comment'];
$id1 = $obj['id'];
$userimage = $obj['user_image'];
$row ++;
$likes = $obj['like1'];
$dislikes = $obj['dislike'];
echo '<div class="txt">';
echo '<div class="comment-container">';
echo '<div class="comment-item">';
echo '<div class="comment-avatar">';
echo '<img src="user/user_images/'.$userimage.'" alt="avatar">';
echo '</div>';
echo '<div class="comment-post">';
echo '<span style="font-weight:bold;">'.$username.'  said....
</span>';
echo '<p style="margin-left:-11px;">'.$comment.'</p>';
echo '<input type="hidden" name="comment_id" value="'.$id.'">';
echo '<form action="" method="post" class="ajaxform"
enctype="multipart/form-data">';
echo '<input type="hidden" name="lkcv[]" value="'.$id.'">';
echo '<input type="hidden" name="pid" value="'.$type_id.'">';
echo '<input type="hidden" name="stk" value="'.$likes.'">';
echo '<input type="image" src="images/like.png" id="lksub" width="15"
value="som" height="15" style="float:right;position:relative;margin-
right:290px;"/><div class="ld">'.$likes.'</div>';
echo '</form>';
echo '<form action="" method="post" enctype="multipart/form-data">';
echo '<input type="hidden" name="lkd_id" value="'.$id.'">';
echo '<input type="hidden" name="dislike" value="">';
echo ' <input type= "image" id="submit" src="images/dislike.png"
width="15" height="15" style="float:right;position:relative;
margin-top:-14px;margin-right:230px;"/>
<div class="ldks">'.$dislikes.'</div>';
echo '</form>';
//trigger to hide/show replies
echo '<span class="view1" style="float:right;margin-top:-15px;">View all replies</span>';
//
echo '<span class="SendCopy">Reply</span> ';
echo '<div class="users">';
echo '<form action="" method="post" enctype="multipart/form-
data">';
echo '<textarea rows="4" name="replycomment" style="float:right;
resize: none;margin-top:5px;" cols="50" >';
echo '</textarea>';
echo '<input type="hidden" name="comment_id" value="'.$id.'">';
echo '<input type="submit" name="reply" id="submit" class="post-
button" value="Send" />';
echo '</form>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
//Relpy to comment, show only the first row
$rep = $conn->prepare("SELECT * FROM reply WHERE comment_id = :comid LIMIT 1");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);
$rep->execute();
while($obj = $rep->fetch()){
//...........same output as first without the view all replies trigger......
//Relpy to comment, show from 2-
$rep = $conn->prepare("SELECT * FROM reply WHERE comment_id = :comid LIMIT 1,18446744073709551615");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);
$rep->execute();
while($obj = $rep->fetch()){
//div to show/hide
echo '<div class="licom">';
//...........same output as first without the view all replies trigger......
}
}
}
?>
$('.licom').toggle()... is too broad and will select all elements with the 'licom' class, regardless of whether or not they were inside of the element that was clicked. Try $(this).children('.licom') instead.
Since you already have a unique comment ID, you could add that as an ID attribute to your comment-container element, similar to this:
echo '<div class="comment-container" id="comment-' . $id . '">';
Then, your jQuery for toggling the comments (only within that container) would look something like this:
//When a user clicks "View all replies"...
$('.view1').click(function() {
//Find the ID of the comment container he/she clicked inside
var commentID = $(this).closest('.comment-container').attr('id');
//Use that ID to make the selector more specific when targeting the reply elements
$('#' + commentID + ' .licom').toggle();
});
In other words, your jQuery/CSS selector just needs to be more specific.
Also, if you want to add a little bit of (subtle) animation to the show/hide behavior, jQuery's toggle() function accepts several options for accomplishing this: http://api.jquery.com/toggle/
UPDATE
I just realized that your .licom elements are not inside the .comment-container element like I originally assumed. So here's a modified version of my answer that allows you to keep your existing HTML structure.
In addition to outputting the comment ID as the id attribute on the .comment-container (that first line of PHP in my original answer), you also need to output it as a class on each .licom, like this:
echo '<div class="licom comment-' . $id . '">';
Then, the jQuery looks like this:
//When a user clicks "View all replies"...
$('.view1').click(function() {
//Find the ID of the comment container he/she clicked inside
var commentID = $(this).closest('.comment-container').attr('id');
//Use that ID to make the selector more specific when targeting the reply elements
$('.licom.' + commentID).toggle();
});
i've changed my triggers to be unique
echo'View all replies';
and my div class to show/hide to be unique as well by group.
echo '<div class="licom licom-'.$cc_id.'">';//$cc_id has the same value as trigger. example $id1=2, $cc_id=2.
now i have the trigger as licom-1 and div to show/hide as licom licom-1
then i changed my javascript to:
<script language="JavaScript">
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
var id = $(this).attr('id');
if($('.'+id).css('display') == 'none')
{
$('.'+id).css('display','block');
}
else
{
$('.'+id).css('display','none');
}
return false; // cancel original event to prevent form submitting
})
})
</script>
This javascript would only show/hide the div with same licom value i.e only the replies with same id would be toggled by that trigger.
and lastly to make all licom hidden, i added the css.
.licom {
display:none;
}
I'm trying to build an interface to insert, edit and delete records in a MySQL database, using PHP and a TinyMCE editor to insert rich text.
When I try to populate the fields in the form in the "edit" section, the TinyMCE text areas don't work. The text inputs are correctly populated with the database data, but the text areas remain empty.
I already tried to reset the TinyMCE init (I need to disable paragraphs), but nothing changes.
Here's the code of my edit page:
<html>
<head>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false
});
//validator form js
function validate_form(){
var x = document.getElementById('autore').value;
var y = tinyMCE.get('titolo').getContent();
if( x == "" || x == null || y == "" || y == null){
alert("Inserisci autore e titolo");
return false;
}
}
</script>
</head>
<body>
<?php
include ("connessione_mysql.php");
$rows_id=$_GET["rows_id"];
$sql="SELECT * FROM bibliografia WHERE ID='$rows_id'";
$results=mysql_query($sql, $connessione_mysql);
$num_rows=mysql_num_rows($results);
if ($num_rows==0) {
echo "Il database รจ vuoto";
} else {
while ($rows=mysql_fetch_array($results)) {
$autore =$rows['autore'];
$titolo=$rows['titolo'];
$note=$rows['note'];
$editore=$rows['editore'];
$ID=$rows['ID'];
}
echo "<form method='post' onsubmit='return validate_form()' action='script2_modifica_bibliografia.php' class='dark-matter'>";
echo "<label><span>Autore* :</span> <INPUT TYPE=\"TEXT\" NAME=\"autore\" id=\"autore\" VALUE=\"$autore\" SIZE=\"74\"></label>";
echo "<label><span>Titolo* :</span><div class=\"aggiusta\"><TEXTAREA NAME=\"titolo\" id=\"titolo\" VALUE=\"$titolo\" ROWS=\"10\" COLS=\"60\"></TEXTAREA></div></label><br>";
echo "<label><span>Note :</span><div class=\"aggiusta\"><TEXTAREA NAME=\"note\" VALUE=\"$note\" ROWS=\"10\" COLS=\"60\"></TEXTAREA></div></label><br>";
echo "<label><span>Editore :</span> <INPUT TYPE=\"TEXT\" NAME=\"editore\" VALUE=\"$editore\" SIZE=\"74\"></label>";
echo "<input type=\"hidden\" name=\"ID\" value=\"$ID\">";
echo "<label><span> </span><INPUT TYPE=\"SUBMIT\" VALUE=\"Modifica il record\" CLASS=\"SUBMIT\"></label>";
}
echo "</FORM>";
mysql_close($connessione_mysql);
?>
</body>
</html>
Unlike other form elements, the textarea element does not use the value property. Instead, it is a block element, so you'd use it like this: <textarea>My value goes here</textarea>
Examples from your code: <textarea>$note</textarea>
<textarea>$titolo</textarea> etc, etc
Please refer to this MDN document about the textarea element for more information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Another important note, please, don't use mysql_* functions in new code. They are no longer maintained and are officially deprecated. See the red box? Learn about prepared statements instead, and use PDO or MySQLi - this article will help you decide which. If you choose PDO, here is a good tutorial.
DEscription :
I have a php script that displays the div on an html page
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id)"></div>';
Now when I click on this div the star_it function gets called and it works perfect...
The problem
I want to pass another argument in the star it function .. like this
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,'.$each_status['regno'].')"></div>';
or a simple alphabet if any like star_it(this.id,s)
but when I do so the function stops working as when I click the div the function does not gets called ....
I dont know why I am stuck and now my star rating system does not work... I have absolutely no idea what is wrong
Anyone ??
You should modify your string quote's like this :
<?php
$status = "second test";
echo '<div class="star_box" id="'.$id.'" onmousedown="star_it(this.id,'."'".$status."'".');" >Hello</div>';
?>
<script>
function star_it(foo1,foo2){
console.log(foo1);
console.log(foo2);
}
</script>
This example works for me.
So with your code :
<?php
echo '<div class="star_box" id="'.$id.'" onmousedown="star_it(this.id,'."'".$each_status['regno']."'".');" >Hello</div>';
?>
Here you go
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,\''.$each_status['regno'].'\')"></div>';
you forget to add \' before and after your string , the JS engine on the browser will treat your string as an undefined variable and the function will not work because of that .
//my English is not so good.
Try
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,\"'.$each_status['regno'].'\")"></div>';
I want to call a Javascript function from a table row cell.
I need to pass the id of that row as well.
In one cell I use an href (which does popup my edit dialog), but does not pass the Id (BrId).
The next one, well ideally a button which invokes a Javascript function (though I've seen code/functions which associates a click event function within $(document).ready(function() {.....etc}) but unsure if this will pick up the required Id (BrId) which is a primary key to a database table.
Code is:
foreach ($myrows as $row) {
echo "<tr>";
echo '<td style="border:none;">' .$row->BrId. '</td>';
echo '......'
echo '......'
echo '<td style="border:none;"><a href="#dialog" name="modal">Edit this branch </td>';
echo '<td style="border:none;"><button onclick="EditBranch (1)"></td>';
}
Ideally the function would also show my popup div ( id= dialog ) as the "a href="#dialog" name="modal" does.
If this helps, here's a section of the script:
$(document).ready(function() {
//select all the a tags with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href'); //gets me my div id
//other code for transition effects and positioning of my div....
}
You can pass the row id through a custom html data attribute :
echo ' Edit this branch ';
Then, you simply retrieve it like that :
var id = $(this).attr('data-id');
I have this html form
echo "<form name='delete_article_form".$row['id']."' action='sources/public/article_processor.php' method='POST' >";
echo "<input name='processor_switcher' id='processor_switcher' type='hidden' value='delete_article'><input name='article_id' id='article_id' type='hidden' value='".$row['id']."'><a class='delete_button' href='#'>".$s_delete[$lid]."</a>";
echo "</form>";
Now here is jquery code
$('.delete_button').live('click',function(){
article_id = ???????
alert(article_id);
});
What should I do to get the value from input named "article_id"?
Problem is that I have several such forms on my page so I must use THIS statement.
input=$('input',this).val(); will not help cause there are 2 inputs.
Any Ideas?
Try
var article_id = $(this).closest('form').find('input[name="article_id"]').val();
If you want the 'second' input, then you can do this
var article_id = $(this).closest('form').find('input').eq(1).val();
Use eq(1) to get the second element from the matched set of elements.
article_id = $('input:eq(1)',$(this).closest('form')).val();
Since you have an id to the input fields you can also use. The ids of elements on the page should be unique.
input = $("#article_id").val();