Develop Reference

How to pass line of HTML as variable?

I'm trying to make a menu for my app, and I'm trying to avoid repeating the same HTML code, so I want to put some data into array and loop it. It works fine for text, but I'm having trouble passing Bootstrap icons which are written in <i> markups.
I'm working on an MVC .NET project in cshtml file.
Here is what I have:
#{
string[] menuItems= {"Clients"};
}
<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
<i class="bi bi-people-fill clients"></i>
<span class="menu-item-text">#menuItems[0]</span>
</a>
And I'm trying to achieve something like this:
#{
string[,] menuItems= {"Clients", "<i class="bi bi-people-fill clients"></i>"};
}
<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
#menuItems[0,1]
<span class="menu-item-text">#menuItems[0,0]</span>
</a>
Is there a way to make HTML read the string as part of the code?

By default any text being emitted from the server is HTML-encoded. You can bypass this by using Html.Raw():
#Html.Raw(menuItems[0,1])
Note that this should be used with caution, because if you use this to output anything that's provided by user input or in any way editable by users then you are exposing your users to security risks.
This could be a good opportunity for you to investigate other ways to achieve the same functionality without this potential risk. For example, you could already have the markup in the view and use the dynamic data to show/hide the markup. Or not even rely on server-side code at all and style/change menu items client-side.

retriving data from html table

I have an html table that is filled from a database.
I have a column that have this 2 "buttons"
<a onclick="modifica()" href="#" title="modifica"><i class="fa fa-edit"></i></a>
<a onclick="delete()" href="#" title="elimina"><i class="fa fa-trash"></i></a>
P.S: fa fa-edit and fa fa-thresh are from Font Awesome.
anyway, when i click one of them, i need the function retrieve data from table and read the column ID, but with some tests i've done, i didn't get the result that i want.
someone can help me?
thanks.

There are a lot of possibilities. But if i understood your problem correctly you could print the ID in your row or directly to your function for every row.
<a onclick="modifica(<?php echo $row['id']; ?>)" href="#" title="modifica"><i class="fa fa-edit"></i></a>
Something like this. Or you could add a data value to your row with data-id="<?php echo $row['id']; ?>". Then use javascript so get the next parent data value. Then you have the ID and you can work with it.
Data Attributes:
https://www.w3schools.com/tags/att_global_data.asp
JQuery data:
https://api.jquery.com/data/
So i hope i understood your question correctly.

You will have to modify whatever code generates your HTML to either include the ID you need inside the called function, like:
onclick="modifica(2056)" - 2056 is whatever ID your modifica function requires to work
of add an id to the clickable elements:
<a onclick="modifica()" href="#" title="modifica" id="2056"><i class="fa fa-edit"></i></a>
and have modifica use javascript to read the ID of the calling element.
The same applies to the delete function as well.

2 ways:
1.- As suggested, if you have the chance to assign the row ID as an attribute to the buttons, you can pass that attribute with onclick method to your JS function.
2.- If you CAN'T assign the row ID to the buttons, then you can add some jQuery selectors to your JS function to retrieve the value:
<a onclick="modifica(this)" href="#" title="modifica"><i class="fa fa-edit"></i></a>
and in your JS file:
function modifica(button){
var id = $(button).parent().parent().attr("id");
//Do Something Else with ID
}
The first parent is <td> and the second is <tr>.

Twitter share custom text via API via twitter web intent - works only once

I've the following issue: I've build a quote generator (freecodecamp) and need to be able to share the quote via twitter. My approach was via Twitter web intent and the text is the data I receive via the API. It only works once.
HTML:
<p>Share the wisdom</p>
<a class="twitter-share-button" href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
JS:
<script>
function myFunction() {
var firstName = document.getElementsByName("firstname")[0].value;
var trumpAPI = "https://api.whatdoestrumpthink.com/api/v1/quotes/personalized?q="+firstName;
$.getJSON(trumpAPI, function(data, status){
document.getElementById("trump").innerHTML = data.message;
$('a[href="#"]').attr("href","https://twitter.com/intent/tweet?text="+data.message+"&hashtags=trump, quoteoftheday");
});
document.getElementById("trump").classList.add("border");
}
</script>
Could it be that the text parameter in the web intent is not dynamic? Any suggestion how to fix this? thanks in advance.

I have to guess a little bit because you didn't share your complete functionality, I assume what you do is this:
You have a button of some sort, clicking which will get another quote.
Clicking that button calls your myFunction().
If that's correct, then the problem is that your <a> element no longer has href="#" after the first time the function has run; the href is now the intent link. And because of that, $('a[href="#"]') no longer selects that link on the second call. If you use $(".twitter-share-button") instead, it should work.

How to update data attribute on Ajax complete

I'm using October CMS and in the framework I can make an AJAX call using the following HTML element:
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
Whenever this link is clicked on a favorite button fires off an update to a controller "onSavedeal". Updating the database works fine on the first click. However, after updating, the value for the "data-request-data" attribute isn't updated so the button does not work for subsequent clicks.
I need to make the link change so that "active:'0'" becomes "active:'1'". The resulting full element would be
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'1'">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
In the framework I can add another attribute called "data-request-success" which executes a javascript function (or code) up successful completion of the AJAX call. How can I make a function called "updateactive()" which would toggle the active value between 0 and 1. The final element should look like:
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'"
data-reuqest-success="updateactive();">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>

If you can safely identify this a element by attribute data-request having value onSavedeal, you would write the updateactive function as follows:
function updateactive() {
var newAttrValue = "deal_ID:'14779255',type:'local',active:'1'";
$('[data-request="onSavedeal"]').attr('data-request-data', newAttrValue);
}
Don't forget to correct data-reuqest-success to data-request-success.
UPDATE
If you have many a elements on the page, you can reuse same function like below. Check demo - Fiddle .
function updateactive() {
var clickedA = event.currentTarget,
newAttrValue = $(clickedA).attr('data-request-data').replace("active:'0'", "active:'1'");
$(clickedA).attr('data-request-data', newAttrValue);
}

Make change to your anchor tag this way
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'"
data-reuqest-success="updateactive(this);">
<i class="material-icons pink-text listfavorite">favorite</i>
Note the change updateactive(this);
Then in your jquery you can have the function definition this way.
function updateactive(element) {
$(element).attr('data-request-data', $(element).attr('data-request-data').replace("active:'0'", "active:'1'"));
}

googleweblight not executing OnClick JavaScript Function

Following JavaScript call function not working in googleweblight
<i class="fa fa-facebook"></i> Facebook ID
or
<a onclick="FBLogin()" href="#" class="btn btn-sm azm-social azm-btn azm-facebook"><i class="fa fa-facebook"></i> Facebook ID</a>
What may be issue? is it possible to fix it?
For a example
http://jsfiddle.net/zalun/Yazpj/1/ It will work,
but same link wont work in
googleweblight http://googleweblight.com/?lite_url=http://jsfiddle.net/zalun/Yazpj/1/

Javascript seems to be disabled in googleweblight, if you want to see in detail then you can look at your site by this
http://googleweblight.com/?lite_url=[your_website_URL]
example http://googleweblight.com/?lite_url=https://stackoverflow.com/
Well, you can opt out of it but in such case google will label your page in the search results to indicate to users that non-transcoded pages may take longer to load and may use more data.
You can find more details here
https://support.google.com/webmasters/answer/6211428?hl=en