angucomplete undesirable click event fires - javascript

Recently, I am implementing autocomplete on my search using angucomplete, now the desired output that I wish to achieve is that whenever I select one of the autocomplete suggestions by clicking the mouse, it would navigate to the desire url or let's say google.com for test purposes. The problem with code below is that when I click the textbox without selecting any suggestions, navToUrlByClick function will fire. Any suggestions and sorry for this kind of question since the writer just started to explore javascript. Thanks in advance!
This is my test.html code:
<div class="padded-row" ng-click="navToUrlByClick('http://www.google.com')">
<div angucomplete-alt id="ex5"
placeholder="Search projects"
pause="50"
selected-object="selectedProject"
remote-url="http://localhost:5000/"
remote-url-request-formatter="remoteUrlRequestFn"
remote-url-data-field="items"
title-field="subs_name"
minlength="1"
input-class="form-control form-control-small"
match-class="highlight">
</div>
</div>
And this is my app.js code:
$scope.navToUrlByClick = function(str){
if ((str != "") || (str != null))
{
console.log(str)
//$window.location.href = str;
}
}

I figure it out by using callback with the few lines of code below and added to my app.js
$scope.selectedProject = function(selected) {
if (selected) {
// window.alert('You have selected ' + selected.title);
$window.location.href = "http://www.google.com";
} else {
console.log('cleared');
}
};
Case closed!

Related

Sticky notes with local storage

I am using this codepen https://codepen.io/ravitadi/pen/CsIFL and I would like to add another field for the user to input a title for the note.
I am a javascript noobie and I can't seem to get it right. This is the function for adding notes. The full script is in the codepen.
function addNote(){
var usrInput = $('.txtBox').val();
//console.log(usrInput);
if(usrInput.length > 0){
console.log($(this));
$('#').removeClass('ntActv');
addtoSticky(usrInput);
cnclOvrly();
//console.log(notes);
}else{
}
}
function addtoSticky(note){
if(note.length > 0){
console.log(note);
createSticky(note);
localStorage.setItem('note_'+note.length, note);
}
}
function createSticky(text){
$('#stkyNts').append('<li class="box">'+text+'</li>');
}
Any help is highly appreciated.
Codepen
I tried to update following your requirement.
You should change way to save object and load object from localstorage.
storedNotes = JSON.parse(localStorage.getItem("notes"));
if(current == null) current = [];
current.push(JSON.stringify(note));
localStorage.setItem('notes', JSON.stringify(current));
https://codepen.io/viethien/pen/RdqKxM
In the modal, add another text box for title before the textarea.
<!-- add this -->
<input type="text" id="title" />
<!-- /add this -->
<textarea class="txtBox"></textarea>
Now you have to grab the value from the title. In the createSticky() function:
function createSticky(text) {
var heading = $("#title").val();
$('#stkyNts').append('<li class="box"><h3>' + heading + '</h3>'+text+'</li>');
}
And there you go:
For the extended functionality, try to change the way, heading is included in the local storage while setting and getting it. For doing so, you need to include the heading in the functions addtoSticky() and getStoredNotes().

React fetch() not working on mobile only

