Trying to insert a new html with input button - javascript

My goal is to create a button that when pushed will execute javascript to insert html that creates a new div with content inside of it. I have been able to get the button to click and
preform a .toggleclass and I have tried to use .html , .insertAfter(input.html()); but I have not had any luck.
My HTML for button
<input id="slideshow" name="viewing" value="View Slideshow" type="button"
onClick="newOverlay();">
current javascript
function newOverlay(){
var newItem = $("<p>Add this text instead</p>");
$("input").insertAfter(this.html("<p> Is this going to work</p>"));
}
I know this is adding a < p > and not a div but I tried to make it similiar thinking if I could get it to insert this paragraph then I could work on inserting the div.
Thanks for looking at this.

If you want to insert a p tag after every input, then you should do
$("input").after("<p> Is this going to work</p>");
If you want to inser the p tag after the input that was clicked then you would do
$(this).after("<p> Is this going to work</p>");

Where do you want to append your new item?
You should do something like this I guess.
function newOverlay(){
var newItem = $("<p>").text("Add this text instead");
$("YOUR_SELECTOR_HERE").append(newItem);
}
Give a sample with jsFiddle.

Related

JQuery $(this).find("#id").text("text") not changing text

I'm looping through all elements of a certain class on a page and editing the text of an tag in that class with a certain id. I'm referencing the element with $(this).find('#time') and trying to change the text of that object using $(this).find('#time').text("test"), but the the text of the element isn't changing and I can't figure out why.
EDIT:
$('.box').each(function(i, obj){} This is what the loop is, the odd thing is that when i simply reference the text with $(this).find('#time').text() i receive the correct output. But the text won't change when using .text().
Here is the code im using to change the object text:
var time = response.substring(7, 15);
var user = response.substring(16, response.length);
$(this).find('#time').text(time);
$(this).find('#name').text(response.substring(user));
Game Page
<div class="box">
<h1>${{ game_object.amount }}</h1>
<h2 id="time">{{ game_object.start_time}}</h2>
<p id="name">{{ game_object.current_top_user }}</p>
CLICK NOW
</div>
Try to use .html
$(this).find('#time').html("test")
or maybe this can help you:
$('body').find('#time').text('test');
Because the ID of an element must to be unique

Can't use Medium Editor addElements(elements)

I would like to add some html to my page using Medium Editor addElements() function. I don't really know how to use it. For now it just adds an editable blank line...
My code:
var editor = new MediumEditor('.changeable');
elements = "<section id='"+new_id+"' class='changeable'><h1 class='title_section'>"+newTitle+"</h1><p>This is a new paragraph.</p></section>";
editor.addElements(".container_content",elements);
My selector is the element with a "container_content" class. I would like to add the html of the var "elements" in it.
Thanks.
Ok, I found the problem.
You have to create your element you want to add first. Then you call .addElements(yourElement)

Jquery this.find() not picking anything up?

I hope you can help. I am trying to set part of a column to a text area.
$('#myListview .list-item').click(function() {
getId('textarea-Status').value(this.innerHTML);
}
I printed out 'this' which shows all of my HTML however I only want to show a specific part:-
Within the HTML that I have printed out to a text area I want to be able to print the row ID called 'data-roid'.
<div class = "ui-btn-text listview-row" **data-rowid="123456789"**>
So basically my new text are value wuld = '123456789'
getId('textarea-sysID').value($(this).find('data-rowid').text()));
sysID = $(this.data-rowid);
alert(sysID.innerHTML);
getId('textarea-sysID').value(sysID);
getId('textarea-sysID').value = JSON.stringify(sysID);
Would really appreciate any help.
Thanks
Get element by has attribute selector and attribute value by using data() method.
$(this).find('[data-rowid]').data('rowid')

work on all <span> at the current <div> then check for the value of an attribute of the <span>

i am kinda stuck with my javascript, I am making a greasemonkey script for a site, that restricts me to use plain-old javascript only. For now, my script currently does is, search for all the tables, and table row with ProjectTable-row then for each ProjectTable-row look for a div with ProjectTable-status, if that div is not found, it will delete the whole row.
it works great.
document.getElementById("gmSomeID").onclick = function showAlert() {
console.log('invoked');
var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
projectDescriptions = Array.prototype.slice.call(projectDescriptions);
projectDescriptions.forEach(function(el) {
if (el.querySelector('div.ProjectTable-status')) {
} else {
el.parentNode.removeChild(el);
}
});
}
but, now I do not know how to work on the current div and loop on all span inside it. I am still 2 steps short.
Loop on all span
Search for all span which contains data-content="apple" if none of the span has this attribute, then delete it.
Something like this:
For a HTML tag like this:
<div class="ProjectTable-status">
<span data-content="apple">
</span>
</div>
this will not be deleted data-content is apple.
For a HTML tag like this:
<div class="ProjectTable-status">
<span data-content="banana">
</span>
</div>
this will be deleted, no span has data-content="apple".
For HTML code like this:
<div class="ProjectTable-status">
<span data-content="banana"></span>
<span data-content="apple"></span>
</div>
this will NOT be deleted, the div contains at least 1 span that has data-content of apple.
I have no idea, how to proceed now and really tired or trying anything, i do not even know how to check for attribute value.
Hope someone can guide or put me at the right path.
Thanks!
Starting with what you provided, I've just slightly refactored it to check for an "apple" span within each div as it loops through. Using continue, we can execute the next iteration of the loop without deleting the div element if we find that it contains an "apple" span. This code is not tested, but just what came off the top of my head, so it might need some tweaking.
document.getElementById("gmSomeID").onclick = function showAlert() {
console.log('invoked');
var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
projectDescriptions = Array.prototype.slice.call(projectDescriptions);
//pointer to work with current div
var currentDiv;
projectDescriptions.forEach(function(el) {
currentDiv = el.querySelector('div.ProjectTable-status');
//do we have a div?
if (currentDiv) {
//look for an apple within the div
if(currentDiv.querySelector('span[data-content="apple"]')){
//go to the next iteration of the loop without delete
continue;
}
}
//if we made it this far, we didn't find an apple
el.parentNode.removeChild(el);
});
};

How to remove or hide only visible text & link from website using java script

How to remove or hide only visible "text & link" from website using java script. For example I want to hide "some text " & "Link text here" from bellows code without remove this full code
<p style="text-align:center;">some text Link text here</p>
Please help me
Assuming you mean that you want to hide the <p> tag, you need this piece of JavaScript:
document.getElementsByTagName('p')[0].style.display = 'none';
That will hide the first <p> tag on your page. I suggest adding a class or id to the tags you want to hide though, so that you can select them more accurately.
If you want to clear all contents of your <p> tag, you can do this:
document.getElementsByTagName('p')[0].innerHTML = '';
That will simply remove all of the tag's contents. If you want to remove the whole tag itself (so that it doesn't leave the empty <p> tag sitting around) you can change the .innerHTML part to .outerHTML.
There are several things to consider: you may want the test to return, so we cannot just lose it. You may want to preserve event bindings on nested elements, so we cannot simply destroy those. In the end, I would suggest CSS being the most appropriate route to take.
var paragraph = document.querySelector("p");
paragraph.style.overflow = "hidden";
paragraph.style.textIndent = "-1000%";
You could, alternatively, create a custom class meant to set overflow and text-indent, and toggle that class with JavaScript (jQuery?) instead:
paragraph.classList.toggle( "offsetChildren" );
// jQuery: $(paragraph).toggleClass( "offsetChildren" );
Fiddle: http://jsfiddle.net/6UZ82/
Try this code
function Hide(ptext,aText){
var p = document.getElementsByTagName('p');
var a = document.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
if(a[i].innerHTML==aText){
a[i].setAttribute("style","display:none") ;
}
}
for(var i=0;i<p.length;i++){
var str = p[i].innerHTML;
var rp = str.replace(ptext,'<span style="display:none">'+ptext+'</span>');
p[i].innerHTML = rp;
}
}
Hide('some text','Link text here');
Also you can show back using the reverse logic. i have commented out the show function in fiddle. you can uncomment it and click run to see it in action
Demo here

Categories