Full URL ipv relative url
Ik ben bezig met een stukje Javascript waar ik overigens niet erg goed in ben.
Ik heb een veld waarin een text/url staat (relative). Deze url wil ik bij een knopklik als background-image hebben. Dit werkt allemaal prima maaar...
Zodra ik de url toewijs als inline CSS wordt er een volledige URL gebruikt. Waarom is dit? Ik wil niet helemaal niet *boehoe*.
Hier den betreffende code.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$('#clear-coverart').live('click', function()
{
var original = $('.coverart-original').val();
if(original !== coverart)
{
$('.coverart').val('');
$('#coverart').css("background-image", 'url('+ original +')');
}
});
{
var original = $('.coverart-original').val();
if(original !== coverart)
{
$('.coverart').val('');
$('#coverart').css("background-image", 'url('+ original +')');
}
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div class="ratio img-responsive image" id="coverart" style="background-image: url('upload/modules/photoalbums/arie_berkulin/2002_17_mrt_21_apr/_thumbs/default.jpg');"></div>
<div class="input-group image-preview">
<input type="hidden" name="coverart" class="hidden coverart" value="">
<input type="hidden" name="coverart-original" class="hidden coverart-original" value="upload/modules/photoalbums/arie_berkulin/2002_17_mrt_21_apr/_thumbs/default.jpg">
</div>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-warning" rel="coverart" id="elfinder_button-coverart" type="button">Bladeren</button>
<button class="btn btn-default" id="clear-coverart" type="button" style="margin-left:0;">wissen</button>
</div>
</div>
</div>
<div class="input-group image-preview">
<input type="hidden" name="coverart" class="hidden coverart" value="">
<input type="hidden" name="coverart-original" class="hidden coverart-original" value="upload/modules/photoalbums/arie_berkulin/2002_17_mrt_21_apr/_thumbs/default.jpg">
</div>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-warning" rel="coverart" id="elfinder_button-coverart" type="button">Bladeren</button>
<button class="btn btn-default" id="clear-coverart" type="button" style="margin-left:0;">wissen</button>
</div>
</div>
</div>
Code (php)
1
$('#coverart').css("background-image", 'url('upload/modules/photoalbums/arie_berkulin/2002_17_mrt_21_apr/_thumbs/'+ original + '.jpg')');
En dit in value=""
Code (php)
1
default
Gewijzigd op 17/08/2014 19:53:34 door Goto Learn
En deze waarde wordt in het input veld .coverart gezet. Ook hier wordt een volledige url gebruikt terwijl ik dit niet wil. Ik wil wat jij hebt een stuk van de url niet met http e.d erbij.
De string zelf komt van het gekozen bestand maar als ik deze in de console zet of als alert wordt er neergezet wat jij ook hebt, upload/modules/photoalbums/arie_berkulin/2002_17_mrt_21_apr/_thumbs/original.jpg.
En niet met het volledige http:// adres erbij.
Ik hoop dat het zo duidelijker is. Anders als je wellicht een oplossing weet kan ik je toegang geven tot het CMS waar het probleem zich voordoet.
Heb er namelijk niets aan als er een volledige url staat ipv upload/modules/... bla bla.
Rick de Graaff op 17/08/2014 21:58:23:
Heb er namelijk niets aan als er een volledige url staat ipv upload/modules/... bla bla.
Wie ziet dat dan?
Maar je laat niet de code zien waar je die input velden invult, daar gaat wss iets niet goed.
Even een paar opmerkingen
- .live is deprecated vanaf jQuery 1.7 (gebruik .on)
- gebruik geen class selector voor een uniek element maar het id
- gebruik geen rel attribuut, we hebben daar tegenwoordig de data-... attributen voor
Ik heb de .live vervangen door .on
Daarnaast is het voor mij belangrijk want dit pad wordt opgeslagen in de database. Zodra hier bijvoorbeeld localhost instaat gaat alles niet meer werken.