I'm an intern assisting on developing a simple landing page for our company. The main page is essentially a search bar, and as a user types if their query matches a credit union in our database, the name of that credit union is output below with a link to its page. Imagine a google-esque search bar.
This works great on desktop but for some reason, on mobile when a user types in a query, nothing comes up at all, even if they're typing something that most definitely exists in our database.
To see the site in action, it's http://mycuapp.com .
Here is the relevant HTML:
<Search></Search>
<div id = "results-bar" class="hidden"></div>
and the JS:
handleTyping(event) {
event.preventDefault();
event.stopPropagation();
const data = new FormData(event.target);
var query = event.target.value;
var url = "/search/" + query;
var i;
if (query.length >= 3) {
fetch(url, {
method: "GET",
}).then((value) => {
return value.json();
}).then((Response)=>{
var item = document.getElementById("results-bar");
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide';
}
for (i = 0; i < Response.payload.length; i++){
var displayName = Response.payload[i].displayName;
var cuURL = Response.payload[i].url;
if(document.getElementById("results-bar").innerHTML.indexOf(displayName) == -1){ //not yet displayed in search results
var result = "<div class = 'result'><a href='" + cuURL + "'><p>" + displayName + "</p></a></div>";
document.getElementById("results-bar").innerHTML += result;
}
console.log(Response.payload[i].displayName);
}
});
}
}
render() {
return (
<form className="" id="search-form">
<input onKeyUp={this.handleTyping} type="text" autoComplete="off" name="query" placeholder="Search your credit union's name to download the mobile banking app."/>
</form>
);
}
Any insight would be greatly appreciated, including any suggestions on how to debug the problem from an iPhone (bc when simulated with Chrome's developer tools there is no issue).
EDIT: Turns out the problem is the line "const data = new FormData(event.target);" FormData is incompatible with Safari, or something. Our lead programmer caught it. Once we got rid of that line everything works great! Thanks everyone for your help.
Seems like you are trying to use Response stream which is not fully supported on Mobile Safari.
https://developer.mozilla.org/en-US/docs/Web/API/Response
Alternatively you can use fetch polyfill which is supported in Safari 6.1+
https://github.com/github/fetch
FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData
Is not compatible with Safari Mobile.

Returning Rendered HTML from Chatbot

I am using the chatbot from liouh (https://github.com/liouh/chat-bot). When I attempt to return a URL, it gives me unrendered/raw HTML instead of a link. How can I return a rendered link given the Google scenario below? Thank you
function chatBot() {
// current user input
this.input;
this.respondTo = function(input) {
this.input = input.toLowerCase();
if(this.match('link to google'))
return "<a href='http://google.com'>Google.com</a>";
if(this.input == 'noop')
return;
return "I dont know the answer to '" + input + "'. You can teach me that via the link at the top of this page.";
}
this.match = function(regex) {
return new RegExp(regex).test(this.input);
}
}
It looks like in line 54 of index.js you need to change the code from
line.find('.text').text(text);
to
line.find('.text').html(text);
this will append the incoming reply as HTML instead of plain text.

Javascript stops working when I change the desired output

//THIS CODE WORKS PERFECTLY, IT PLACES A RECOMMENDATION IN A DIV (Suggestion) BASED ON LIGHT STATUS
function getIntLght(){
var textIntLght = document.getElementById("selIntLght").value;
var textDSL = document.getElementById("selDSL").value;
document.getElementById("intLght").innerHTML= "Internet light Status: " + textIntLght;
//recommend if trouble shooting script based on light status of DSL and Internet
if(textDSL=="Flashing/Off"){
document.getElementById("suggestion").innerHTML= "Consider NO Sync";
} else if (textDSL =="Solid" && (textIntLght=="Red/Amber" || textIntLght=="Off")){
document.getElementById("suggestion").innerHTML= "Consider NO ROUTE";
} else {
document.getElementById("suggestion").innerHTML="Consider WALLED GARDEN OR CONNECT NO BROWSE";
}
}
// TRYING TO MAKE CORRESPONDING DIV OPEN INSTEAD OF JUST POPULATING THE SUGGESTION DIV- BROKEN, DOES NOT WORK
// "if" works, but not "if else" or "else", even though the logic is the same as above and works there.
function getIntLght(){
var textIntLght = document.getElementById("selIntLght").value;
var textDSL = document.getElementById("selDSL").value;
document.getElementById("intLght").innerHTML= "Internet light Status: " + textIntLght;
//recommend if trouble shooting script based on light status of DSL and Internet
if(textDSL=="Flashing/Off") {
document.getElementById("noSync").style.display="block";
document.getElementById("noRoute").style.display="none";
document.getElementById("CNB").style.display="none";
} else if (textDSL =="Solid" && (textIntLght=="Red/Amber" || textIntLght=="Off")){
document.getElementById("noRoute").style.display="block";
document.getElementById("noSync").style.display="none";
document.getElementById("CNB").style.display="none";
} else {
document.getElementById("CNB").style.display="block";
document.getElementById("noSync").style.display="none";
document.getElementById("noRoute").style.display="none";
}
}
Please let me know if you see what I am missing… I can’t find my error
I did correct the typo in .style.display, but it is still not working.
Thanks for pointing that out, but something is still wrong.
You have a few typos, sytle instead of style
Have you tried using === for your if/else if statements? This link explains the difference between == and ===.
<html>
<body>
<input type="text" id="selIntLght"/>
<input type="text" id="selDSL"/>
<button onclick="getIntLght()">submit</button>
<div id="intLght"></div>
<div id="suggestion"></div>
<div id="noSync" style="display:none">No sync</div>
<div id="noRoute" style="display:none">No Route</div>
<div id="CNB" style="display:none">CNB</div>
<script>
function getIntLght(){
var textIntLght = document.getElementById("selIntLght").value;
var textDSL = document.getElementById("selDSL").value;
document.getElementById("intLght").innerHTML= "Internet light Status: " + textIntLght;
//hide divs initially
document.getElementById("CNB").style.display="none";
document.getElementById("noSync").style.display="none";
document.getElementById("noRoute").style.display="none";
//recommend if trouble shooting script based on light status of DSL and Internet
if(textDSL==="Flashing/Off"){
document.getElementById("suggestion").innerHTML= "Consider NO Sync";
document.getElementById("noSync").style.display="block";
} else if (textDSL =="Solid" && (textIntLght=="Red/Amber" || textIntLght=="Off")){
document.getElementById("suggestion").innerHTML= "Consider NO ROUTE";
document.getElementById("noRoute").style.display="block";
} else {
document.getElementById("suggestion").innerHTML="Consider WALLED GARDEN OR CONNECT NO BROWSE";
document.getElementById("CNB").style.display="block";
}
}
</script>
<html>

When selecting an item the header should not change

I have this script (I'm new to this, so I'm not very familiar with the terminology). Feel free to edit the question if you can rephrase it in a better way.
<script>
var counter=0;
var oldJSON = null;
setInterval(function() {
var mycounter=0;
$.getJSON('mydata.json', function(data) {
if(JSON.stringify(oldJSON) != JSON.stringify(data)){
$("#notifications").html("");
$("#notifications").append("<option style=display:none></option>")
$.each(data.items, function(i, v) {
counter= counter + 1;
document.getElementById('test').innerHTML=counter ;
$('#notifications').append('<option value="' + v.type + '">' + v.type +"->"+ v.text +"->"+v.pnr+ '</option>');
;});
}
oldJSON = data;
});
},2000);
</script>
It takes the data from a JSON file and appends it to #notifications which is a dropdown element.
What I'm trying to create is a Facebook type notification dropdown.
This is my html:
<div class="hello">
<select id="notifications" style="background-image:url(live_data.jpg);" ></select>
</div>
<div id="test" style="color:red;margin-left:90px;font-size: 15px;font-family: arial;"></div>
Now, as you may have seen, I appended a blank item to the dropdown so that the old data gets cleared out.
Now here lies the problem: when I clear this data, the first element comes onto the image(overlaps). I added a empty item for it(not a very good way, I know... here also suggestions are welcome). But the thing is when I select any of them it overlaps onto the image.
Any help or advice would do... thanks in advance.
I'm open to suggestions if there is any other way to do it

Categories