I am not even sure if what I am trying to do is possible. I want to present the "floating" DOM element created when dragging a row as something more than just text. Seems like when I try to use html code as the returned value it is rendered as text rather than html:
rowDragText: function(params) {
return `<div [innerHTML]=${params.rowNode.data.RULE_NAME}></div>`;
}
This is what happens:
There is public static GHOST_TEMPLATE defined in dragAndDropService.ts.
You can try modifiying that template and perhaps also inspect the createGhost function nearby.
rowDragText probably not used with this method...
Related
I wrote a class for my project like this using typescript and react.
class myImage extends Image {
oriHeight: number;
}
After I uploaded two images I have an array named 'results' which is full of objects with type myImage.
[myImage, myImage]
When I click it in browser, I could see the data of oriHeight of each element.
Then I try to use results.map() method to traverse all the elements in that array.
results.map((result: myImage) => {
console.log(result);
var tmp = result.oriHeight;
console.log(tmp);
})
However, the output of result is no longer an object but an img tag (because the type of Image is a HTMLElement) which makes the data of result unreadable. So the output of every tmp is undefined.
I am confused about that. Why the myImage object will become an img tag when I want to traverse it? I hope someone could help me with that. Really appreciate it.
I bet your data is actually fine. When you console log an html element, the chrome console displays it as an html tag instead of the javascript object.
Update: It's generally a bad practice to add your own properties to DOM elements because they're harder to debug and you risk them being overwritten by future browser properties. Instead, you could create a javascript object that contains both the image and your custom property. Here's an example interface definition:
interface MyImage {
imageEl: HTMLImageElement;
oriHeight: number;
}
In my razor page I've got several check boxes arranged in a table. I've got some other #Html.EditorFor elements that are required inputs. When I submit, and the validations are run, the page refreshes with the eoor messages and the text next to my check boxes in the table disappears. What's up with that?
My checkboxes are made with #Html.CheckBoxFor
I'm not using any special stylings or class attributes or anything right now.
You are correct. When the form is posted, you will lose all of that data provided you do not resend it back into your view. In your controller, you need to return the model along with the view. Without seeing your code, I can't give a specific answer but it should look something like this:
public ActionResult DoSomethingWithFormPostData(Model yourModel)
{
//Do whatever you need to do.
return PartialView("_yourView", model);
}
Alternatively, I like to have a method in my controllers to I use for the sole purpose of populating a page. If you have something like that, you can refer back to that sending the model as a routevalue in this way:
public ActionResult DoSomethingWithFormPostData(Model yourModel)
{
//Do whatever you need to do.
return RedirectToAction("_yourView", "YourController", model);
}
I'm using Jquery to get a list of elements having a class "x".
html:
<p class="x">Some content</p>
<p class="x">Some content#2</p>
If we use Jquery to get both these html elements and do something with it- we use something like:
$(".x").text("changed text");
This will change the text of both the paragraphs. From $(".x") - How can we add a array - subscript notation like we can do with getElementsByclassName as follows:
document.getElementsByClassName("x")[0].innerHTML
I tried this
$(".x")[0].text("asasa")- it doesn't work gives a typeerror in javascript console. I also tried get API here -http://jsfiddle.net/probosckie/jnz825mp/ - and it doesnt work
the error is Uncaught TypeError: $(...).get(...).text is not a function
None of the solutions below WORK!
You can use the get() method for accessing an element from the array, for example:
$(".x").get(index).textContent = "changed text";
More info: https://api.jquery.com/jquery.get/
And for obtaining HTML (innerHTML) you call the .html() function:
// This is equal to document.getElementsByClassName("x")[0].innerHTML
$(".x").get(0).innerHTML;
If you want to set the HTML, then just provide your HTML code inside the function call like this .html('<h1>Hello, World!</h1>').
EDIT: .get() returns the DOM object not the jQuery wrapped element. Therefore .text() and .html() doesn't work. Unless you wrap it.
More options:
$(".x").get(0).innerHTML;
$($(".x").get(0)).html();
$(".x:first").html();
You can do it like this way:
$('.x:eq(0)').text('changed text');
or:
$('.x').eq(1).text('bbb');
both works well
sorry for my before answer..
The solution $(".x").get(index)... will first match all .x (which is bad performance). And then it will filter
If you have 1000 .x it will fill an 1000 items in the jQuery object (before filtered)
But
$(".x:first").text("changed text"); will do better because it won't yield all .x and then filter , but will do it at a first single step (without filling 1000 items)
I am really new to HTML and am stuck conceptualising some code as follows.
My question is - which part of the code is actually doing the displaying of 'showHello'.
<html>
<head>
<script>
function displayCD()
{
document.getElementById("showHello").innerHTML="hello";
}
</script>
</head>
<body onload="displayCD()">
<div id='showHello'></div>
</body>
</html>
Doesn't document.getElementById("showHello").innerHTML="hello";
just set id showHello to the value hello and
<div id='showHello'></div> just create the id showHello?
If <div id...> actually displays the value of showHello, how does it, if displayCD() is called before it or is the whole document deciphered before anything is actually displayed ?
Does that make sense as a question?!!!!
Doesn't document.getElementById("showHello").innerHTML="hello"; just set id showHello to the value hello
It searches the DOM for the element with that id, and changes the HTML inside it to hello.
and just create the id showHello?
It creates an element with that id
how does it, if displayCD() is called before it or is the whole document deciphered before anything is actually displayed ?
See this:
<body onload="displayCD()">
The function is called in response to the load event firing. That won't happen until the entire document, including any dependent resources (such as images) has loaded.
The line who is in charge for displaying the "hello" is this one
function displayCD()
{
document.getElementById("showHello").innerHTML="hello"; // THIS one
}
And the displayCD() function is loaded with HTML here
<body onload="displayCD()">
PS : If you're new with HTML, you probably new with Javascript. Maybe you should look after jQuery. Here is how we doing the same thing with jQuery.
$(document).ready(function() {
$("#showHello").html("hello");
});
Preview : http://codepen.io/anon/pen/ypBvf
A simplified version of what a browser would do is like this:
create the document object
add the head element and interpret the script. This will make him remember that there exists a function called displayCD.
add the body element.
add the div HTMLElement to it and set the id property to showHello
Note: the div is declared here in Hypertext markup language <div id='showHello'></div>
when the document has done loading all the elements into it, the function you set on onLoad is called. In your case, onload="displayCD()" is the part that does that and the function called is displayCD.
displayCD will get the HTMLElement that has the id == showHello and set its innerHTML property to the hello string. Since this is called when the document has fully loaded, it means that the div with id == showHello already exists, so it will add the text hello into it.
I'm new to the use of jQuery so the problem I'm facing should be fairly straight forward. Basically what I'm trying to accomplish is load a variety of simple text-only pages within DIV elements of my site, and with a navigation bar hide/unhide these individual DIVs.
DIVs are correctly loaded the requested pages using an script block. However, what is not working correctly is toggling the visibility of these DIV blocks. I've narrowed it down to a jQuery function I've created which blocks the entire script call whenever I refer to any of the DIV blocks. Let me explain better with a code snippet.
This is is some very simple code that, on the click of a menu link, runs a hide function then shows the corresponding DIV element.
$( document ).ready(function()
{
console.log("document ready."); <-- does NOT get called with hideDivs()
$('#button1').click(function(){
hideDivs();
$("#page1").show();
});
$('#button2').click(function(){
hideDivs();
$("#page2").show();
});
});
This is the hideDivs() function, JUST above the ready function:
function hideDivs()
{
$("#page1").hide(); <-- These lines cause the entire
$("#page2").hide(); <-- <script> block to note get called.
}
Finally, page1 and page2 are created with a script block halfway inside the page:
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
$("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>
Why then is it that the top SCRIPT block fails with the hideDivs() function? I've tried placing it inside the $( document ).ready function with no change. Again, if the function is blank, or contains something simple like 'console.log' it works, but when referring to DIV tags it breaks.
Even stranger, the code that makes the function FAIL, WORKS if I simply rewrite the code as such:
$('#button1').click(function(){
$("#page1").hide(); <-- This works fine
$("#page2").hide(); <-- (page1 repeated to match function code)
$("#page1").show();
});
I have quite a few pages so I would much rather be able to use a function as not to have lots of repetitive code.
I have no errors displayed in my javascript console. I've looked closely at functions calls with StackOverflow and Google searches but couldn't spot a solution. I'm sure I've made a really silly mistake I'm overlooking, so any help would be much appreciated.
So instead of the whole function to hide your divs, you can simply put a class on each one and hide them by selecting that class. For example, each page Div give a class="clickablePages", and then do:
$(".clickablePages").hide();
that will simply hide all the divs that you have added the class to.
As for repeating all the button clicks for each button, you can simply do it in one function based on the id of the button. You can again put a class on all of the buttons as well, trigger the function by selecting the class and then grab the id you need within that function. something like this:
$('.buttonclick').click(function(){
var pageID = $(this).attr('id');
$("#page" + pageID).show();
});
In this case, if your buttons just had an id of '1' or '2' that matched the page number, it would only show the div for that page number. Hope that makes sense.