understanding Jquery inside HTML - javascript

I am writing this code here inside my HTML and I am trying to access the information in order to show and hide the information on the functioning website.
I have only been learning to code for less than a month and a half so I am unsure of whether or not this code creates another DIV inside the HTML.
If it does, how can I access this on CSS? I tried different methods to see if this would show up, but at this point, I believe it does not create anything new inside my HTML Body.
*var $tweet = $('<div class="tweet' +tweet.user+'"></div>');

you are creating an element but you are not appending it to anything.
var tweet = ('<div class="tweet' +tweet.user +'"></div>');
$('body').append(tweet);
you can change the 'body' to a different selector

Related

configuring my code to append to child instead of innerHTML

I have this code I wrote
Currently it uses innerHTML to write to the page with a forloop. However, I noticed that instead of writing everything. It just writes the last element in the array.
I searched and saw that I have to use the DOM to get this done as innerHTML will ALWAYS destroy instead of replacing. So I wrote this
function print(message) {
var mydiv = document.getElementById("box");
mydiv.appendChild(document.createTextNode(message));
}
To go inside my code and replace the innerHTML line. However, this doesn't seem to work. Can anybody help me getting it running?
by "this doesn't seem to work" i mean that the code won't append to the child of box. so my text will not be inserted into the element with the 'box' ID.
What i want to happen is just like in my codepen where i used innerHTML but instead of each only the last element in the array showing up, i want them all to show up
edit:
okay updated the codepen. seems the code I posted on this page kinda works. but it doesn't seem to go in the right place. if you check the codepen and add some text and scroll down you can see it doesn't fit into place
Change the print function in this way:
function print(message) {
var html = document.getElementById("box").innerHTML;
document.getElementById("box").innerHTML = html + message;
}
http://codepen.io/anon/pen/bwBOdq

AngularJS with MVC dynamically get html, append to body, and bind a controller

I am new to AngularJS with a jQuery background. For what I thought would be a simple task I am just finding it to be increasingly difficult. I have looked around on how to dynamically add html and bind to a controller but I just have not found my particular situation.
This is what I am trying to accomplish. I'll want to keep it simple for now with a simple dialog box. Basically, suppose I want to create my own custom dialog box. Suppose based on a button click I want to display the message "Are you sure you want to so and so" with the buttons yes, no, cancel. Then based on the button click, I'd like to perform a specific operation, users with windows development will be familiar with this.
First I must construct my message and my dialog box html based on the button clicked, append that output html to the document body as position absolute, and then once done with this remove the html from the document body.
In jQuery I can simply do this
...somewhere in code
var html = "<div id='123' class='dialog-box'><button id='yesButton'></button>
...elements for no and cancel</div>";
DisplayDialog("123", html);
...
function DisplayDialog(elementId, html) {
$(document.body).append(html);
var dElement = $(document.body).find("#" + elementId);
$(dElement).find("#yesButton").on("click" function () {
...code
$(dElement).remove();
});
...code for no, and cancel events
}
I just can't understand how to do this simply the angular way. Basically, I want to be able to get html, append it somewhere (whether in the body, or in a div element etc), and be able to interact with it using the $scope. I kept it simple for now for a dialog box, if I can understand this I can apply to much more complex operations where I might need to retrieve partial views in my MVC application and append it to a div
Its pretty straightforward in angular, this shouldn't be to hard for you given the jquery background:
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append('Hi<br/>');
https://docs.angularjs.org/api/ng/function/angular.element
Another way:
You then use ng-bind in the html and set it to a $scope variable that represents the html:
<div ng-bind-html="divHtmlVar"></div>
$scope.divHtmlVar = '<b>main html</b>';
Relevant blog post:
http://blog.sodhanalibrary.com/2014/08/append-or-prepend-html-to-div-using.html

Click event added to appended html; element not working as anticipated

