0

I have datepickers whose images are being set in a .js file with jquery.

Is it ok to remove the leading / as I have done in buttonImage? The jsFiddle below suggests that Chrome should be able to handle this so I'm wondering if I'm doing something else wrong.

When setting buttonImage in .datePicker(), if the location starts with "/", Chrome doesn't find the image (404 behind the scenes in Chrome DevTools). These are the lines from the .datePicker() below in question:

  • buttonImage: "content/images/cal.png", //WORKING IN ALL BROWSERS

  • buttonImage: "/content/images/cal_editor.jpg", //NOT WORKING IN
    CHROME but works in IE, Firefox

However, when I try to replicate this in a simple jsFiddle, it doesn't work in Chrome without the forward slash: http://jsfiddle.net/tonyleif/3z865d2r/2/.

From the jsFiddle above:

  • buttonImage: "/img/initializing.png" //WORKING IN ALL BROWSERS

  • buttonImage: "img/initializing.png" //NOT WORKING IN ALL BROWSERS

Here is the full .datePicker function that is being called in my app:

var $calendarButton = $(me).datepicker({
    dateFormat: "dd-M-yy",
    showOn: "button",
    buttonImage: "content/images/cal.png", //WORKING IN ALL BROWSERS
    //buttonImage: "/content/images/cal.png", //NOT WORKING IN CHROME but works in IE, Firefox
    buttonImageOnly: true,
    beforeShowDay: oneDayOnlyMethod,
    altField: alternateField,
    onSelect: function() {
        if ($(me).hasClass('searchItem')) {
            APP.SearchTable.AddDateFilter($(me));
        }
        var pairedName = $(me).attr('paired-date-picker');
        if (pairedName !== undefined && pairedName.length > 0) {
            var d = $(this).val();
            if (isValidDate(d.valueOf())) {
                var pairedControl = $('#' + pairedName);
                if (pairedControl.val() == "" || pairedControl.val() == "DD-MMM-YY") {
                    pairedControl.val(d);
                }
            }
        }
        $(me).change();
    }
}).next(".ui-datepicker-trigger").addClass("calendar-button");

Let me know if you need more code that this. I'm trying not to include too much text initially.

One more thing I should note is that when I'm running the site locally with Visual Studio 2013, I don't have this issue. It only happens when I publish to the server.

Tony L.
  • 17,638
  • 8
  • 69
  • 66

1 Answers1

1

The idea behind the leading slash is that it makes the whole URL relative to the root of the site (http://sitename.blah/). Without the slash, you get the relative path of where the lookup originated.

My guess is that you're attempting to get the image from a directory other than the root, which is why it works without the slash on all browsers.

Comparing your code to the jsFiddle is fine, but you need to also compare the file paths and where they are relative to the site root. In jsFiddle, the img folder is at the root of the site.

So to answer your question, no, it's not ok to leave off the slash unless you mean to get the file from the relative directory.

TomSlick
  • 717
  • 5
  • 21
  • The image is located in "mySiteRoot\Content\Images\cal.png". What would be the correct buttonImage setting if I did want to include the leading forward slash? – Tony L. Apr 24 '15 at 20:04
  • Just to be clear, does "mySiteRoot" represent the host portion of the URL (mySiteRoot.org for example) or is it a directory? – TomSlick Apr 24 '15 at 20:09
  • myhost.com/mySiteRoot. It is one of multiple sites at this host. – Tony L. Apr 24 '15 at 20:11
  • Ok, so then your buttonImage property should look like this: `buttonImage: "/mySiteRoot/content/images/cal.png"` – TomSlick Apr 24 '15 at 20:18
  • That works in Chrome but not IE and Firefox. Ha! I guess we're getting some insight into how each browser works. I'm thinking I should use the relative path without the leading / unless there is a good reason I should come up with another solution. – Tony L. Apr 24 '15 at 20:27
  • 1
    Interesting. Well yeah, I always go with what works, I don't see any reason not to go with the relative path. Just curious, what happens if you use the absolute path `myhost.com/mySiteRoot/content/images/cal.png`? – TomSlick Apr 24 '15 at 20:33
  • It works in all browsers. +1 to you comment because I learned more. I'm going to with the relative path as opposed to the absolute path because the absolute paths won't be the same for different version of the site (e.g. DEV, QA, PROD) – Tony L. Apr 24 '15 at 22:32