Outer container 'null' not found. - containers

used jssor slider , i have some pages with same jssor slider , some pages are working fine , but some pages comes Outer container 'null' not found. bug , can any one help on this ?

I had a similar problem, so did some digging to see what the issue was.
The setup starts with the initial call, here's the snippet from the demo site
http://www.jssor.com/development/index.html
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
which, among setting up all kinds of utility functions- more importantly does this
function JssorSlider(elmt, options) {
var _SelfSlider = this;
...
// bunch of other functions
...
$JssorDebug$.$Execute(function () {
var outerContainerElmt = $Jssor$.$GetElement(elmt);
if (!outerContainerElmt)
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
});
}
so at this point, it's trying to collect the string you passed, which is the elmt variable- which is for what? Well let's take a look at that $GetElement function in jssor.js
_This.$GetElement = function (elmt) {
if (_This.$IsString(elmt)) {
elmt = document.getElementById(elmt);
}
return elmt;
};
So, really, what it comes down to is this line for finding the element.
elmt = document.getElementById(elmt);
So the base of this error is
"We tried to use your string to find a matching ID tag on the page and it didn't give us a valid value"
This could be a typo, or another line of code modifying/removing the DOM.

Note that there are some scripts try to remove or modify element in your page.
Please right click on your page and click 'Inspect Element' menu item in the context menu.
Check if the 'outer container' is still there in the document. And check if there is another element with the same id.

Check if "Slider1_Container" is present or Used.
In my case, I didn't have it in my html, but still I had added the js.
Removing js resolved my issue.

Related

*ngIf or [hidden] not working correctly

I'm trying to allow for hiding of certain sections of the project I'm working on via user toggle. It saves in the database and gets pulled when the page is loaded in the constructor using the following code
this.http.get(`api/section/get/${this.id}`, this.id).subscribe(res => {
this.section = res.json()[0];
this.sect = res.json();
console.log(this.section);
this.hideIntro = this.sect[0].hideIntro;
this.hideMainVideo = this.sect[0].hideMainVideo;
this.hideHandout = this.sect[0].hideHandout;
this.hideQuiz = this.sect[0].hideQuiz;
console.log("Hide Intro = " + this.hideIntro);
console.log("Hide Main = " + this.hideMainVideo);
console.log("Hide Handout = " + this.hideHandout);
console.log("Hide Quiz = " + this.hideQuiz);
});
The HTML is as follows...
<div class="row classMainBackground col-md-12" *ngIf="!hideIntro">
...content...
</div>
For some reason, no matter what I do, whether I change it to *ngIf="hideIntro == false" or even use [hidden]="hideIntro", it is not working.
Even the console logs in the .ts file show up correctly. Is there a reason why this is not working for me? I've used it in other positions and it works fine there...
Does it have something to do with assigning it in the constructor or something?
Thanks in advance!
Angular change detection runs in response to use interaction with the component. If values are updated outside of that event handling (such as after an HTTP request), you need to manually tell the component that it has changed.
constructor(private changeDetector: ChangeDetectorRef){}
this.http.get(`api/section/get/${this.id}`, this.id).subscribe(res => {
[...]
this.changeDetector.markForCheck();
})
More in depth reading: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
I ended up solving the problem by using {{!section.hideIntro}} in the HTML instead of trying to define a new variable to pass that boolean to.
I believe the answer was a combination of what #Vlad274 and #ConnorsFan were mentioning.
the HTML was returning an [object object] for {{hideIntro}} and it seems like there's a delay between the assigning the new value data from the GET response before the DOM actually loads.
Grabbing the data right from the GET respone variable ended up doing the trick.

element.addEventListener not adding listener

So I have an array of strings that will turn into buttons,
//At start
function acceptSuggestion() {
console.log(`clicked`)
console.log(this.textContent);
}
//Else where
suggestions.couldBe.innerHTML = ``;
list.suggestions.forEach(function (item) {
let button = document.createElement(`button`);
button.textContent = item;
button.addEventListener(`click`, acceptSuggestion);//before append
button.style = `text-align:center; width:50%`;
suggestions.couldBe.appendChild(button);
button.addEventListener(`click`, acceptSuggestion);//after append
suggestions.couldBe.innerHTML+=`<br>`;
});
It creates the buttons fine
But clicking them does nothing.
Why is this? I know I have the event right cuz of this: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
If it matters, I am using electron.js to create an webpage like application, and not a browser.
The reason this is happening is because of this line:
suggestions.couldBe.innerHTML+="<br>";
What is happening is your Browser element is generating all new fresh HTML each loop because of the += on the innerHTML.
Basically in pseudo code:
var temp = suggestions.couldBe.innerHTML + "<br>;
suggestions.couldBe.innerHTML = temp;
This causes your element that was added via the suggestions.couldBe.appendChild(button); to be converted to html, then re-parsed and all new elements created from HTML each iteration of the loop. Because your Button event handler was created in JS; it is lost when it recreated the button from the HTML version.
You want to do this either all via JS; not mixing it. So my suggestion would be to change this line:
suggestions.couldBe.innerHTML+="<br>";
to
suggestions.couldBe.appendChild(document.createElement('br'));

