We Keep Coding

jquery .load - how to target the loaded file with javascript and jQuery

If I have a template index.html and use jquery.load to include a file with html e.g $('#targetDiv').load( 'includes/inc1.html' ); into it. How do I target the content in inc1.html with both javascript and jQuery from within index.html
let's say inc1.html contains <div id="content">10</div> and I want to change the value from 10 to 20 using document.getElementById("content").innerHTML = "20"; within the script tags in index.html?
Thanks

What I suggested in the comments about setting a callback function.
$('#targetDiv').load( 'includes/inc1.html', function(){
$('#content').html("20");
});

How to modify elements from external JS file?

I want to split HTML file and separate javascript into an external file. In the HTML file, I have an element <p id="log">, which I now access using document.getElementById("log").innerHTML.
How to access this element from external JS?
Is it ok when I just use document.getElementById("log").innerHTML in the external JS? Or I need to pass element as parameter to some function like
function myFunc(logElement) {
logElement.innerHTML += "some new data";
}
Or there are another common practices?

Based on what you wrote, you are trying to create a separate JS file to access a value inside a HTML tag. If that's all you want to do, just insert a <script> tag in the HTML file you want to access the data:
<script src="file.js"></script>
From there you use your function to access it. And yes, you can use document.getElementById("log").innerHTML as long as you have the script tag in the HTML file you want to access the data.

Javascript Variable in Url.Content

I have a javascript variable called locid that I am trying to use as part of a URL by setting the data-url of a div as follows:
data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=locid&AsyncUpdateID=catalogue-view'>
I know I can't just throw the locid in that string as I have done in my sample code but I just put it there to illustrate where I need my javascript variable to be. How can I achieve this??

The problem here is #url.content needs to be run on server, where JavaScript variable is not visible. Write an independent AJAX call to fetch content and than set content in data-url

You cannot use the Javascript variable directly into attribute.
A workaround can be to reorder the parameters of your url and setting the JavaScript variable in script tag.
<button id="myButton" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?AsyncUpdateID=catalogue-view'></button>
I have reordered the url parameters here. The location parameter will be set by following script. Place this script just after the button element.
<script>
var button = document.getElementById('myButton');
var url=button.getAttribute('data-url');
url+="&LocationID=" + locid;
button.setAttribute('data-url',url);
</script>

You can put the value in the page using document.write, but you can't write it out inside the tag, you have to write out the entire tag. Example:
<script>
document.write('<div data-url="#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=' + locid + '&AsyncUpdateID=catalogue-view">');
</script>

jQuery .before() with external HTML file (same domain)

I'd like to know if it's possible to use the .before() function in jQuery to load an external html file in the same domain.
What I'd like is an HTML form with dynamically placed form elements based on users' entries (being able to add as many phone number fields as they want for instance). I tried many options like .load() or .html() but I can't seem to find any working solution. Maybe I'm not doing this right...
<script>
$(document).ready(function(){
$("#add_society_number").click(function(){
$(this).closest('table').before(forms/society_phone_number.html);
});
});
</script>
What should I use instead of "forms/society_phone_number.html"?
I'll have many pages with shared forms, that's why I want them in external files.
Another reason why I'd like to load external HTML files is that when using .before() function, I have to use "\" for each line breaks in my code...
Thank you :)

You'll need to use $.ajax or one of it's helper methods to get the content.
$(document).ready(function(){
$("#add_society_number").click(function(){
var self = this;
$.get("forms/society_phone_number.html",function(response){
$(self).closest('table').before(response);
});
});
});

you can also use .load('/url/to/script')
<script>
$(document).ready(function(){
$("#add_society_number").click(function(){
$(this).closest('table tbody').load('forms/society_phone_number.html');
});
});
</script>

how can I detect page when I compile all javascript to one file

I compile all my javascript for different pages into one file, so I have to identify page for my all.js. I can put a hidden element in my pages and let javascript detect this element, but I don't like this solution, are there any other ways to do this?

You could go by the url using location.href (or another field from the location object).
However, a better approach is using a data- attribute on the body tag, e.g. <body data-page="whatever"> and then using $('body').data('page') to retrieve the value.

If you script is based on pages, then compiling them into one script is a bad idea, load the file separately, it will be lighter and definately increase some performace.

I am not sure, why do you need this, but in general it is not good practice to change dynamicaly change content of javascript file, since you are disabling javascript cacheing, what can be performance issue later.
Any way, you can solve it from other side, what about using all.js just to detect the page, where are you and then you can use this information, to load right javascript file dynamicaly, like in the following example
document.write('<script src="'+location.pathname+'.js"></script>');
Which will load same file as you are on, just with .js extension. So for example on index.html page it will load index.html.js file

I almost always use MVC frameworks and tend to put my action and controller as classes on the body element
<body class="main_controller index">
Which lets you do things like this:
$(document).ready(function(){
//Only for lessons#search
if (!$(body).hasClass('lessons search')) {
return;
}
function close_style_filter_box() {
$('#style_filter_box').slideUp();
}
});
$(document).ready(function(){
//Only for main_controller#index
if (!$(body).hasClass('main_controller index')) {
return;
}
function do_something_else_on_this_age() {
....
}
});

Another way is using javascript variable:
var PAGE = 'page1';