I am new to Jquery and currently encountering an issue in my code. I need to hide an asterisk whenever the html form loaded. However, only the first asterisk hid. The TD tag is inside a for loop statement
HTML Code:
<td style="..." rowspan="0">
<div id="divhasvalue">
<label style="...">*</label>
</div>
</td>
Jquery code:
$(document).ready(function(){
$("#divhasvalue").hide();
});
Output in the Form:
You have to use the class instead of id. Give the same class to the divs you want to hide
Related
I've got a table row where it retrieves data from MySQL and I have included a .onclick function where it opens up a text editor with data inside, but the text editor is only opening for the first row and not the rest in the table.
This is the jQuery code: The first opens the text editor and the second switches the textarea for the text editor which is ckeditor.
<script type="text/javascript">
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
});
});
window.onload = function()
{
CKEDITOR.replace("editor1");
};
</script>
and this here is echo for the table, I am using a foreach.
echo '
<tr class="trClass" id="'.$counter.'">
<td class="marker">
<i class="fa fa-align-left"></i>
</td>
<td class="title">
'.$article_title.'
</td>
<td class="content">
'.$article_content.'
</td>
</tr>
<section id="d_'.$counter.'" style="display:none;">
<textarea id="editor1">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>
';
$counter++;
}
I cannot figure out how to make the CKEDITOR.replace("editor1"); load for every table, I tried using .click function within it but it does not work as it doesn't load. Here is the problem, if you click on the first row it opens the text editor if you click on the second it does not; http://www.goo.gl/dQrLPN
Typically the id attribute should be unique for each element. Applying properties across multiple elements is usually accomplished with a class. Knowing this, CKEditor is probably just grabbing the first instance of an object with the given id (probably using document.GetElementById behind the scenes).
(According to the documentation, CKEDITOR.replace(var) will either take a DOM element, ID, or name.)
Given that, you have a couple of options. One is to defer loading the CKEditor until you actually click on the table row. This would look something like this... (note how each textarea has a unique id)
<section id="d_' . $counter . '" style="display:none;">
<textarea id="editor_'.$counter.'">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
CKEDITOR.replace('editor_'+id);
});
});
The second option would be to loop through all of the textarea elements and call replace on each one of them on-load. I wouldn't really recommend this, unless there's some specific reason you want to load everything up-front.
EDIT: Although this should fix your issue, you should look in to the HTML issues the other answerers have put forward. <section> doesn't belong as a child of <table> :-)
Try targeting the table and filtering by the rows using the .on() method.
$(document).ready(function()
{
$('#table_id').on('click','.trClass',function() {
var id = $(this).attr('id');
$('#d_'+id).css('display', 'block');
$('#table_id').css('display', 'none');
});
});
Details on .on() are here: https://api.jquery.com/on/
And as noted in the comments above, there are some overall issues with your HTML that you should probably fix before proceeding further.
I am currently trying to make a wallpaper changer for my page.
At the minute, I would like to put the URL of a wallpaper into a text box when it's respective DIV option in a CSS menu is clicked.
Here is my JQuery
$("div.bg8").click( function() {
var BackgroundURL = 'Styles/hongkongskyline.jpg';
var TheTextBox = document.getElementById('<%=BackgroundsTxt.ClientID%>');
TheTextBox.value= BackgroundURL;
alert('This has worked'); });
.. and my HTML...
<ul><li class="#cssmenu"><a>
<div id="bg8" runat="server">
<table style="height: 16px; width:33%;">
<tr>
<td>
<img src='Styles/hongkongskyline.jpg' width="34px" height="32px" /></td> <td>Hong Kong Skyline </td>
</tr>
</table>
</div>
</a></li></ul>
Unfortunately, nothing seems to be happening when I click the DIV..
Does anybody see any problems which I can't?
Many thanks.
Several problems here.
First, you aren't referring to your div's ID in your jQuery - you're referring to a class called bg8. Try this:
$("#bg8")...
Next, you're mixing in some native-dom stuff into your jQuery. Instead of
document.getElementById('<%=BackgroundsTxt.ClientID%>');
try
$("#<%=BackgroundsTxt.ClientID%>");
and make sure the ID is resolved by looking at the source to your page.
And lastly, to set the value of the textbox:
theTextBox.val(BackgroundURL);
Your whole function could be
$("#bg8").click( function() {
$("#<%=BackgroundsTxt.ClientID%>").val('Styles/hongkongskyline.jpg');
alert('This has worked');
});
My strategy is to test event handlers with simple alerts before moving on to the real logic.
your jQuery states $('div.bg8') , this calls for a div with the class bg8,
you have not set the class, but rather the id of your div as bg8
change this: $('div.bg8') to $('#bg8')
;)
I want to use jQuery to insert an image after a certain row of a HTML table. I tried to use the appendTo function, but it did not work. I guess its something wrong with my jQuery selector. Can anyone correct my code?
Thanks!
HTML code:
<div class="articles">
<table align="center">
<tr><th><label for="id_chemical_name">Chemical name:</label></th><td><textarea id="id_chemical_name" rows="2" cols="17" name="chemical_name">Spinosad</textarea></td></tr>
<tr><th><label for="id_T">Number of time intervals:</label></th><td><input type="text" name="T" value="10" id="id_T" /></td></tr>
<!--I would like to insert an image after the row 'Number of time intervals'-->
<tr><th><label for="id_a">Logistic model parameter (α):</label></th><td><input type="text" name="a" value="0.746" id="id_a" /></td></tr>
</table></div>
jQuery code:
<script type="text/javascript" src=" ../stylesheets/jquery-1.7.2.js"></script>
<script>
$(document).ready(function(){
$('<img src = "https://www.google.com/images/srpr/logo3w.png" />').appendTo('#id_T');
})
</script>
Here is a demo of the question.
You cannot insert an image directly to a table without enclosing it in a tr and td/th element. I think this is what you are trying to do:
$('<tr><th colspan="2"><img src = "https://www.google.com/images/srpr/logo3w.png" /></th></tr>').insertAfter($("#id_T").parent("td").parent("tr"));
The element with ID id_T is an <input> - specifically a textbox - which cannot have child elements (and certainly not a child image).
You may want to try insertBefore or insertAfter instead, or you could use something like:
$('#id_T').closest('td').appendTo...
to move up the DOM from the input and find the containing <td>.
#id_T is a text input, you can't append an image to it.
Why can't you just put the image in manually? Especially since you can't just dump an image in the middle of a table structure like that.
To add a image to the same TD that id_T is in. Do that
$('<img src = "https://www.google.com/images/srpr/logo3w.png" />').appendTo($('#id_T').parent());
Any table's content should be inside td or th tag which should be in valid tr tag. Check your selector place again.
I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});
Try this:
$('.table input:checkbox').not('div.checker input').uniform()
I have a javascript a portion of this is as given below which on clicking an anchor tag with class to_comment will show up text box within div classes mentioned in the js.
$(".to_comment").live("click", function(){
$(this).parents(".activity_content").find(".activity_new_comment").show();
$(this).parents(".activity_content").find(".input_new_comments").click();
$(this).parents(".activity_content").find(".input_new_comments").focus();
return false;
});
I have this simple anchor tag in a page in the slim file as :
= link_to("Comment", "#", :class => "to_comment")
And I have hardcoded the text area to appear in the div tag in a _new.html.slim partial as follows:
.activity_new_comment style="display: block;"
.actor_logo_new_comment style="display: none;"
.activity_content
.actor_name_new_comment style="display: none;"
form#new_commentactivity_22.new_comment accept-charset="UTF-8" action="/comments" data-remote="true" method="post"
div style="margin:0;padding:0;display:inline"
input#comment_owner_id name="comment[owner_id]" type="hidden" value="2"
input#comment__activity_parent_id name="comment[_activity_parent_id]" type="hidden" value="22"
.input_new_comments_container
textarea#comment_text_activity_22.input_new_comments cols="40" name="comment[text]" rows="1" style="color: rgb(102, 102, 102);"
#copy_comment_text_activity_22.copy_new_comment Write a comment...
.activities_comment_btn style="display: none;"
But the hyperlink on clicking doesnt load the text area in the corresponding div tag from the partial. The js file is loading in the browser and a sample alert is also working !!
Try putting your Javascript code in a block
$(document).ready(function() {
// code here
});
to ensure the code gets executed after the dom is loaded completely. Otherwise it may happen that your HTML is not loaded completely when Javascript it trying to find elements having the to_comment class.
The first thing I notice is that .actor_logo_new_comment is set to display: none, yet there are no calls to show it in your code. Note that calling .show() on an element won't show all of it's children - you'll need to call .show() on the hidden elements directly.