MVC3 .net issue to show loading image when page loads - javascript

I'm pretty new to the MVC3 .net programming & recently in one of my internal projects I'm trying to implement a functinality where to display a loading image while the page is being loaded. (using jquery function calls.)
Issue:
If i browse the default URL as we define in the route mapping. The image is not getting loaded but i can see all the styles getting populated on the page. But if i navigate to same page using the hyper link defined on the webpage the image is getting loaded as expected. I'm not sure what I'm missing here. It is same case for jquery load & jquery-ajax request/response functions (default navigation is not working while the hyperlink navigation is working).
Links:
http://testserver/sitename --> this link uses default route where the image is not loading.
http://testserver/sitename/ --> this is a hyper link on the webpage defined as below where the image is loading as expected.
#Html.ActionLink("menu_item_1", "Index", "Home", null, new {#class = "menu"})
Both links are calling the same controller & redirecting to index view page.
Code:
<style type="text/css">
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('content/themes/base/images/preloader_8.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
</style>
<script src="#Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$("#loader").fadeOut("slow");
});
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loader").show();
}).ajaxStop(function () {
$("#loader").hide();
});
});
</script>
And I have following tag defined in the body of index/home page,
<div id="loader"></div>
route mapping in my config file: (I don't think there is an issue here, because i can see the transparency style but not the defined image(preloader_8.gif).)
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/", // URL with parameters
new { controller = "Home", action = "Index"} // Parameter defaults
);
}

Related

sveltekit adds new page on top of old one

I just got a really unexpected bug in my sveltekit application and I can't find anything online talking about it
I have a normal sveltekit application but instead of hydrating the new code when navigating to a new page, it just adds the new code on top of the old one, when i refresh the page it removes the old code (from the previous page)
Edit: after a little bit more exploring I realized it only happens on one page, what part of my code could make this happen?
I had the same issue when having a page loading indicator on SvelteKit for internal navigating. Any page DOM modification, to display the loading indicator during the page navigating, caused the paged appearing twice error. The workaround was to not modify the page during the navigating and use only CSS to display, animate and hide the loading indicator.
Here is my loading indicator code and Here is my documentation regarding the issue. I am not sure if this an internal bug in SvelteKit, so I did not file any bug reports, as I do not have a clean repeatable example. You can also see the fixed page loading indicator on the action on this page if you click any of the blockchains.
<script>
/**
* Svelte does not give a load indication if you hit a link that leads to a page with slow load() function.
* Svelte uses internal router, not server-side loading.
* Thus, we need to manually give some indication in the user interface if the loading takes more than a blink of an eye.
*
* The component is originally made for https://tradingstrategy.ai
*
* Based on the original implementation https://github.com/shajidhasan/sveltekit-page-progress-demo by Shajid Hasan.
*
* As this component is absolutely position, you can put it at any part of your __layout.svelte.
*/
import { onDestroy, onMount } from 'svelte';
import { writable } from 'svelte/store';
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const navigationState = writable();
const progress = tweened(0, {
duration: 3500,
easing: cubicOut
});
const unsubscribe = navigationState.subscribe((state) => {
// You will always get state=undefined
// event on the server-side rendering, so
// safely ignore it
//console.log("The loading state is", state);
if (state === 'loading-with-progress-bar') {
progress.set(0, { duration: 0 });
progress.set(0.8, { duration: 5000 });
} else if (state === 'loaded') {
progress.set(1, { duration: 1000 });
}
});
onMount(() => {
// progress.set(0.7);
});
onDestroy(() => {
unsubscribe();
});
</script>
<!-- See the (little) documentation of special SvelteKit events here https://kit.svelte.dev/docs#events -->
<svelte:window
on:sveltekit:navigation-start={() => {
// If the page loads fast enough in the preloading state,
// never display the progress bar
$navigationState = 'preloading';
// Delay the progress bar to become visible an eyeblink... only show if the page load takes too long
setTimeout(function() {
// After 250ms switch preloading to loading-with-progress-bar
if($navigationState === 'preloading') {
$navigationState = 'loading-with-progress-bar';
}
}, 500);
}}
on:sveltekit:navigation-end={() => {
$navigationState = 'loaded';
}}
/>
<!--
Make sure the container component is always in the DOM structure.
If we make changes to the page structure during the navigation, we get a page double render error:
https://stackoverflow.com/questions/70051025/sveltekit-adds-new-page-on-top-of-old-one
Not sure if this is a bug or a feature.
Thus, make sure any progress animation is done using CSS only.
-->
<div class="page-progress-bar" class:loaded={$navigationState === 'loaded'} class:preloading={$navigationState === 'preloading'} class:loading={$navigationState === 'loading-with-progress-bar'}>
<div class="progress-sliver" style={`--width: ${$progress * 100}%`} />
</div>
<style>
/* Always stay fixed at the top, but stay transparent if no activity is going on */
.page-progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0.5rem;
background: transparent;
z-index: 100;
opacity: 0;
transition: opacity 0.5s;
}
/* After transitioning from preloading to loading state, make the progress bar visible with CSS transition on opacity */
.page-progress-bar.loading {
opacity: 1;
transition: opacity 0.5s;
}
.progress-sliver {
width: var(--width);
background-color: var(--price-up-green);
height: 100%;
}
</style>
I also saw this issue with the transition directive. The new page loads while the exit animation is playing. I used local transitions to solve this.
https://svelte.dev/tutorial/local-transitions

