I need to set the within the HTML code a binding to a dynamically created name, something like:
<div ng-bind-html="MyVariable_{{counter}}">
and in the controller I'm using the following code:
var the_string = 'MyVariable_' + p ;
var MyHTML = '<font size="' + p + '">This is text with size depending on the index</font>' ;
var dummy = $parse(the_string);
dummy.assign($scope, $sce.trustAsHtml(MyHTML));
Clarification Note:{{counter}} within the HTML is the parameter "p" passed to the javascript code.
The problem appears to be within the HTML... AngularJS does not like the syntax I'm using within the HTML (i.e. ="MyVariable_{{counter}}"). Is there any way to accomplish this?
Thanks.
Use a function instead
ng-bind-html="getHtml(counter)"
And your javascript would look like this
function getHtml(counter) {
return $scope['MyVariable_' + counter];
}
Related
I have been working with Blazor quite a bit (https://blazorboilerplate.com) but I have a bit of a issue that has stumped me tonight with adding some custom D3 code to my blazor pages. The D3 / Javascript code creates several DOM input elements and I wish to retrieve the values of these created elements so I can save a DTO to my database with those values. How can I do this and what is the most efficient way? Should I just create a JSInterop method to return the input values?
domInput.attr("#ref", function (d3) {return d3.key});
I tried creating "#ref" attributes so I could use the ElementReference but D3 errors when I try to append an attribute that begins with '#'
After some more research from Mr. Magoo's comment you cannot interact with DOM that was / is created by JS and / or modified by JS. To get around this though you can create a JS function to return your data. So I created a helper method that returns a JSON string of my data. Then I call that JS from my Blazor code and use Newtonsoft to Deserialize it. The d3 code could easily be changed to vanilla javascript or JQuery to get the DOM elements value / innerHTML.
Blazor Code
var data = await JsRuntime.InvokeAsync<string>("JsInteropFunc", null);
dataDto = Newtonsoft.Json.JsonConvert.DeserializeObject<DataObjectDto>
(data);
Javascript Code, this case uses d3 to get the DOM Element with a class name to get the text form the DOM element:
window.JsInteropFunc = function() {
function cleanStr(data){
return data.replace("$","").replace(",","").replace("%","");
}
return '{ totalSales: "' + cleanStr(d3.select(".totalSales").text()) + '"' +
', annualSales: "' + cleanStr(d3.select(".annualSales").text()) + '"' +
', profitMargin: "' + cleanStr(d3.select(".profitMargin").text()) + '"' +
'}' ;
},
I am trying to create an options drop down list in html using JQuery to append from an Array.
Everything appears to be working correctly apart from the text between the opening & closing tags is not appearing. Am I so tired i'm missing a simple typo or doing something wrong?!?
The JS and JQuery code is:
var displayMenuSelections = function(){
var menuSelection = menu[0].prices[0];
var menuItems = Object.keys(menuSelection);
menuItems.forEach(menuFunction);
}
function menuFunction(item){
$('#menu').append($('<option value="' + item + '">' + item + '</option'));
}
The result of a typical option tag looks like this (with the 'item' missing between the opening and closing tags):
<option value="Cafe Latte"></option>
You forgot the > for the closing option tag. JQuery tries to close it for you, and in the process the inner item text doesn't get set.
Jquery takes a philosophy where it sort of tries to work with whatever you give it - this can be both good and bad, but in this case it makes it harder to debug since there's no error/exception that is raised.
var displayMenuSelections = function(){
var menuSelection = menu[0].prices[0];
var menuItems = Object.keys(menuSelection);
menuItems.forEach(menuFunction);
}
function menuFunction(item){
$('#menu').append($('<option value="' + item + '">' + item + '</option>'));
}
It looks to me like you are not passing your parameter
item
to your function
menuFunction(item)
I'm just assuming you are trying to send
var menuSelection
so you can try changing your function call to
menuItems.forEach(menuFunction(menuSelection));
I have not tested this however!
What I want is to get the content of a specific #id, remove a few tags and its contents, add some html before and after it, and then set that finished content as the body content.
I now have the following code, containing a mixture of Javascript and jQuery, although obviously not the right one - resulting in a [object Object]-message.
My code looks like this:
var printContents = jQuery("#"+id).clone();
var printContentsBefore = '<html><head></head><body><table><tr>';
var printContentsAfter = '</tr></table></body></html>';
var mainContents = printContents.find(".td_print").remove();
document.body.innerHTML = printContentsBefore + mainContents + printContentsAfter;
Any ideas of how to make this work?
Your code does not convert the cloned jquery object to a string. Modify your code as follows:
document.body.innerHTML = printContentsBefore + mainContents.html() + printContentsAfter;
Beware that the .html method output will not include the html representation of the container element itself (ie. of the #id clone in your case).
I have written a script that opens always, more or less, the same link but with another ID. Which is the variable in the loop. My script looks actually like this and I would only like to know how I can open this link with the variable as an ID:
<!DOCTYPE html>
<html>
<body>
<button onclick="openLinks();">Click </button>
<script>
function openLinks() {
var i;
for (i = 150; i < 156; i++) {
window.open('http://www.someurl.at/wp-admin/admin.php?page=wpsl_store_editor&action=edit_store&store_id="i"'); //doesn't work, should print 150, 151...
}
}
</script>
</body>
</html>
It looks like you're not adding the variable as a string to your url.
Try something like this:
window.open("http://www.ortner.elmima.at/wp-admin/admin.php?page=wpsl_store_editor&action=edit_store&store_id=" + String(i));
If you put double quotes inside a single quote JS engine will understand it as a regular character not a variable. " and ' is string literals, however, you should use only one of them.
You should write something like this
var link = "someurl" + i;
How would you build any normal string?
var x = "asdfg" + i;
so what you are doing is no different.
....tor&action=edit_store&store_id=' + i)
You have string/number concatenation problem :
Change :
window.open('http://www.someurl.at/wp-admin/admin.php?page=wpsl_store_editor&action=edit_store&store_id="i"');
To
window.open('http://www.someurl.at/wp-admin/admin.php?page=wpsl_store_editor&action=edit_store&store_id='+i);
The i within store_id="i"' is not dynamically evaluated.You have to "take out" the i as a string to a dynamic loop variable which concats to the string.
It should be
window.open('http://www.someurl.at/wp-admin/admin.php?page=wpsl_store_editor&action=edit_store&store_id="' + i + '"');
so that i does not render as part of a string, but rather to mean the variable.
I've got a string of html that I get via $("#datadiv").html();. Within this data are several other elements, and what I would like to do is append some data to one of those elements.
e.g.
var data = $("#datadiv").html();
var somestring = "Some text"
then append somestring into the div #stringholder inside of data. Is this possible?
And before the question comes, no I can't add it to the div before doing $("#datadiv").html();.
You can do something like this:
$(data).find("#stringholder").append(somestring);
As the html method returns a string, you need to pass it into jQuery again to create a jQuery object. You can then call find to get the element you want, and append to append the other string.
jQuery is quite happy to accept a string of HTML as an argument. It's not just selector strings that are accepted. If you pass in a string of HTML, that fragment will be the context for further method calls.
I think you already know this, but note that this will not affect the HTML in the DOM. It will only affect the fragment produced by passing the string into jQuery.
Do you mean :
var data = $("#datadiv").html();
var somestring = "Some text"
var newData = data + " " + somestring;
var holderData = $("#stringholder").html();
var newestData = holderData + " " + newData;
$("#stringholder").html('');
$("#stringholder").html(newestData);
Sure. Basically you could dump the string from the current div in to a variable and then concate the additional text and put it back in the div.
var someText = $('#datadiv').html()
var someNewText = 'my new text'
var someText = someText + ' ' + someNewText
$('#datadiv').html('') //this will clear the current text but not really necessary.
$('#datadiv').html('someText')
you just need to have some event that fires to trigger everything.