jquery .append() working then disappearing? - javascript

im working on a Wikiviewer for FreeCodeCamp and i've run into a strange issue.
I have just a basic example running right here (it aint pretty at all right now, just proof of concept):
http://codepen.io/msmith1114/pen/peBKxM?editors=1111
im appending here(in the JS code, there isn't very much):
$("#links").append('<li>' + arrayName[0] + '</li>');
$("#links").append('<li>' + arrayName[1] + '</li>');
$("#links").append('<li>' + arrayName[2] + '</li>');
})
So this really has 2 issues (and if you try it with console open you'll see)
1st Main issue: The list will show up (3 links) and then disappear...which makes no sense. jquery.append() should leave them there as far as Im aware, since im appending them to the in my html section
2nd issue: It seems like sometimes getJSON will not return anything. I thought wrapping my statements in the .done() section would make sure not to do anything until the Wikipedia API has returned everything would work but sometimes you just don't get anything back. Is this a WikiAPI problem or something else? (BTW if it doesn't work, just keep typing in "cat" or something in the searchbox and hit search again, it'll eventually work until you run into problem 1 above).
Thanks. Im still learning JS/Jquery so im a bit puzzled why this won't work.

The first issue is because you've hooked to the click of the submit button. This doesn't stop the form submission, hence the page gets reloaded. Use the submit event of the form element instead and be sure to call preventDefault() on the provided event:
$(".form-inline").submit(function(e) {
e.preventDefault();
// the rest of your code here...
});
As for the second issue, it could be a limiting issue. Without seeing an error it's going to be impossible to give you a definitive answer

Related

*ngFor angular 2 when creating tabs - Expression has changed after it was checked

I'm using the tab project explained here: Tabs Project
Everything else but my issue works perfectly.
The only thing that doesn't work for me, at the moment, is applying *ngFor when creating tabs.
I know that the 2nd-phase checking by angular detects changes, and he's right, the tabs might be adding while the 2nd-phase check is in progress.
What I want to do is to try and still make it work, it's super important to me to use *ngFor within the tabs selector.
Provided is a Plunker code demonstrating the crash and what I'm trying to achieve.
Plunker Code
Important to say, Ive looked into
Here
and I understand that its only on debug mode and what the answerer said, though it was a year ago.
Almost the same answer, still not helpful
An ugly work around
In Addition
Unlike the Plunker which able run the code with errors in the console (that's the explanation of the issue), I cant even switch tabs in my project, but that's a normal behavior, I don't want bad code.
Unfortunately, I cant share my real code because its for my work basically, but I can provide more data if needed, though it is based almost 100% from the Plunker and the project I provided in the beginning of the issue.
.
One solution is to wrap your "zone" code with setTimeout (other methods for triggering change detection manually will also work)
if(activeTabs.length === 0) {
setTimeout(()=>{
this.selectTab(this.tabs.first);
},0);
}
Full plunker: https://plnkr.co/edit/UVfiJFYexgua2HfPe0Lw?p=preview
In order to fix the issue you need to remove the code for setting the first tab to active from your ngAfterContentInit() method. This code is causing the issue:
if(activeTabs.length === 0) {
this.selectTab(this.tabs.first);
}
I assume that the error pops up because change detection requires that the DOM is stabilized after one run, and your call in the ngAfterContentInit() would require anothed pass of CD to reflect the new tab.active value in the DOM.
What you could do instead is set the first element in your *ngFor to be active by default. Something like:
<tab *ngFor="let item of ['1','2']"; let index = index" [active]="index == 0"...
EDIT: Seems you can also use the first local variable (haven't tried it). See this plunkr

FullCalendar plugin dayClick not working

I've been trying to get the dayClick in the FullCalendar plugin to work, but when I click nothing is happening. Can't figure out what it is I'm doing wrong. I click on a day, but no alert message. jsfiddle below. What am I doing wrong.
http://jsbin.com/bicawa/2/edit
I don't really know this library but you had two non-related issues in your code:
The moment script tag was placed before jQuery, my guess it should be placed after.
You had four slashes in your moment src (i.e. src="https:////...")
After fixing these two issues I got the console.log to work, but for some reason the alert() still wasn't working.
alert is turned off in JSBin. You shouldn't debug with alert because it stops code execution. While JSBin is a great tool for building quick samples, it makes debugging harder.
And as #idoberko2 says: You should put jQuery as first included script.
Here is a working JSBin

Cloning a DIV with multiple inputs in Jquery Mobile

I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.

FancyBox Jquery Null Error - Strange issue

I am experiencing a very strange issue i am hoping someone can answer (its kind of broad, but i will explain it my best), code works on local page when opened, but as soon as the same page is uploaded it throws an error. Two others have also looked at this, resulting in more confusion.
I downloaded FancyBox to use the inline feature to pop up a user form via href link, instead of taking the user to an additional page.
You can see the "stock" fancy box here:
1 fancyapps.com/fancybox/demo
Under various options, Inline is what i am using.
I didnt need all of the other features that came with FancyBox so i stripped the page to the following, which works just fine:
2 *Fancy Box Demo Stripped to Inline Feature only*
So then, i applied this code to our sandbox copy of the page to implement:
3 *Sandbox Copy with Fancy Box inline feature added to "make offer" link*
It stops working! There are no conflicts with other javascript on the page, and the only difference is that it has a couple of color .css changes, all .fancybox was named to .ptroffer and that the css code is not inline on the page (which wouldn't cause this error anyway).
This same page, opened locally works beautifully - upload and it throws error.
SCRIPT5007: Unable to get value of the property 'ptroffer': object is null or undefined
<script type="text/javascript">
$(document).ready(function() {
$('.ptroffer').ptroffer();
});
</script>
Works fine with link #2, and with link #3 locally, but with #3 uploaded it throws error.
Please!
Something in your code somewhere is overriding $. If you change that "ready" handler to call
jQuery('.ptroffer').ptroffer();
you won't get that error. However, things may not work; I think that an older version of jQuery is being imported by something (1.3!), which is bad.
edit oh I see, something's pulling in Prototype. You've got a regular script soup going on there, and things are going to be unpredictable and bizarre until you get that straightened out. Probably somewhere in there something's calling jQuery.noConflict(), but that "ready" handler you're adding isn't written to expect that. Whatever code that's expecting jQuery 1.3 may be in for a surprise also.

Chrome problems

I have a few annoying problems.
The thing is, that when I am looking with Firefox every thing work perfect, after I try it with Chrome, sometimes happens that the code appears one web page (it is not all the time).
So, it appears in input text it display " />" or some piece of code of java script, which is written inside input tag.
The web page is: www.kalahoo.eu (do not try it in English )
In this picture you can see the problem:
http://rhc.si/slike/problem.png
Thank you very much for you help!!!
Can you post a link to the exact page with this error?
Either way, I would imagine that if you use the Chrome developer tools, you should get pointed in the right direction. Might want to give that a try.
You seem to be improperly escaping code that's making the HTML end before the rest of the attributes are read.
Check the spot in the code where its doing that, its probably a bad ' or " or even a >.

Categories

Resources