Member Avatar for McLaren

i have such div:

<div id="file.jpg">
	<img src="http://localhost/joomla15/uploads/banners/file.jpg?1300447751">
	<img title="Trinti" class="deleteAd" data-filename="file.jpg" src="http://localhost/joomla15/components/com_banerioikelimas/images/delete.png">
	<a class="pratestiDienai">Pratesti galiojima dienai</a><br><br>
	<p class="validUntil">Galioja iki:2011-04-02 20:40:09</p>
	<p>Paspausta:1</p><br>
</div>

now I want to change its html content with such code:

$('#file1.jpg').html('test');

and it doesn't change. Probably because he thinks that .jpg is a class. How to make him think that it is not a class but just id is file1.jpg?

  • 2 Contributors
  • 5 Replies
  • 152 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by McLaren

Dani AI

Generated

Short answer: the dot in the id is fine to store in HTML, but CSS/jQuery selectors treat . as the class separator, so you must either escape the id for use in a selector or use a selector that does not parse the id as a CSS identifier. already guessed the problem and ’s workaround (adding a child target) avoids the selector issue, but there are cleaner ways to target the element directly.

Practical options (pick one that fits your setup):

/* fastest, no CSS parsing needed */
var el = document.getElementById('file.jpg');
el.innerHTML = 'test';
/* exact-match attribute selector (no escaping) */
$('[id="file.jpg"]').html('test');
/* escape for CSS selector using modern APIs */
var id = 'file.jpg';
var sel = '#' + CSS.escape(id);
document.querySelector(sel).innerHTML = 'test';
/* or with jQuery: $( '#' + jQuery.escapeSelector(id) ).html('test'); */

Manual backslash-escaping also works, but remember JS strings need the backslash escaped (e.g. $('#file\\.jpg')).

Longer-term best practice: avoid special characters in DOM ids if possible. Use a stable numeric or sanitized slug (for example file-123 or banner-file-jpg) generated from your database keys or filename by replacing dots/spaces with safe characters. That change reduces the need for escaping, simplifies selectors, and makes partial AJAX updates simpler: return the minimal payload for the single item that changed and update that element by id.

References: CSS selector escaping is documented at the MDN page for [CSS.escape] (https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape) and jQuery provides an escape helper at [jQuery.escapeSelector] (https://api.jquery.com/jQuery.escapeSelector/). For plain DOM lookup see [Document.getElementById] (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).

Recommended Answers

All 5 Replies

Member Avatar for tinymark

Try something like this. I didn't check the implications of height not changing in the individual tags. Here you go.

<div id="file.jpg">
	<div class = 'mark'></div>
	<img src="http://localhost/joomla15/uploads/banners/file.jpg?1300447751">
	<img title="Trinti" class="deleteAd" data-filename="file.jpg" src="http://localhost/joomla15/components/com_banerioikelimas/images/delete.png">
	<a class="pratestiDienai">Pratesti galiojima dienai</a><br><br>
	<p class="validUntil">Galioja iki:2011-04-02 20:40:09</p>
	<p>Paspausta:1</p><br>
</div>
<script type='text/javascript'>
	$(document).ready(function(){
		$('img').html('');
		$('a').html('');
		$('p').html('');
		$('div.mark').html('<b>You can do it</b>');
	});
</script>
Member Avatar for tinymark

jQuery knows about your div. What I'm doing is dealing with all the individual components in the div before I change the text. I added the extra div to give me a target to write to.

Member Avatar for McLaren

yeah, your example would be good but the problem is thant I am getting html conntents through ajax, so I want to put them in one div id="x". There are several such divs.

In your example I have to get the html few times - as much as there is different elements inside the div, which means the same ammount of ajax calls. I tried recently using JSON but that didn;t help sendent html code through it. Also the problem is when I want to change somehting, it becomes more difficult. It is easier to have all html for such div in one place and load it all at once.

Currently after AJAX I refresh all divs e.g. div id = 'file1', div id = 'file2' but I only need to modify information in one of those. So it loads slower when I reload all of them. But maybe I will have to just change the id to simply a number, those filenames are in database as well, they also have id's so I could use those numbers instead of filenames for recognition. I will have to modify php functions which work with them, but probably that is easiest way. Probably I should always make id's using simple numbers to avoid such situations. Or at least not use dots in them :D

Member Avatar for tinymark

No problem. I worked with what you posted. Post more and I will try and help more.

Member Avatar for McLaren

thanks, I will definitelly do that when something will become unclear :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.