I've come to the community to ask for help since I have been facing this problem for the last few days and can't seem to find any answers on the topic.
I've just converted my fully working HTML (with scripts) to React and everything seems to work apart from the scripts. I've tried loading them in the main index.html, as helmets, in the JS page itself, and nothing seems to work. Currently this is what my code looks like [IN THE INDEX.HTML FILE]
```<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="../src/pageScript.js" async defer></script>
<script src="../js/scripts.min.js" async defer></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" async defer></script>
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.key === "Escape") {
$('.modal').removeClass('modal-show');
$('.content').removeClass('content-blurred');
$('body').removeClass('no-scroll');
}
});
$(function(){
// Provider card slider
$('.slider').flickity({
pauseAutoPlayOnHover: false,
prevNextButtons: false,
cellAlign: 'center',
draggable: false,
freeScroll: false,
wrapAround: true,
pageDots: false,
autoPlay: 3000,
});
// Imbox zero slider
$('.zero-slider').flickity({
pauseAutoPlayOnHover: false,
prevNextButtons: false,
cellAlign: 'center',
freeScroll: false,
wrapAround: false,
draggable: false,
pageDots: false,
autoPlay: 3000,
fade: true,
});
// Open & close modal
$('.modal-toggle').click(function(){
$('.modal').toggleClass('modal-show');
$('.content').toggleClass('content-blurred');
$('body').toggleClass('no-scroll');
});
// Reserve username form
$(".form").submit(function(e) {
e.preventDefault();
var $form = $(this);
$.post($form.attr("action"), $form.serialize()).then(function() {
$('.form-content').addClass('form-content-hide');
$('.success').addClass('success-show');
});
});
// Save user's first name
$(".form").submit(function(e) {
e.preventDefault();
var value = $("#firstName").val();
$('.first-name').text("Thank you," + " " + value + "!");
});
// Feather icons
feather.replace()
// ScrollReveal
ScrollReveal().reveal('.hero, .title, .screen, .features, .cards, .zero-slider', {
distance: '40px',
duration: 2000,
mobile: false,
reset: false,
opacity: 0
});
});
</script>
</body>```
In my website console, I get the errors: Uncaught SyntaxError: Unexpected token '<' (at pageScript.js:1:1)
&
scripts.min.js:1 Uncaught SyntaxError: Unexpected token '<' (at scripts.min.js:1:1)
&
Uncaught ReferenceError: $ is not defined
Any support will be greatly appreciated!
Related
I am attempting to fire a click event when the page loads but only once on each page load. What is happening is that in localhost it works fine, but when I upload to server it dosen't fire at all.
The idea was to set a counter to 0 when the page loads then inc the counter by 1 to disable further clicks. Obviously, there is an error somewhere but I cannot solve it.
I am using jqwidgets jqxgrid to display the data and getting the class as a variable. I am also using jquery 1.11.1
I would be grateful if someone could help me solve this as I seem to have tried many combinations, but ok on localhost but nothing on server. I am using php v5.3.13 wamp and 5.4 on server. Many thanks
var counter = 0;
window.onload = function() {
var calendaricons = document.getElementsByClassName('jqx-icon-calendar');
for (var i = 0; i < calendaricons.length; i++) {
calendaricons[i].addEventListener('click', function() {
if (counter === 0) {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
counter++;
} else {
return false;
}
});
}
}
If you are using jQuery, which it seems the case, you can use the one function that allows your handler to be runt only once.
Here is your code with the use of the one function:
$(window).load(function() {
$('.jqx-icon-calendar').each(function(index, item) {
$(this).one("click", function() {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
});
});
});
I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.
The links are dynamic from a webgrid which is where the #item.GrouperIDForLookip comes from.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).
Does anyone happen to know what would cause this to happen? If you need more code just let me know.
Please update the URL in the load function in the below code.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load(
'#URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
I am trying to show the window after the URL and everything inside that page is loaded. This is the script:
var loadWindow = new BrowserWindow({
width: 500,
height: 300,
frame: false,
resizable: false,
fullscreen: false,
scrollbars: false,
show: false
})
loadWindow.loadUrl('file://' + __dirname + '/index.html')
What I tried:
loadWindow.on('ready', function(){
loadWindow.show()
})
I also tried to on('loaded'), but none of these is working. What is the best solution to load a URL inside a page and display it only after everything is loaded?
I would like to use smoothdivscroll (http://smoothdivscroll.com/index.html) for a scrolling block of images which users can open using the http://sachinchoolur.github.io/lightGallery/index.html lightbox. Unfortunately these scripts do not function when using the same selector.
<script type="text/javascript">
if (Modernizr.touch) {
$(".scroll-banner").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true,
mousewheelScrolling: false
});
} else {
$(".scroll-banner").smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
}
$(function() {
$(".scroll-banner").lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
</script>
How do I get two plugins to use the same selector?
is it possible to use it this way:
$(document).ready(function() {
var scrollbanner = $(".scroll-banner");
scrollbanner.smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
scrollbanner.lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
In your code one of the functions is called when DOM is ready and the other is not. Does the behaviour/error change when changing the order of execution for adding the functionality to the divs?
Am I able to include as an include, an external jquery.dialog.js file that consists of the following?
$(document).ready(function(){
$(function() {
location.hash = 'PAGETOP';
});
$("#dialogou").dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
modal: true,
draggable: true,
position: ["center", 100],
buttons: {
'Ok': function() {
$(this).dialog("close");
closeReq();
}
}
});
});
and then pass this in using the script include notation:
<script type="text/javascript" src="../jquery.dialog.js"></script>
This doesn't seem to work for me.
as long as you include the jQuery's .js file before this dialog one, it should work
I believe $(document).ready(function(){}); and $(function() {}); (a short-hand version) are equivalent, so you should simplify it to just:
$(document).ready(function(){
location.hash = 'PAGETOP';
$("#dialogou").dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
modal: true,
draggable: true,
position: ["center", 100],
buttons: {
'Ok': function() {
$(this).dialog("close");
closeReq();
}
}
});
});
Also, install Firebug so you can see what's being included and from where. It will tell you if you are including your script wrong (probably a 404).