Hello I have problem in my project !
We have a Knowledge Base in prolog and we must make a web app to add,edit or remove rules from KB. My problem is when I add the rule (using html) in KB using this code:
addRule(_Request):-
format('Content-type: text/html~n~n'),
print_html([
'<html>
<head>
<link rel="stylesheet" type="text/css" href="/materialize/css/materialize.css">
<script src="/materialize/js/materialize.js"></script>
<title>Rules</title>
</head>
<body>
<h4>Εισαγωγή κανόνα</h4>
<form action="/addition" method="POST">
Δώσε τα δεδομένα :
<div class="input-field inline">
<input type="text" name="newRuleData" class="validate">
</div>
Δώσε τις προυποθέσεις :
<div class="input-field inline">
<input type="text" name="newRuleCon" class="validate">
</div>
Δώσε το αποτέλεσμα :
<div class="input-field inline">
<input type="text" name="newRuleResult" class="validate">
</div>
<button class="black-text btn waves-effect waves-light green" type="submit" name="action">ADD</button>
<br><br><br>
</form>
</body>
</html>'
]).
When i press ADD button goes here:
addition(Request):-
http_parameters(Request,[
newRuleData(RuleData,[default('NULL')]),
newRuleCon(RuleCon,[default('NULL')]),
newRuleResult(RuleResult,[default('NULL')])
]),
%προσθήκη max_ruleId
max_ruleId(MaxID),
NewMaxID is MaxID+1,
atom_concat(rid,NewMaxID,NewRuleId),
retract( max_ruleId(MaxID) ),
asserta( max_ruleId(NewMaxID) ),
%προσθήκη στα Rules
rules(List),
append(List,[NewRuleId],NewList),
retract(rules(List)),
asserta(rules(NewList)),
assertz((rule(NewRuleId,RuleData,Answer):- RuleCon,Answer=RuleResult)),
saveRules.
After, I go in my KB and i see this:
rule(rid15, '[LabValues,Saturation,Nitrate,Oligochaetes,Sediments,Hydrothio,Methanio,Substrates,SmellWater]', A) :-
'LabValues = nai, atom_number(Saturation,Sat), Sat>100',
A='Evales poli megalo koresmo'.
The rule must look like this:
rule(rid15, [LabValues,Saturation,Nitrate,Oligochaetes,Sediments,Hydrothio,Methanio,Substrates,SmellWater], A) :-
LabValues = nai, atom_number(Saturation,Sat), Sat>100,
A='Evales poli megalo koresmo'.
I want to remove the quotes but I can't.
EDIT
Currently using term_to_atom/2 to remove the quotes but it gives me this in my KB
rule(rid21, [_, _, _, _, _, _, _, _, _], B) :-
true,
atom_number(_, A),
A>100,
B='Evales poli megalo koresmo'.
Finally, I found solution !!!
%We take the request from Form
addition(Request):-
member(method(post),Request),!,
http_parameters(Request,
[
newRuleData(RuleData,[length>0, string]),
newRuleCon(RuleCon,[length>0, string]),
newRuleResult(RuleResult,[length>0, string])
]),
addNewRule(RuleData,"Answer",RuleCon,RuleResult),
format('Content-type: text/html~n~n'),
print_html([
'<html>
<head>
<link rel="stylesheet" type="text/css" href="/materialize/css/materialize.css">
<script src="/materialize/js/materialize.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Επιτυχία</title>
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper teal lighten-2">
WebApp της εργασίας 2
</div>
</nav>
</div>
<div class="container center">
<h4>Η εισαγωγή του κανόνα πέτυχε.</h4>
<br><br>
<a class="waves-effect waves-light btn-small" href="http://localhost:8000/update"><i class="material-icons left" >arrow_back</i>Back</a>
<a class="waves-effect waves-light btn-small" href="http://localhost:8000"><i class="material-icons left" >home</i>Home</a>
<br><br><br>
<h3>Μάνος Κουτουλάκης 4002</h3>
</div>
</body>
</html>'
]).
When I took the data from my page I use the addNewRule and here we make processes. the max_ruleId/1 and the rules/1 coming from my KB the first one have inside the sum of rules and the other one it's a list with all id's inside.
addNewRule(RuleData,RuleResultVariableName,RuleCon,RuleResult):-
%προσθήκη max_ruleId
max_ruleId(MaxID),
NewMaxID is MaxID+1,
atom_concat(rid,NewMaxID,NewRuleId),
retract( max_ruleId(MaxID) ),
asserta( max_ruleId(NewMaxID) ),
%προσθήκη στα Rules
rules(List),
append(List,[NewRuleId],NewList),
retract(rules(List)),
asserta(rules(NewList)),
atom_string(NewRuleId, SRuleId),
string_list_concat(
[
"rule(", SRuleId, ",", RuleData, ",", RuleResultVariableName,
"):-",
RuleCon, ",", RuleResultVariableName, "='", RuleResult, "'"
],
StringRule
),
term_string(Rule, StringRule),
assertz(Rule),
saveRules.
The predicate to concat the String:
string_list_concat([], S):-
S = "".
string_list_concat([H], S):- !,
string(H),
S = H.
string_list_concat([H|T], S):-
string_list_concat([H|T], "", S).
string_list_concat([H|T], Acc, S):-
string(H),
string_concat(Acc, H, Acc1),
string_list_concat(T, Acc1, S).
string_list_concat([], Acc, S):-
S = Acc.
Essentially I take the inputs from HTML (Using http_parametres/2), I union all inputs in one String list using string_list_concat
and finally to assert the rule into my KB I use term_string/2
to converse the string to term and the Quotes has gone. maybe my question should have been different.
Related
this is my whole thing I just want my comments to help Please.
<!DOCTYPE html>
<html>
<head>
<title>Forum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="pixel">
<br>
<br>
<div class="blackBox">
<p class="white">| <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/index.html">Home</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/textboxPhase.html">Textbox Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/breakoutPhase.html">Breakout Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/goatPhase.html">Goat Cage Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/forum.html">Forum</a> |</p>
</div><br>
<br>
<h1>Welcome to The "There is no Game" Forum</h1>
<div class="container">
<h2>Leave us a comment</h2>
<form>
<textarea id="" placeholder="Add Your Comment" value=" "></textarea>
<div class="btn">
<input id="submit" type="submit" value="Comment"> <button id="clear">Clear</button>
</div>
</form>
<div class="comments">
<h2>Comments</h2>
<div id="comment-box">
<ul>
<li>WELCOME</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
const field = document.querySelector('textarea');
const backUp = field.getAttribute('placeholder')
const btn = document.querySelector('.btn');
const clear = document.getElementById('clear')
const submit = document.querySelector('#submit')
// const comments = document.querySelector('#comment-box')
const comments = document.getElementById('comment-box');
// array to store the comments
const comments_arr = [];
// to generate html list based on comments array
const display_comments = () => {
let list = '<ul>';
comments_arr.forEach(comment => {
list += `<li>${comment}<\/li>`;
})
list += '<\/ul>';
comments.innerHTML = list;
}
clear.onclick = function(event){
event.preventDefault();
// reset the array
comments_arr.length = 0;
// re-genrate the comment html list
display_comments();
}
submit.onclick = function(event){
event.preventDefault();
const content = field.value;
if(content.length > 0){ // if there is content
// add the comment to the array
comments_arr.push(content);
// re-genrate the comment html list
display_comments();
// reset the textArea content
field.value = '';
}
}
</script><br>
<br>
<br>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</div>
</div>
</body>
</html
I know this code works but every time I reload it the comments disappear and I want it to save and all the code is too complex for my new code brain to understand. This is for my website and it's a basic wiki on how to beat there is no game, the old one. I need to turn this into my professor and wanted to add something extra but I want it so if I publish this the comment section isn't just a stupid gimmick.
When I add HTML into my Bootstrap v5 popover, it does not display the HTML in the popover. I believe that I have all of the correct options passed as described in the docs. Almost all of the results which I've gotten from searches to try and understand this issue deal with Bootstrap v4 and v3, so they aren't of use to me.
The popover all of the way on the right should have the switch affordance ("Toggle") appear below "Hello World" in the popover. The HTML code is present.
The code of the above tests centers around these 3 affordances:
<!-- Popover Works -->
<span class="fs-3 actions-link-style ai-more-horizontal" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Title" data-bs-sanitize="false" data-bs-html="true" data-bs-content="Hello World"></span>
<!-- HTML Switch Works -->
<div class='form-check form-switch'><input type='checkbox' class='form-check-input' id='customSwitch1'><label class='form-check-label' for='customSwitch1'>Toggle</label></div>
<!-- Popover with HTML Switch Does Not Work -->
<span class="fs-3 actions-link-style ai-more-horizontal" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Title" data-bs-sanitize="false" data-bs-html="true" data-bs-content="Hello World<br><div class='form-check form-switch'><input type='checkbox' class='form-check-input' id='customSwitch2'><label class='form-check-label' for='customSwitch2'>Toggle</label></div>"></span>
Have I missed something? Please let me know. Thank you!
Ok, reading and re-reading the Bootstrap v5 documentation's fine print finally led me to the solution.
Even though data-bs-sanitize="false" is a valid option that can be passed, per the documentation... the documentation also notes elsewhere that:
Note that for security reasons the sanitize, sanitizeFn, and allowList
options cannot be supplied using data attributes.
So... in order for the HTML to execute, because data-bs-sanitize="false" is ignored, one has to manually add non-default values to the Sanitizer whitelist which are used with the HTML code inside the popover. In my case, they were as follows:
var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
// To allow elements
myDefaultAllowList.input = ['type', 'checked']
myDefaultAllowList.label = ['for']
And now... it's working as intended. A lesson in sanitization.
I'm not sure if you initialize the popovers correctly as data-bs-sanitize="false" should allow any html used.
You are adding elements that are not in the bootstrap.Tooltip.Default.allowList object. So to allow the elements and attributes used in your code the following config options will work to render the popover as intended:
$(document).ready(function() {
const myDefaultAllowList = bootstrap.Tooltip.Default.allowList
// To allow elements and attributes on elements
myDefaultAllowList.input = ['type', 'checked']
myDefaultAllowList.label = ['for']
$('[data-bs-toggle="popover"]').popover({
allowList: myDefaultAllowList,
html: true
})
/* or just disable the sanitzer
$('[data-bs-toggle="popover"]').popover({
sanitize: false
})
*/
})
<link rel="stylesheet" media="screen" href="https://hopspin.com/testing/testing2.css">
<link rel="stylesheet" media="screen" href="https://hopspin.com/testing/testing3.css">
<link rel="stylesheet" media="screen" href="https://hopspin.com/testing/testing.css">
<div class="container">
<div class="row" style="padding-top: 15em !important;">
<!-- Body -->
<div class="col-lg-12 content py-4 mb-2 mb-sm-0 pb-sm-1 no-sidebar-padding-override">
<div class="row row-panel-hs">
<div class="row section-container-bottom row-section-hs">
<table class="table keep-table-fixed no-margin-bottom entities-table">
<tbody>
<tr>
<td>Work alone:
</td>
<td>
<!-- Popover Works -->
<span class="fs-3 actions-link-style ai-more-horizontal" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="" data-bs-sanitize="false" data-bs-html="true" data-bs-content="Hello World" data-bs-original-title="Title" aria-label="Title"></span>
</td>
<td>
<!-- HTML Switch Works -->
<div class="form-check form-switch"><input type="checkbox" class="form-check-input" id="customSwitch1"><label class="form-check-label" for="customSwitch1">Toggle</label></div>
</td>
<td>
</td>
<td>
</td>
<td>Fail combined:
</td>
<td>
<!-- Popover with HTML Switch Does Not Work -->
<span class="fs-3 actions-link-style ai-more-horizontal" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="" data-bs-sanitize="false" data-bs-html="true" data-bs-content="Hello World<br><div class='form-check form-switch'><input type='checkbox' class='form-check-input' id='customSwitch2'><label class='form-check-label' for='customSwitch2'>Toggle</label></div>"
data-bs-original-title="Title" aria-label="Title">...</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
Note:
You need to do more work in order to preserve the checked state of the toggle. As it is, the toggle reverts back to the initial state when closed and re-opened. Fixing this would be a different question.
I'm creating function where user will insert number of value. And additional div of input will appear based the number of value of user have input previous div.
example
Insert number of user : `2`
Additional input based on number of user input
name :
name :
If user put 3 there will be 3 name and if user change it into 2 there will be 2 name.
How do I fix it in order to achieve the example that I want.
$('#user').hide();
$("#user_num").change(function()
{
$("#user").remove();
let m = $(this).val();
for (var i = 0; i < parseInt(m); i++){
$('#user').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="info">
<div class="col-lg-12 mb-30">
<label><b><span style="color:#e60000;">*</span><i>Insert number of user </i></b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="number" placeholder="2" id="user_num" required >
</div>
</div>
<div class="col-lg-12 mb-30" id="user">
<label><b><span style="color:#e60000;">*</span><i> Name </i></b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="name" required >
</div>
</div>
</div>
You where close to achieve it with your attempt. You needed to implement an event handler that executes a function when the input field value is changed. You can achieve this with .on('change', function(){ // do something })
Every time the function is executed it clears the html inside <div id="inputs-container"></div> and the loop appends html code to that div n times.
Try the following snippet
$('#in').on('change', function(){
let n = $(this).val()
let html_code = 'name: <input value="" style="margin-top:5px"><br>';
$('#inputs-container').html('');
for (var i = 0; i < n; i++){
$('#inputs-container').append(html_code);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="info" style="margin:10px">
Insert number of users: <input id="in" value="" />
<div id="inputs-container" style="margin-top:20px">
</div>
</div>
Note: I updated the jQuery CDN to the latest one. You where using an
older version.
I was just searching around how to highlight code just like Text editors on website and I found some libraries and I liked highlight.js and started to play around with it.
But to my sense it worked well except for the <input/>tags and custom react component tags doesn't get rendered well.
I followed the documentation and implement the code in following manner:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/night-owl.min.css">
<div class="code-container" style="margin: auto; width: 50%;">
<pre><code data-language="html">
import React, { Component } from 'react'
import './reg-style/Credentail.css'
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
export class Credential extends Component {
continue = e => {
e.preventDefault();
this.props.nextStep();
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
render() {
const { values, handleChange } = this.props;
return (
<pre>
<code data-language="html">
<div>
<Helmet>
<body className="form-bg-col"></body>
</Helmet>
<div className="login">
<div className="reg-container">
<button onClick={this.back} className="col-form-prev"><i class="fa fa-chevron-left"></i></button>
<div className="user-detail email">
Email:
<input onChange={handleChange('Email')} defaultValue={values.Email} type="email" placeholder="Enter your Email"/>
</div>
<div className="user-detail ">
Phone:
<PhoneInput
onChange={handleChange('Phone')} defaultValue={values.Phone}
displayInitialValueAsLocalNumber
placeholder="Enter phone number"
defaultCountry="IN"
/>
</div>
<div className="user-detail username">
Username:
<code><input onChange={handleChange('Username')} defaultValue={values.Username} type="text" placeholder="Select your unique Username" /></code>
</div>
<div className="user-detail password">
Password:
<input onChange={handleChange('Password')} defaultValue={values.Password} type="password" placeholder="Choose your Password" />
</div>
<button onClick={this.continue} className="col-form-next"><i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</code>
</pre>
)
}
}
export default Credential
</code></pre>
</div>
and result was as following:
What should i do to rectify these issues?
Thanks...
All the HTML inside your pre/code block HTML needs to be properly escaped to avoid code injection.... This is just how HTML works.
Bad (this is actual HTML and will be rendered by the browser):
<pre><code>
<strong>Hey I'm HTML</strong>
</code></pre>
Good (now it's just text [when rendered]):
<pre><code>
<strong>Hey I'm HTML</strong>
</code></pre>
[Disclaim: I'm the current Highlight.js maintainer.]
I have a webbrowser control (name: WB) in my VB .net form.
I have loaded a webpage in webbrowser. Here is the sample html:
enter code here
<script type="text/javascript">
Sys.WebForms.PageRequestManager._initialize
('ctl00$ContentPlaceHolder1$ScriptManager1', 'form1',
['tctl00$ContentPlaceHolder1$UpdatePanel1',
'ContentPlaceHolder1_UpdatePanel1'], [], [], 90, 'ctl00');
</script>
<div class="row">
<div class="control group alternating">
<h2>Results</h2>
<div id="ContentPlaceHolder1_UpdatePanel1">
<div class="row">
<a id="ContentPlaceHolder1_Repeater1_LinkButton1_0"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1$ctl00$LinkButton1','')">
<strong>A. Bleakley Chandler, MD</strong></a><br />
Georgia Medical College<br />Augusta, GA, USA
</div>
<div class="row">
<a id="ContentPlaceHolder1_Repeater1_LinkButton1_1"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1$ctl01$LinkButton1','')">
<strong>A. Kyle Mack, MD</strong></a><br />
Ann and Robert H. Lurie Children's Hospital of Chicago<br />
</div>
<div class="row">
<a id="ContentPlaceHolder1_Repeater1_LinkButton1_2"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1$ctl02$LinkButton1','')">
<strong>A. Lawrence Ossias, MD</strong></a><br />
Mount Sinai NYC<br />
</div>
<div class="row no-shading">
<div class="pagination-arrows right">
<span>
1 of 100</span>
<a id="ctl00_ContentPlaceHolder1_Repeater1Prev" class="aspNetDisabled ir
prev">prev</a>
<a id="ctl00_ContentPlaceHolder1_Repeater1Next" class="ir next"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1Next','')">next</a>
</div>
</div>
</div>
Now I want to click on the first element of Repeater control. My InvokeMember code:
Dim pLink As HtmlElement = WB.Document.GetElementById
("ContentPlaceHolder1_Repeater1_LinkButton1_0")
pLink.InvokeMember("click") 'doesn't work
But due to some unknown reason, the click doesn't fire inside this repeater control. Other links in the page works fine with "invokemember("click")"
like the following one :
Dim pLink As HtmlElement = WB.Document.GetElementById
("ctl00_ContentPlaceHolder1_Repeater1Next")
pLink.InvokeMember("click") 'Works fine..
I tried GeckoFx browser control (geckoanchorelement.click), this did not work. I also tried to send MouseClick thru postmessage api - this also failed.