[atraub]

So, here's the html

<!--index.html-->
<div class="page" icon="images/1.gif">
	<h1>blah blah</h1>
</div>
<div class="page" id="page2" icon="images/2.gif" source="pages/page2.html"></div>
<div class="page" icon="images/3.gif">
	<h1>blah blah 3</h1>
</div>

<!-- page2.html -->
<h1> blah blah 9000</h1>

and the relevant javascript

$('.page').each(function(i, obj) {
	if(this.hasAttribute("source")){
		$.get($(this).attr('source'), function(data){
			$(this).append(data);
			$(this).removeAttr("source");
		});
	}
}

So, as you can probably see, the expectation is that we can inject html from an external html file into a specified div in the main one. However, this isn't working - the div doesn't update. Can anyone see what's going on?

You can see the code thus far at my github page scarf.

This post has been edited by atraub: 14 March 2015 - 11:46 AM

[atraub]

Granted, the more I think about it, the more I realize why this is a bad idea to begin with haha.

[andrewsw]

Your script is incomplete:

$('.page').each(function(i, obj) {
    if(this.hasAttribute("source")){
        $.get($(this).attr('source'), function(data){
            $(this).append(data);
            $(this).removeAttr("source");
        });
    }
}); <<<

[atraub]

Oh, that was just a copy and paste error from copying it from my code to DIC. The full script is quite a bit longer. That wasn't the problem.

This post has been edited by atraub: 14 March 2015 - 11:28 AM

[andrewsw]

With the correction I mentioned it does run the code, but I'm testing locally and it restricts loading the content due to a cross-origin request (I haven't configured my browser to run locally).

Are there any other errors in your browser's console?

[atraub]

Oops! I thought the link worked. Here's the site where you can see it running scarf


and here's the console:

Denying load of chrome-extension://gkojfkhlekighikafcpjkiklfbnlmeio/js/jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

jquery.min.js:3 Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefinedjquery.min.js:3 n.extend.buildFragmentjquery.min.js:3 n.fn.extend.domManipjquery.min.js:3 n.fn.extend.appendscarf.js:30 (anonymous function)jquery.min.js:2 n.Callbacks.jjquery.min.js:2 n.Callbacks.k.fireWithjquery.min.js:4 xjquery.min.js:4 n.ajaxTransport.k.cors.a.crossDomain.send.b

EDIT:
Here's the entire function:

		var pageTable = {};
		var currentPage;
		var pageCount = 0;
		var pageSize = 400;

		var ICON = 0;
		var PAGE = 1;

		var RIGHT = 0;
		var LEFT = 1;

		function initialize(){
			//for each div with a class of "page"
			$('.page').each(function(i, obj) {

				//if the page tag has an icon designated for use in the nav bar, creat the icons
				if(this.hasAttribute("icon")){
					var menIcon = $("<div class='pageNavIconImage' onclick='updateCurrentPage("+i+")'></div>");
					menIcon[0].style.background = "url("+$(this).attr('icon')+")";
					menIcon[0].style.backgroundSize = "contain";
					$(this).removeAttr("icon");

				//if there is no such icon, just use the default one designated in the css
				} else {
					var menIcon = $("<div class='pageNavIconDefault' onclick='updateCurrentPage("+i+")'></div>");
				}

				//check if the div receives its html from an external document
				if(this.hasAttribute("source")){
					//if it does, read the html file
					$.get($(this).attr('source'), function(data){
						$(this).append(data); //inject the html into the div
						$(this).removeAttr("source"); //and remove the attribute from the tag
					});
				}
				
				//update the pageTable
				pageTable[i] = [menIcon,$(this)];
				$('#pageNavMenu').append(menIcon);
				$(this).hide();
				pageCount++;
			});

			currentPage = 0; //the current page being viewed
			$(pageTable[currentPage][ICON]).attr("id","selected");
			$(pageTable[currentPage][PAGE]).show();
			$('#site').attr('width',pageSize*pageCount);
		}

Be kind, I'm more of a backend developer so I'm not great at this sort of stuff.

EDIT 2:
Guess I need some more documentation haha.

This post has been edited by atraub: 14 March 2015 - 12:01 PM

[andrewsw]

Your link is missing a colon :

Still reads like a cross-domain issue. Is this for a Chrome extension? In which case:

Manifest - Web Accessible Resources

But it is now outside my area, so good luck

[atraub]

Nah, it's not a chrome extension, and I think those warnings are just for the jquery module. Considering it's coming from google code, I don't think those errors are worth worrying about. It's something else, but hell if I can figure out what.

[andrewsw]

One suggestion is to test with just plain text, "hi dude", to see if it is the HTML that it objects to.