Using croppie to crop images without jquery

I am trying to add an image cropper to a website I am working on. The example I am basing it on is here:
https://jsfiddle.net/Twisty/afb76b7f/8/
The JS panel claims it is plain javascript, but it uses JQuery too ( if I am not wrong, not familiar with it at all ).
I am trying to remove it, to keep the website as easy to maintain as possible, but I am getting an error.
HTML:
<div id="page">
<div id="demo-basic">
</div>
</div>
CSS:
#page
{
background: #FFF;
padding: 20px;
margin: 20px;
}
#demo-basic {
width: 200px;
height: 300px;
}
JS
$(function() {
var basic = $('#demo-basic').croppie ( {
viewport: {
width: 150,
height: 150
}
});
basic.croppie('bind', {
url: 'https://i.imgur.com/xD9rzSt.jpg',
});
});
So, from what I understand, the first $( function () ) can be simplified by calling the onLoad method, and $('demo-croppie' ) can be simplified by using document.getElementById ( 'demo-croppie' )
So, the page imports the croppie javascript files
croppie.js
croppie.min.js
And tried to simplify the script like this ( onLoad event of page body )
var basic = document.getElementById('demo-basic').croppie({
viewport: {
width: 150,
height: 150
}
});
basic.croppie('bind', {
url: previewPictureSource,
});
But I get a reference error:
ReferenceError: croppie is not defined
I cannot find the croppie function anywhere, or understand how to associate it to an object.
Is there an obvious solution to this problem?
I am also happy to try any other library which crops image with a square resulting image, if anybody has more to suggest
You cannot call .croppie() on basic because you initialized it using VanillaJS. However, you can call .bind() on it directly:
basic.bind({
url: previewPictureSource
});
The documentation specifies that you can interact with a Croppie object in the following two ways:
// with jQuery
$('#item').croppie(method, args);
// with VanillaJS
croppieObject.method(args);
Check out the documentation here: https://foliotek.github.io/Croppie/

ERROR Error: Uncaught (in promise): invalid link: SosPopPage

