Find control where javascript is running - javascript

I have a user control named uscUserControl.ascx and a page named test.aspx.
I have used user control twice on my page. My user control looks like.
<div id="div1">
</div>
<script>
$(document).ready() (function() {$('[id$=div1]').html('Control called');} );
</script>
But it only modifies first div and second is empty. So how to make script modify the element nearest to it?

We can solve it using combination of ClientID and partial Id as below
$(document).ready() (function() {$('[id*=<%= ClientID %>][id$=div1]').html('Control called');} );

Related

jQuery finds no elements with specified id

I've started using .NET Core to develop ASP sites and so I wanted to try something I haven't tried before. I am going to make a global object that I can call functions on from any page since I have a setup in which all pages use a specific layout file.
So I got this setup here:
<html>
<header>
<css and meta stuff>
</header>
<body>
<navbar....>
<sidebar...>
<div id="render-body">#RenderBody</div>
<layout-footer....>
<script inclusions>
</body>
</html>
When #RenderBody() is called, an HTML page is served as the actual page that the browser receives, in-between the two div tags.
What I'm trying to then do, is to make a function which can hide the sidebar because you might not always need it and as such it should be possible to simply hide it.
So I wrote the following piece of code:
var UniHub = {
ToggleContextSidebar: function () {
var $sidebarAndBody = $("#render-body", "#context-sidebar");
$sidebarAndBody.toggleClass("hide-context-sidebar");
}
};
Which in theory should work right? But it doesn't. The code is called just fine, but #render-body and #context-sidebar are not found. When I debug I find that the $sidebarAndBody element has a length of 0. So toggleClass() doesn't actually apply a class to any of the two divs.
They are present at the time I press my test button:
So why could this be?
You're closing #context-sidebar then opening #render-body, so #render-body is not in the context (inside) of #context-sidebar. Hence no matching element.
EDIT: if you want both elements you could do:
$sidebarAndBody = $("#render-body, #context-sidebar");
If you only want to target the sidebar just use $("#context-sidebar");
EDIT: showing jQuery context:
console.log("# of body elems inside html:", $("body", "html").length);
console.log("# of body elems inside head:", $("body", "head").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Render Script into HTML without Executing it

<html>
<p> Some html </p>
<script> some script </script>
</html>
How to identify the script tag and render them as content.
I have a div dedicated to display a html in my webpage, and if it has any script I want to render them as content, but while appending the html to the div, the script gets executed which I dont want to happen. How to keep the script from executing, are there any libraries to do that.
Note:
1. The Inline script should also be prevent from executed.
2. The Html Content getting appended is dynamic and got from email listener source
Thanks in Advance!
but while appending the html to the div, the script gets executed which I dont want to happen. How to keep the script from executing, are there any libraries to do that.
Since you say you already have the div content and as soon as you append it the script gets executed, This is a default behavior, What we can do is before appending the div content of yours we can modify the content string to replace <script> and </script> by <script> and </script>. So here is the demo of it.
var divContent = '<script>alert("I must not execute!!");<\/script>';
var res = divContent.replace(/<script/g,"<script>").replace(/<\/script/g,"</script>");
document.getElementById("output").innerHTML = res;
<div id="output">
</div>
Use the document.ready(); method. This will only run your JavaScript once all the HTML elements have rendered. Better yet, wrap your function within the jQuery shorthand:
$(function() {
alert( "DOM elements rendered!" );
});
You can try to use jQuery document.ready(); function to only allow the script to execute when the page has loaded.

How to get parentNode ID and use it as a variable

I'm trying to run a script on images within specific blog posts. Each post div is given a unique ID by Blogger that I'm trying to get. Because I only want to run the script on posts containing the function call and not the entire page, I want the function to basically find the ID of the div that's calling it, store that ID as a variable, and then pass that variable in to my function.
<script>
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
</script>
This returns the correct element but the second I wrap it in a function(){} it doesn't work anymore. How can I assign these variables from within a function so I don'thave to clutter up every post's html with a bunch of variable declarations?
Secondly, once I have these variables assigned is there a way to use the value stored with the getElementByID method to actually select the element?
var parentDivID = parentTag.id;
var postID = document.getElementByID(parentDivID); //can't figure out how to select using this as the variable
For ease of use I'd like it if I could simply wrap the function call in script tags and stick it at the end of my post's html whenever I need to use it.
Details
The script I want to run finds images within divs with a specified class and resizes them to fit side-by-side so that the outer edges of the images completely fill the width of the div.
Here is the question covering that script:
Force dissimilar images to equal heights so combined widths fill fixed div
I would like to call this script at the end of any post body where I plan to use side-by-side formatting. The reason I want to call it at the end of a post instead of on the entire page is because the page uses "infinite scrolling" and I'm worried that as posts load after the fact the resizing script will have already been run and newly loaded posts will not be resized.
So I want the function to be able to find the unique ID of the div that contains the call, use that as a variable and ask the script to look inside that post for divs of a certain class, then look within those divs for image tags and resize those images. I hope that makes sense.
Here's an example of what I'd like the post's html to look like:
<div style="width:500px; margin:auto;">
<div class="widthVal x2">
<img class="caption" alt="Caption 01" src="sample01.jpg" />
<img class="caption" alt="Caption 02" src="sample02.jpg" />
<img class="caption"alt="Caption 03" src="sample03.jpg" />
</div>
<script> resizeMagic(); </script>
</div>
Thanks for any help!

using focus() and onload() with CakePHP

Is there a way by which we can set the focus to a particular textbox in CakePHP. Something like the textbox we have on the home page of google.We load the page and start typing.Is it possible to achieve the same in Cake.
does cake support javascript's onload function.I only need it for my view and dont want to include an external file for this.I have a user defined function that works fine but the onload doesn't work.
Just use javascript between your head tags as follows
<script type="text/javascript">
window.onload=function(){
document.getElementsByName('txt1')[0].focus(); // txt1 is the name of textbox
} ​
</script>
Update: If you want to use it only for a particular page then you can keep it in that view and in that case you can simply paste it right after the HTML code as follows
<script type="text/javascript">
document.getElementsByName('txt1')[0].focus(); // txt1 is the name of textbox
</script>
You can use Javascript on any webpage or application, so using CakePHP is not a restriction. One of the differences on Cake from other technologies is that you have a layout which is loaded always with your view and you usually import all your scripts there (you can import the scripts on the view too).
So then, you can use onload function for your page on Cake without any problem. In this case, you may want to add that function in your view within <script> tags

Javascript not making div show

I'm having trouble making a div show up using javascript.
<div class=" notification success">
x
<p>An email has been sent confirming your identity.</p></div>
<script type="text/javascript">
var notification = '.notification';
$(notification).show();
</script>
</div>
Any ideas?
Place your jquery js in a document.ready() otherwise you cant ensure that the DOM is fully loaded and ready.
Your need is just a one liner like so
$(document).ready(function()
{
$('.notification').show();
});
You need to have double or single quotes surrounding the selector if you're naming a specific element ("#id", ".class").
Best way to do this is to avoid using the variable. It's just three extra characters anyways.
Also, put your code into a $(document).ready(function(){}); function like this:
$(document).ready(funciton(){
$(".notification").show();
});
To minimize the amount of code you're putting in, you can just use this instead:
$(function(){
$(".notification").show();
});
$(function(){}); can replace $(document).ready(), as by default jQuery selects the document.

Categories

Resources