Currently, have a web app for appointments. I had a question answered around last week at the following link: jQuery and Bootstrap dialog not coming up
I got this working. However, I just noticed that this messes up my NavBar that is stored in my layout file. On any other page, the NavBar works, but on the Calendar page it doesn't respond. The only thing I can think of is the scripts are clashing.
I tried taking them out of my calendar page but this causes my calendar to not pop up with a dialog. I must be doing something wrong here but I honestly don't know.
Here is my layout file's scripts.
#Styles.Render("~/Content/Site.css")
#Styles.Render("~/Content/jquery.datetimepicker.css")
#Styles.Render("~/Content/fullcalendar.css")
#Scripts.Render("~/bundles/modernizr")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
My Calendar File Scripts:
#section Scripts{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
}
If more code is needed, I can supply it.
EDIT Image of my console after I load Calendar:
EDIT 2 Image of my console after I load Calendar after removing one instance of Jquery:
Turns out I had an error on my Layout Page that was causing hassle.
The scripts section weren't being rendered as I had RenderSection("Scripts", false)
Removed the scripts section and that and the error went away!
Related
So I'm using Swiper.js in order to swipe orizontally some content in my portfolio.
If i open the page locally, everything works fine (I'm able to swipe, buttons are displayed,..) but if I open it on Netlify (free hosting service) I'm having an issue: buttons are displayed but I cannot swipe.
Refreshing the page, fix the problem.
In the head section i have links to CDN
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
and the scripts are located right before the end of the body
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
In the console.log i have this error: "filed to load resource: the server responded with a status of 404".
Refreshing, again, fix the problem.
Do you guys know how to fix this problem?
That is because the library loads before the page and so it cannot locate elements in the DOM, since they don't exist yet.
Add a defer attribute to the script tag or place it at the end of the page.
<script defer src="..."></script>
im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.
SO my file hierarchy that is the same on my desktop as it is in my web-host file manager
1- This is my iframe from my code editing program (Adobe Edge Code) correctly working when I throw the page up in Google Chrome]
2- And this is my iframe not working when I have the page hosted in my web-hosts file manager.
1: https://pantherfile.uwm.edu/leyton/Screen%20Shot%202013-12-20%20at%203.51.37%20PM.png?uniq=-n0ztwi
2: http://leytonelizabeth.com/photography.html
I don't know anything about Javascript and definitely nothing about JQuery. All I know is that I have a code that correctly displays my website when I preview it on Google Chrome.
When I put all my files in the exact same hierarchical order in my web-hosting site's file manager, I navigate to it and it doesn't work.
Why does it point to the files and paths correctly when it's coming from my desktop and not when it's coming from Webhostinghub.com?? I transferred them over in exactly the same order. The paths are correct. So it must be something with jQuery. Can anyone give me some advice or things to try in order to get the iframe to display my photos?
Is it perhaps because there are several Core Scripts being referenced at the top of my photography.html page? do I need to update/download each version? Do viewers looking at my site need to go through all that too then just to potentially see the photos in my iframe? As you can see in the pic of the photo that properly works in the iframe, it points to the prettyPhoto jQuery and its respected gallery, not some other url..
I have NO IDEA what to do about this. Please help!!!
These are the scripts at the top of all my html5 documents/pages:
`<!-- Cufon Scripts -->
<script src="js/libs/cufon-yui.js" type="text/javascript"></script>
<script src="js/fonts/mank-sans.cufonfonts.js" type="text/javascript"></script>
<script src="js/fonts/Yanone_Kaffeesatz_Regular_400.font.js" type="text/javascript">
</script>
<script src="js/royale-cufon.js?v=1" type="text/javascript"></script>
<!-- Core Scripts -->
<script src="js/libs/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="js/libs/mdetect.min.js" type="text/javascript"></script>
<script src="js/libs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="js/libs/jquery.easing.1.3.min.js" type="text/javascript">
</script>
<script src="js/royale.js?v=1" type="text/javascript"></script>
<!-- Bg Image Script -->
<script src="js/royale-bg-image.js?v=1" type="text/javascript"></script>
<!-- Added for Lightbox Script -->
<script src="js/libs/jquery.pretty-photo.min.js?v=1" type="text/javascript"></script>
<!-- Setup Script -->
<script type="text/javascript">`
1 Lots of your 'thumb' folders are empty.
2 The "big-sized" picture of teacup (the only thumb picture i can see) is referred as "img/portfolio/theaccident/tea.jpg", but the real file path is "img/portfolio/theaccident/Tea.jpg" (the capital letter matters)
So the problem is not in the scripts, It's in your export settings or your host defaults.
UPD:
3 Some links from your 'thumbless' pictures are pointing to correct 'big-sized' pictures (their first letters are not capitalized).
You definetely did something wrong when moving everything from desktop to host.
I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!
You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>
The script in question is app.js.
I have placed this custom script between jquery.min.js and jquery.mobile.js in the section of _layout.Mobile.cshtml.
#* one recommendation to load custom scripts but does not work *#
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
#*<script src="#Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script> *#
#*<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/app.js?45")" type="text/javascript"></script>
#*#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/3rdparties")*#
<script src=#Url.Content("http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js") type="text/javascript"></script>
</head>
I have also tried referencing the script immediately after the first element with attribute role=page in Index.Mobile.cshtml.
<div data-role="page" id="agencies-pane">
<script src="#Url.Content("~/Scripts/app.js?45")" rel="external" type="text/javascript"></script>
<div data-role="header" class="header"><h1><a>Agencies</a></h1></div>
In both cases, my custom script does not load. What a waste of an entire afternoon :(
I do not want to disable Ajax even though I tried and failed at that miserably. Can not seem to get anything jQM to work even after carefully reading instructions from here
Anyone have any ideas?