detecting and hiding dynamically creating div after a specific seconds (not onclick)

i have a dynamically generating div which is not in the time of loading. It is generating later in the document. So how can i target that div and hide it after specific time. The div is as follows:
<div class="message-sent">Your Message has been sent</div>
Important: I refer so many articles but everyone is talking about 'onclick'. I don't want click event. I just want hide this div when it is appearing in the docuemnt. Thanks in advance!
you can add a style display:none.
you can add the style after time out (3000ms) like so:
setTimeout(function(){
document.getElementsByClassName("message-sent")[0].style.display="none";
}, 3000);
note: it is better if you use an id instead of a class to identify your div.
You should try looking into the setTimeout function.
Also if that div is the only member of the DOM-tree that has that class, use an ID. It's better IMO.
Anyway, assuming you want to hide every member of the message-sent-class,
it goes something like this:
setTimeout(function(){
$('.message-sent').hide();
}, 2000)
In which the 2000is the variable that indicates the time (milliseconds)
You can try DOMNodeInserted,
$(document).bind('DOMNodeInserted', function(event) {
var element = document.getElementsByClassName("message-sent"); // get all elements with class message-sent
var lastchild = element[element.length - 1]; // get the last one (others are hidden)
if(lastchild != null){
lastchild.style.visibility = 'hidden'; // set visibility to hidden
}
});
Working demo
Hope helps,

Show different default page depending on stored value

I am trying to make an windows store app where the default page (first page that comes up when app loads) changes depending on stored value.
I have following files
- js
|- default.js
- default.html
- page_A.html
- page_B.html
default.js has the following code:
if (localStorage["value"] == undefined || localStorage["value"] == "pageA") {
localStorage["value"] = "pageA";
//WinJS.Navigation.navigate("page_A.html");
window.location.assign = "page_A.html";
} else {
localStorage["value"] = "pageB";
//WinJS.Navigation.navigate("page_B.html");
window.location.assign = "page_B.html";
}
WinJS.Navigation code does not work at all. So I tried using window.location and what's happening is instead of loading the actual page, it loads an empty page as shown below.
I tried using both href and assign for windows.location object. What's interesting is that it seems like href and assign loads the page because if I have page_A/B.js associated with pageA/B.html and have a simple console.log statement, then the log statement does get logged, but it does not render the page.
Any ideas? I've been stuck for a while.
Try putting your default.js at the root of your project, next to page_A.html and page_B.html, or, and I don't know if this works, you can try calling those pages with ..\page_X.html.
Also, you can add an error handler function to your navigate in case there's something else going on that you're not seeing.
WinJS.Navigation.navigate('page_A.html', {}).then(function () {
// it worked!
}, function (err){
// something went wrong
});

GetJSON and using a Show More link

I'm using getJSON to get data from the facebook pages api, and it works just fine, using this code:
$(document).ready(function(){
$.getJSON('url',function(json){
$.each(json.data,function(i,fb){
var output='';
//here I add to output, as this example line:
output += '<div"><a href="http://www.facebook.com/profile.php?id='+fb.from.id+'>'+fb.from.name+'</a>';
$("#results").append(output);
});
});
However, what I'd like to do is similar to what facebook does in it's social plug in where it starts off with 5 entries and has a Show More link, which when clicked, brings in 5 more entries.
Is there a way to do this by altering the code I have?
Thanks
Well, sure there is. Do you want to fetch the other results when a user clicks the "more link" to save bandwidth or is it OK to fetch it at the same time? (async vs sync)
This answer considers the bold text:
output += '<div' + (i >= 5 ? ' style="display: none;"' : '') + '><a href="http://www.facebook.com/profile.php?id=' + fb.from.id +'>'+fb.from.name+'</a></div>';
Oh, and check that line in your code, you had a syntax error and an unmatched div. Also you should have quotation marks around your HTML element's attributes.
For showing the links when the more link is clicked you could do something like:
$('.more').click(function() {
$(this).hide();
// Find the closest ancestor which is a parent of both
// the more link and the actual results list
var $parent = $(this).closest('.parentSelector');
$('.listSelector', $parent).children().show();
return false; // Don't follow the link
});
The parts with the parent stuff above is for the case when you have multiple such results list on the same page and you need to separate them. If you don't need it, here is a simpler variant:
$('.more').click(function() {
$(this).hide();
$('#results').children().show(); // Show all other list items
return false; // Don't follow the link
});