Develop Reference

How can I use Ajax reload without breaking all jquery events?

I'm trying to reproduce the loading effect we can see on the google material.io website : when selecting a menu item, the content and url change, but the sidebar doesn"t move, as if only the content was changing..
can someone can explain me how to do this ? is it like the tehcnique described on css ticks tutorial "dynamic page replacing content" or something more like ajax ?
I have this code in html :
<div id="containerWrapper">
<div class="flex-row">
<div id="menu" class="flex-col-xs-12 flex-col-md-2 generator_menu">
<nav role="navigation" id="navigation" aria-label="Menu principal">
MY MENU HERE
</nav>
</div>
<div id="contentWrapper" class="flex-col-md-10">
<div id="guts">
<div class="flex-col-xs-12 generator_main">
MY CONTENT HERE
</div>
<div class="flex-col-xs-2">A sidebar dynamic TOC</div>
</div>
</div>
</div>
</div>
<footer></footer>
And the Ajax Code:
$("#menuList a").on('click',function(e){
e.preventDefault();
pageurl = $(this).prop('href');
$.ajax({url:pageurl,success: function(data){
$('#contentWrapper').html($(data).find('#guts'));
// Rerun Prism syntax highlighting on the current page
Prism.highlightAll();
return false;
}});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
$(window).bind('popstate', function() {
$.ajax({url:location.pathname,success: function(data){
$('#guts').html(data);
}});
});
My problem:
-All my jquery events are in a dedicated file, wrapped in a jQuery(document).ready(function($) {}.
-If I put my ajax code like this, everything works except the ajax call..If I wrap my ajax code in a jQuery(document).ready(function($) {}., ajax works but all my other jquery events are broken when I click on any menu item and reload the page.
So is there a simple trick to make ajax works together with others jquery functions ?

Ok, finally I followed an answer given here..
In a js file, I wrapped my ajax call in a jQuery(document).ready(function(){}/
In a separate file, I wrapped all my jquery code in a function (scroll functions, clicks on menu function, filters, show/hide functions etc.):
function initialise(){}
Then in this same second file, at the end, I throw initialize function when document is ready, and when Ajax is complete :
$(document).ready(function(){
initialise();
});
$(document).ajaxComplete(function () {
initialise();
});
Now everything looks fine..
If there is a better way, I'll be glad to learn more on this..

How to add jquery addClass() method to element ng-repeat AngularJS

I made a text editor summernote for an article, and after that I read it with modalbootstrap and angularJS ng-repeat in html element to get data from json api my php, its works.
but the problem with the article content is that there is an image and I want to add the 'img-fluid' class so that the image is responsive.
I have tried adding classes with the jquery addClass method to element html, and it works with code like this.
point assume example:
my script.js
$('img').addClass('img-fluid');
result element img without ng-repeat works.
<div class='container'>
<div class='onlyDiv'>
<p>
<img src='bla.jpg' class='img-fluid' <--works>
</p>
</div>
</div>
but if the img element with the ng-repeat directive doesn't work
results addClass() doesn't work.
<div class='container'>
<div class='divWithNgRepeat' ng-repeat='artcl.content | unsafe'>
<p>
<img src='bla.jpg' <--no class added>
</p>
</div>
</div>
please help me master, thanks

First, try change the "ng-repeate" to "ng-repeat". If that's not the problem, then the jQuery line may be running before than ng-repeat loop. In this case you need to use something like:
angular.element(document).ready(function () {
$('img').addClass('img-fluid');
});

yess bro , I have successfully solved the problem. as # symphonic's says jquery is more executed before the ng-repeat directive finishes loading the data. I tried the code below and it worked
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal("show");
});
$("#myModal").on('shown.bs.modal', function(){
$('img').addClass('img-fluid');
});
});

site preloader actually works?

The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance

Anyone know why my on-click isn't firing in this core-collapse component test?

I've tried to get my div to click a few different ways and it just doesn't seem to fire for some reason.. I may be a bit tired. I've literally just copied from the documentation and it won't work.
<div onclick="{{toggle}}">toggle collapse</div>
<core-collapse id="collapse">
test test test test
</core-collapse>
and the js
var collapseBlock = document.shadowRoot.querySelector('#collapse');
toggle: function testName () {
collapseBlock.toggle();
}
I think it's an issue with my expression? I have polymer.html imported and core-collapse imported as well. Any help would be appreciated! Thanks!
Bonus: if someone could explain how exactly the {{toggle}} knows to look at the function I have there that would be fantastic. Is it the label 'toggle'? This is actually probably the issue.. Haven't been able to really understand how exactly it binds to the js I have there from the dom.
edit: changed on-click to onclick, still not working

This is a more-complete example, showing you how to bind a click event to a function in a polymer-element.
<polymer-element name="x-collapse">
<template>
<div on-click="{{ toggle }}">toggle collapse</div>
<core-collapse id="collapse">
foo
</core-collapse>
</template>
<script>
Polymer('x-collapse', {
toggle: function() {
this.$.collapse.toggle();
}
});
</script>
</polymer-element>
<x-collapse></x-collapse>

Try this
<div onclick="testName();">Toggle collapse</div>
function testName(){
collapseBlock.toggle();
}

Why doesn't the following piece of jquery run?

I'm trying to fetch some html with jquery/ajax, load it into a div, then call the show method with the blind effect on it. But I can't figure out what's going wrong for the life of me.
$(document).ready(function() { // The relevant jQuery
$("#effect").hide(); // Make sure the div I'm going to show is not visible first off.
$("#foo").click(function(){ // foo is a button
$.ajax({url:"after.html", success:function(result){ // Grab the html I want. (just an <h1> tag)
$("#effect").html(result).show("blind", {direction: "horizontal"}, 400); // When I comment out this line it works, but with the exception of the id's to select it's exactly the same as in another working page.
alert("loaded after.html...");
}});
});
});
HTML:
<div class="narrow">
<p><input type="submit" id="foo"/></p>
</div>
<div id="effect" style="background-color:white; float:right; height:400px; width:400px;">
</div>
Without calling the $("#effect").html(result).show("blind", {direction: "horizontal"}, 400); line, everything runs fine. However, with that line it says Uncaught SyntaxError: Unexpected end of input in the console. (Chrome)
I was using this page as a reference when I ran into this problem.
What's going on here?

Blind effect is a part of JQueryUI. In the tutorial you shared, you can see that code. Are you sure that something like jquery-ui-1.7.2.custom.min.js is referenced on your page as:
<script type="text/javascript" src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>