I am running this script within a content page on my ASP.net site.
<script>
$(document).ready(function () {
var satShifts = $('#hidSat').val();
alert("Sat: " + satShifts);
});
</script>
On the page_Load event on the server I have this code:
hidSat.Value = "2";
The variable comes back as undefined in the alert window. I have this same process on the master page with another script and it works flawlessly. Is this an issue because it is a content page?
As far as i know,
if u use asp control in the content page,
the id is prefix with master name by .net compiler b4 render to html page.
So, here is my suggestion:
inspect the output html file with FireBug or Chrome
and see the name of ur hidden field.
if it is different, then u need to assign the id to some variable in JS.
like:
var tmp = '<%=hidSat.CliendID %>';
then,
$(tmp).val();
if it doesn't work, try with .html() method.
it will return all html code within ur hidden field.
Hope it works!
Change the code to below, since hidSat is server control.
var satShifts = $('#<%=hidSat.ClientID#').val();
Related
Hi,
I am trying to load HTML code and display it on my site based on the URL parameters.
I want it to work like this. My shortcut (Siri Shortcuts) will redirect people to https://example.com/index.html?page=[HTML CODE HERE]. Then the HTML code that is in that URL variable, will display on the site (not the blank text but overwrite the existing code so it will display that HTML page). The problem is I am doing it with this code below.
window.onload = function() {
try {
var url_string = (window.location.href).toLowerCase();
var url = new URL(url_string);
var page = url.searchParams.get("page");
document.write(page);
}
}
It works fine when I want it to output 'test' (https://example.com/index.html?page=test). But when I put the whole HTML code in the url variable, it won't output anything.
NOTE: I am still new to HTML and JS.
document.write wipes the page, script and all. that is Why is document.write considered a "bad practice"?
If you must pass data between pages, pass the data only and update existing code on the new page. So for example have
<p id="test"></p>
on the page and ?pageContent=somecontent in the URL
Then you can do
var pageContent = url.searchParams.get("pageContent");
document.getElementById("test").textContent=pageContent;
instead of ?page=<p id="test">somecontent</p>
Alternative is to call the server for more content using AJAX, and update the page dynamically with that content.
I have been working on SharePoint as a Frond End Designer.
When I edit any content page or Update content from page edit option that time some unknown HTML entities like ​ and some empty p tag are inserted by default editor.
So my question is that How to remove those without disturbing any client site script.
See the screen cast of entites
I tried some JavaScript and jQuery code but default functions were disturbed like form validation.
Applied code for removing HTML entities.
var abc = document.getElementById("contentBox").innerHTML;
var a = String(abc).replace(/\u200B/g,'');
document.getElementById("contentBox").innerHTML = a;
You could use something like this:
document.getElementsByClassName("divider-20").innerHTML = "";
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>
I'm making a Chrome Extension that changes the DOM of a page. But I would like to give the user an option to switch between the page before the changes and the changed page.
It's a little bit like Google translate where you can change between the orginal language and the translated message.
I could not find anything in my own searches.
I know JavaScript but not JQuery yet.
Thanks for the help.
You could save the entire body in a variable, then start overwriting things. If you want to switch back load up the old body.
You could save all the original DOM content to a variable before running the content script. You can do this by using the following code at the top of your content script:
var originalDOM = document.getElementsByTagName("*");
This saves the entire DOM in an array called originalDOM. The * acts a universal tag, requesting every tag in the document. You can read more about the .getElementsByTagName() API here.
You could try:
var html = document.getElementsByTagName("html")[0];
var page = html.innerHTML;
This will give you everything between the <html> tags.
After the content script is injected, run:
var newPage = html.innerHTML;
Now, whenever you want to switch between the pages, simply run:
html.innerHTML = page; //or newPage
You can read more about the .getElementsByTagName() API here
My code is as follows:
window.onload = initialise;
function initialise() {
var objPForSubmitMsg = document.createElement('p');
objPForSubmitMsg.setAttribute('class', 'submitmsg');
var arObjForms = document.getElementsByTagName('form');
for (i = 0; i < arObjForms.length; i++) {
var objFormParent = arObjForms[i].parentNode;
alert(objFormParent);
objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
}
} // end initialise().
I checked the function with alerts and it goes through.
When I "view-source" for the page after the function initialise() is done, there are no new elements added.
So my first question would be as per subject: can new elements inserted with javascript be seen with view-source?
If yes, then what is wrong with my code above? Why it doesn't insert new element?
I also tried to call initialise() from a button, but nothing happens then either.
I'm new to javascript so any comments would be appreciated.
EDIT: Thanks everyone. Ok, view-source cannot see it...
Than if I pass my page to php and load it with: $page = file_get_contents("mypage.html"); , if I echo that back with: echo $page; then I guess the newly created elements will not appear there either?
If that is the case, how would you pass the whole thing including the newly js created elements to php?
View Source in the browser shows you the original HTML source of the page - exactly what came from the server before any client side modifications have been made.
As such, it will NOT include any dynamic changes to the page made by javascript.
To see changes that have been made dynamically, use a DOM inspector. There is one built into Safari and Chrome and IE and Firebug is an add-on for Firefox. All will show you the entire DOM hierarchy, live exactly like it currently exists in the browser. In fact, you can even modify the live DOM yourself in the inspector.
Your current code is inserting an empty <p> tag which may not be visible because it's empty. If you put some content into the <p> tag, it successfully inserts one <p> tag into your page. It will only insert one because you only create one and then you try to insert the same tag before each form. You can see what your current code does here: http://jsfiddle.net/jfriend00/3fvbj7re/.
If you want a <p> tag inserted before each form in the page, you'd need to create a separate <p> tag for each insertion like this:
function initialise() {
var arObjForms = document.getElementsByTagName('form');
var objPForSubmitMsg;
for (i = 0; i < arObjForms.length; i++) {
objPForSubmitMsg = document.createElement('p');
objPForSubmitMsg.innerHTML = "hello"; // give tag some content
objPForSubmitMsg.setAttribute('class', 'submitmsg');
var objFormParent = arObjForms[i].parentNode;
objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
}
}
window.onload = initialise;
The Dom elements you add at runtime, were not present when the first time your page was loaded. In other words, it wasn't a part of your original page.
When you view source of your original page, it just shows the HTMl, without executing any JS or CSS, since you only explore HTMl in the source.
Hence, even when you add dynamic html elements in a page, you won't be able to see them when you click view source.
To see those elements, you should use the Developer Console of a browser.
If you want to see the current DOM you should use the code inspector (Developer Tools) or javascript console, not the source, which is what the original response body was.
In Chrome for example go to view->developer->developer tools
I would like to add that just because you can't see it with view-source, doesn't mean you can't access your newly created elements using document.getElementById('el-id') or something similar. Kinda off topic but it's important to note.