I am coding a SOS page, when I click the button that I want it showing a popup page like this. Then user can choose phone number.
sos.html page
<button ion-button color="light" (click)="openSosPop()">Call</button>
sos.ts page
openSosPop() {
this.openModal('SosPopPage');
// let contactModal = this.modalCtrl.create(SosPopPage);
// contactModal.present();
}
openModal(pageName) {
this.modalCtrl.create(pageName, null, { cssClass: 'inset-modal' })
.present();
}
sos.css page
ion-modal.inset-modal {
// transparent black background overlay
background-color: rgba(0, 0, 0, .5) !important;
transition: opacity .25s ease-in-out;
padding: 20vh 10vw;
}
I am not using lazy loading
If you are not using lazy loading, it is not an IonicPage.
Adding IonicPage decorator allows you to use string names to handle pages.
This will automatically create a link to the MyPage component using the same name as the class, name: 'MyPage'. The page can now be navigated to by using this name.
Since you are not lazy loading, you cannot use a string to navigate or create modals and popups. You have to use the actual page/component.
Import the page.
import <path_to_page>;
this.openModal(SosPopPage);//create the modal.

Gigya Socialize ShareBar API get provider name on click providers

I am using the Gigya Socialize ShareBar API in my project. I want to get the Provider name on any provider click in sharing popup.
I can't use onSendDone function ref in the project. Is there callback to get the provider name on click it?
Here is the Gigya Documention link: http://developers.gigya.com/display/GD/socialize.showShareBarUI+JS
You can also use the onShareButtonClicked event to do something with the name of the provider. Note that this will not work for Native login buttons (Google/Facebook on mobile) but if you are doing on the web then this should do what you need. I am attaching a working example (requires a Gigya API key on the page).
// Create a div for the widget (or use an existing div on your page)
var newShareDiv = document.createElement('div');
newShareDiv.id='ShareDiv';
newShareDiv.setAttribute('style', 'position: absolute; z-index: 1000; margin: 0px auto; margin-top: 10px !important; width: 200px; height: 20px; background-color: yellow; border: 2 px solid red;')
document.body.appendChild(newShareDiv);
//
// Create the UserAction for sharing
var gigyaShareAction = new gigya.socialize.UserAction();
gigyaShareAction.linkBack = 'https://demo.gigya.com';
gigyaShareAction.userMessage = 'Check this out!';
//
// Define shareButtons
var shareButtons = 'Facebook, Twitter, LinkedIn, Messenger, share';
//
// Define the Share Bar Plugin's params object
var shareParams = {
userAction: gigyaShareAction,
showCounts: 'none',
containerID: 'ShareDiv',
scope: 'both',
privacy: 'public',
iconsOnly: true,
layout: 'horizontal',
noButtonBorders: false,
operationMode: 'simpleShare',
onShareButtonClicked : function(e) {
console.log(e.shareItem.provider);
},
shareButtons: shareButtons // list of providers
};
//
// Load the Share Bar Plugin:
gigya.socialize.showShareBarUI(shareParams);
This will log to the console the name of the Provider that was clicked, you can alternatively create a var and then send it somewhere, or fire a Google Analytics event with the data.

ajax loader causing content to flicker

Pretext: I'm using Ajax to switch between SVG images in an interactive map.
I implemented a loader image into the Ajax requests, but every time it fires the old SVG completely disappears until the new SVG is added (causing the flicker).
The goal is to get the loader image to hover over the old content instead until the new SVG is completely loaded.
AJAX
$.ajax({
type: 'POST',
url: '/doc.php',
data: { var: var },
beforeSend:function(){
$('#container').html('<div class="loader"><img src="loader.gif"/></div>');
},
success:function(data){
$('#container').empty();
$('#container').append(data);
}
});
CSS
.loader {
height:60px; width:60px;
background-color: rgba(0,0,0,0.2);
position: absolute;
top: 25%;
left: 47%;
}
Any ideas on what I'm doing wrong?
It looks like they are removing and trying to populated at the same time. If you let (data) load then .delay(1000) or what ever number works then target that old image by id you could accomplish that. Another option is this:
complete: function(data){
$('#container').append(data).delay(1000).trigger(remove);
};
Function remove(){
$('#container').find('#fooImage').fadeToggle().remove();
};
This should be enough time for the new image to load and once that 1 second is up the function 'remove' is triggered.

Categories