OK I am sure I am doing something simple fundamentally wrong but am unable to resolve this issue on my own. I have tried googling and searching this forum and reading through the relevant parts of the jquery documentation.
If you need any further information please let me know. Many thanks in advance.
What I am trying to do:
I have a table showing details of various tests at the bottom of which I have a button to ad a new test. As each test comprises several rows of the table I have a template in a hidden div which I have cloned and appended to the live table. I am the using jquery to add appropriate classes and ids based on a variable integer for the sake of uniqueness. I am also attempting to add a click event to an image within one of the table cell to delete the rows relating to that particular test.
My current function
function newTest(sampleID){
var testID = $("#testCount").val();
$("#newTest tr").clone(true)
.addClass("test"+testID)
.appendTo("#testsTable"+sampleID);
$(".newdelbox:first")
.attr("id","testDelete"+testID)
.addClass("delbox")
.removeClass("newdelbox");
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
testID++;
$("#testCount").val(testID);
}
What I need to happen
Function to be called when image is clicked.
What is happening
Function is called only when script is assigned (not clicked). Function will not subsequently run when clicked. I am seeing no errors within the console.
What I have tried
chained to preceeding code:
.click(delSample(testID));
.on("click",delSample(testID));
.bind("click",delSample(testID));
As new line within function:
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
document.getElementById("testDelete"+testID).onclick(delSample(testID));
document.getElementById("testDelete"+testID).addEventListener("click",delSample(testID),false);
try this:
.click(function(){
delSample(testID);
});
OR
.on("click",function(){
delSample(testID);
});
i do not know of your html but i supose something like
.on("click",function(){
var current_id = jQuery(this).attr('id');
delSample(current_id);
});
just locate your id

Javascript inner.HTML not usable with a function - create moveable divs

I want to take a list of users from a database, show their name in a table and when you click on a name, a special div apeears with his details, you can move this div and even close it.
Here is a short scheme how the code is written:
function openDiv(id){
document.getElementById('divsHere').innerHTML +='<div id="moveable'+id+'">content</div>'}
<?php database connection... while{
...
<tr onclick='openDiv( ". $row['id'] ." )'>
$script += 'Drag.init(document.getElementById("moveable'+ $row['id'] +'"));'
...
}?>
<div id="divsHere"></div>
echo $script;
I've used this awesome drag'n'drop library.
http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm
(note I have the same problems with jQuery)
It seems the drag'n'drop function doesn't work, when the div was addad by inner.HTML. However, I don't see any onther way around.
Thank you for any advice!
The problem is when you execute Drag.init the div you feed it is not yet created.
I sugest you generate the individual divs inside a php cycle, just like you do for the th tags, remove the setting of the innerHTML you have at the beginning of openDiv, and it'll work.
I have to say though, it seems like what you want is a modal dialog which you can find already made and easy to use elsewhere. For example: http://jqueryui.com/dialog/ It'll both be easier to work with and your likely to enjoy the final result more.
I hope this helps :)
Try adding the div using document.createElement:
var newDiv = document.createElement('div'),
textNode = document.createTextNode('content');
newDiv.id = "moveable" + id;
newDiv.appendChild(textNode);
document.getElementById('divsHere').appendChild(newDiv);
and to initialise the dragging simply do
Drag.init(newDiv);
provided that part of the code where you want to initialise the dragging has newDiv within its scope.
(Probably you want to create the div and initialise the possibility of dragging it in the same place. If I've understood your scheme right, then the problem is that it first tries to initialise dragging on non-existent divs, then only when the user clicks on a row, calling the function openDiv, are those divs created. If this is right then to fix it, you need to make sure the dragging is only initialised after the div has been created.)

Make HTML visible inside Iframe

I'm making my own WYSIWYG. I've got two buttons: "Visualize" and Show Source.
I've got an iframe (rich text editor) that contains a huge piece of HTML code. First time it's loaded it shows all the elements visually. Once Show Source is pressed the innerHTML text (of the visualized html) is shown. But how can I make the HTML text visual again, when the Visualize button is pressed?
content.document.body.innerText holds the HTML that needs to be visualized.
(content = id of the iframe)
$('#Visualize').click(function()
{
// Make HTML visible
});
With the html code that you already have you and to show a preview in a div, correct? Just use the html function.
$('#Visualize').click(function(){
$('#myShowDiv').html(content.document.body.innerText);
});
If you're using an iframe and that iframe is only intended to hold the actual page source being edited, then you're going to need variables on your parent frame that hold the actual source. I would recommend keeping it separate and then use the following to perform switches:
var actualSource = content.document.body.innerHTML;
// just something to initialize it
// You should probably keep it in a global object instead of as a var
$('#Visualize').click(function()
{
actualSource = content.document.body.innerText;
content.document.body.innerHTML = "";
content.document.body.innerHTML= actualSource;
});
I would imagine that you have methods that are capturing the source, but I would imagine you'd want to capture the actual source as it is at that moment. I'm not sure what you're doing with the actual editing piece (is it a div that is editable? is it a text area?), but in order to perform the showing, it should just be a matter of toggling the innerHTML and innerText between the two settings. The real catch will be monitoring the actual controls affected by this change.

Categories

Resources