Javascript not Working in Rails app page - javascript

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.

Related

Jquery - Only the first data hid in the div element

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

Condtionally showing/hiding textarea with select.onchange in Javascript

I'm running up against a wall with something rather simple. I have an "Other:" option on a 'select' element that I am using as a condition for showing/hiding a 'textarea' element. I've got it mostly working despite one strange behavior: no matter what I do the 'textarea' is determined to display when the page loads, despite having 'display="none"' set. If I change to a non-'Other:' option it behaves normally and hides the textarea, and shows it when I select other. The only issue is on loading it defaults to displaying it. I'm sure this is something simple but it is utterly eluding me.
Here's code:
HTML
<div id="otherbox" style="text-align:left; padding:5px; margin:0px 6px;">
<textarea display="none" name="other" id="aboutOther" rows="10" cols="30" wrap="hard">
</textarea>
</div>
Javascript:
<script type="text/javascript">
var slct=document.getElementById("selectMenu");
slct.onchange=function()
{
this.value == "Other:" ? document.getElementById("aboutOther").style.display='block' : document.getElementById("aboutOther").style.display='none';
};
</script>
I included the 'div' on the textarea in case that's relevant (although I suspect it isn't). For full disclosure, that div is nested in another div. Hope that's not important.
Fullest disclosure: I don't know what I'm doing.
You need to use CSS to control the display property. Try to change display="none" to style="display:none;" in your textarea element as "display" is not a default attribute for textarea.

How do I use jsp form element contents (base64, text) as my html image src?

The jsp form contents are already formatted as such:
<form id="textpage"
<textarea name="textbox" id="text">
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAcC0lEQVR4nO3dd1SUZ.....
</textarea></form>
I want to click a button on another html page
<button>Load Image!!</button>
and replace an existing image placeholder src="putImageHere.png" with
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAcC0lEQVR4nO3dd1SUZ..."
ALSO !!! The src above must be a variable as it will be different each time its loaded so it cant be hard coded.
So basically I ended up loading an element with jquery and in the end it was as simple as
$('#elementId').load(URL,data,function(){
$('#myImage').attr("src", $('#elementId').innerHTML);
});

Dynamically generated script not working

I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});

JQuery adding and then removing same image

I am using JQuery to show a green check-mark and message on a successful submission. The image and message show up correctly. However I then want to slowly remove the image and message using JQuery's hide function. I have used this before with no problem when the html was on the page already. This time it is not working and I'm wondering if it is since the HTML is being added with JQuery and then removed. I'm also not sure if the element is a child of another element or not, which may be the problem. Any insight into the issue would be a huge help, thanks.
JQuery Code:
$("<span id='checkmark'><img height='45' width='45' src='./img/checkmark_green.jpg'/> <span style='color: #33CC33; font-size: 14pt'>Word successfully added to the dictionary.</span><br/></br></span>").prependTo("#div_dict");
//i also tried '#div_dict > #checkmark'
$('#checkmark').click(function(){
$(this).hide('slow');
});
HTML/PHP:
echo('<div id="div_dict">');
echo('<big id="add"><b>Add a word or phrase to the dictionaries</b></big><br/>');
echo('<form id="form_dict" name="form_dict">');
echo('<input id="entry" name="entry" size="30"/><br/>');
echo('<input type="radio" id="sent" name="sent" value="Positive"/>positive <input type="radio" id="sent" name="sent" value="negative"/>Negative<br/><br/>');
echo('<input id="but_dict" type="button" value="Submit" onclick="addToDict();"/>');
echo('</form>');
echo('</div>');
Your code works for me if you want to click the text to remove it. You can remove the click function to hide it on it's own if that is what you're after.
$("<span id='checkmark'><img height='45' width='45' src='./img/checkmark_green.jpg'/> <span style='color: #33CC33; font-size: 14pt'>Word successfully added to the dictionary.</span><br/></br></span>").prependTo("#div_dict");
$('#checkmark').delay(2000).hide('slow');

Categories