jQuery function not called when runat = "server" is used in an image - javascript

I have an html image tag in an aspx page. The image when clicked performs certain jQuery functions. Recently I added the attribute to the image because I wanted to change the source of the image based on certain validation. But the problem is I am not understanding why the jQuery functions are not called when I click the image, when it used to work perfectly fine when there was no attribute. I have looked at every possible solutions on the web and tried it as well but none did work.
Please find the below codes and let me know what I can do to make this work.
ASPX page: Jquery functions and the image tag code:
<script type="text/javascript" src="<%= ResolveUrl("~/Common/Scripts/jquery-1.9.1")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Common/Scripts/jquery-ui-1.10.3.custom.min")%>"></script>
$(document).ready(function () {
//doing something
$("#imgseats").click(function () {
// doing something
});
});
</script>
<ul id="list">
<li id="listSeats" runat="server">
<img id="imgseats" class="HeaderGradient" src="../../Common/Images/seatsPCPI.jpg" alt="Seats" runat="server" />
//some code here
</li>
</ul>
Code behind aspx.cs
if(condition)
{
imgseats.Attributes["src"] = "../../Common/Images/seatsPCPI_MandatoryPI.jpg";
}
Please help me with resolving this problem. Thanks in advance.

Check the "UniqueID" generated for the image. ASP.NET is changing the ID for elements runat=server to something like "ctl00_imgseats". Depending on the depth of the DOM it can be a very long ID.
Or change the jQuery selector to the class: $('img.HeaderGradient') for example. You can also use a dummy css class.

for access any control of runnat="server" in jquery you need to access them by their unique ID i.e. $('#<%=imgseats.ClickID%>') instead of $("#imgseats").
$(document).ready(function () {
//doing something
$('#<%=imgseats.ClientID%>').click(function () {
// doing something
});
});

Related

How do I change placeholder content in javascript per page

How do I update content loaded with Jquery .load() with javascript?
I'm using two placeholders on every page: one with the navigation bar, and one with the main skeleton of the content, like this:
<body>
<div id="nav-placeholder">
</div>
<div id="content-placeholder">
</div>
</body>
The nav bar and content are both in seperate files and are loaded into the pages with an external javascript file like this:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
So far, it all works nicely. Now, I'm trying to alter the content separately for each page (with JS)
Part of content.html is for example
<h2 id="subheader1">Title</h2>
I'm trying to change the #subheader1 content in the javascript file like so:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
but that doesn't work (this is aimed at all pages, but it still doesn't work). Probably because it's only seeing the placeholder DIV in index.html and not it's content?
I tried placing the subheader1 div in the index.html to test, and then it did work, but that would take away the efficiency of the placeholder.
Is there any way to do this (or another way to be more efficient with pages with the same (DIV) layout but different text?)
Thanks!
The load method is not synchronous, so
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
is executed before the html is loaded in the page.
The doc suggest using a callback function.
it is executed after post-processing and HTML insertion has been performed
I had success using this in my js file:
$(document).ready(function() {
$(function(){
$("#nav-placeholder").load("./nav.html", function() {
document.getElementById("insideNav").outerHTML = "It works !" ;
});
});
});
with <h2 id="insideNav">Original Nav Bar</h2> in my nav.html.

Javascript or css onclick function hide

I have the href: <a class="like_counter_wrap fl_l" onclick="openFullList();">
I need to hide the function openFullList();. How to do this?
Ok, the code:
<!--Vk.com-->
<div class='scVK scSB'>
<script type='text/javascript' src='http://userapi.com/js/api/openapi.js?49'></script>
<script type='text/javascript'>VK.init({apiId: 2010456, onlyWidgets: true});</script>
<div id='vk_like'></div>
<script type='text/javascript'>
VK.Widgets.Like('vk_like', {type: 'button', height: 20});
</script></div>
is forms <a class="like_counter_wrap fl_l" onclick="openFullList();">. The idea is to prevent function "openFullList();"
JavaScript is client side code, meaning ALL code is viewable by somebody in a browser, as long as they dig deep enough. Sure, you could minify it like tyme suggests, but be aware one can still use a tool like the Chrome web inspector to find the exact line number and snippet of code run for the click event.
Basic answer: if the flow of how your code runs must not be "visible" to the end client, JavaScript is not the language you want to be using.
You can change your markup to this
<a class="like_counter_wrap fl_l">
now you wrap your function in a script tag and place it before the closing tag body (for performance)
<script>
function openFullList(){
//do something
}
var button = document.querySelector(".like_counter_wrap");// document.querySelector("a");
button.addEventListener("click",openFullList,false);
<script>
or put it in a file and bind it to your HTML like this
<script src="script/myscript.js"></script>
Hi what if you do like below,
<a class="like_counter_wrap fl_l" onclick="openFullList(true);">link1</a>
<a class="like_counter_wrap fl_l" onclick="openFullList(false);">link2</a>
then script as follows,
function openFullList(val) {
var showList = val;
if (showList)
{
//allow your function to execute
}
else
return false; //dont allow the function to execute simple by returning false
}
So, If you want to show list if user clicks on the link then pass true while calling the function or else pass false...hope it helps...

How to get element inside div, inside another html and inside another div?

In "first.html", I load a page inside div using Javascript.
<div id="content">
<div id="lot">Next</div>
</div>
<script>
function load_page()
{
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>
Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".
<script>
document.getElementById('banner').style.display = "none";
</script>
The weird thing is the banner in "first.html" disappears but not the one in "next.html".
So one way I think to get away with it is if I could reference like this.
"first.html" --> "lot" --> "next.html" --> "banner"
Then try to make it disappear.
I also try this in "next.html", but not working.
<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>
Thanks for the hint.
Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".
I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"
Iframe syntax:
<iframe src="URL" width="xxx" height="xxx"></iframe>
I think your problem comes from the folowing line :
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"> </object>'\
Mabye you can do the same thing with a simple hyperlink:
Next
Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html

How to call js / script within href

I've been using this successfully in my template:
<span class="sharethis-text">
<p>More Options</p>
</span>
<script src="http://w.sharethis.com/button/buttons.js"></script>
<script>
stLight.options({
publisher:'******0b-6eed-4740-81e7-aa3ee0bd9f85',
});
</script>
But now I want to call this function in this:
<More-sharebar>More options</More-sharebar>
How is it possible to include the script properly?
Apologies if the answer is easy. I'm a complete beginner. I've been searching but I can't find how to do it.
Edit: Thanks for the answers so far, and I think now I have the function stLight.options( but I don't know how to include the external js file. Instead of editing the functions.php file, is it possible to simply include the script above in my HTML, but give it a name, and somehow call that name in the href?
The other thing: the function as it original works triggers on hover. I'd like to retain that, if possible.
Apologies for my ignorance.
Javascript supports following syntax :
<a href='javascript:alert('Hi')'>ClickMe</a>
This should solve your problem.
This is the reference Draft
In mark <a> define attrib:
onclick="javascript:functionName();"
or
onclick="return functionName(attribs)"
This should help.
But it should be done like this:
<a id="do_something">
aaa
</a>
<script type="text/javascrip">
$.(function(){
$('a#do_something').click(functionName());
});
If you have in your file.js the:
function helloWorld(){...}
You call in the href with a event this function:
More options
Just put this Javascript inside your href:
More options
in the HREF, you'll call the function you need, not the script file itself.
So you have to include your script in your HTML file (if possible at the end of the file, not in the header) and then call the method/function from your href.
Write a function that calls the function you want. According to your
post, maybe it's stLight.options? Return false if you don't want the navigating behavior of the a link.
function clickHandler() {
stLight.options({
publisher:'******0b-6eed-4740-81e7-aa3ee0bd9f85',
});
return false;
}
Add the onclick handler to the a link.
<More-sharebar>More options</More-sharebar>

Putting value into Textbox upon clicking Div

I am currently trying to make a wallpaper changer for my page.
At the minute, I would like to put the URL of a wallpaper into a text box when it's respective DIV option in a CSS menu is clicked.
Here is my JQuery
$("div.bg8").click( function() {
var BackgroundURL = 'Styles/hongkongskyline.jpg';
var TheTextBox = document.getElementById('<%=BackgroundsTxt.ClientID%>');
TheTextBox.value= BackgroundURL;
alert('This has worked'); });
.. and my HTML...
<ul><li class="#cssmenu"><a>
<div id="bg8" runat="server">
<table style="height: 16px; width:33%;">
<tr>
<td>
<img src='Styles/hongkongskyline.jpg' width="34px" height="32px" /></td> <td>Hong Kong Skyline </td>
</tr>
</table>
</div>
</a></li></ul>
Unfortunately, nothing seems to be happening when I click the DIV..
Does anybody see any problems which I can't?
Many thanks.
Several problems here.
First, you aren't referring to your div's ID in your jQuery - you're referring to a class called bg8. Try this:
$("#bg8")...
Next, you're mixing in some native-dom stuff into your jQuery. Instead of
document.getElementById('<%=BackgroundsTxt.ClientID%>');
try
$("#<%=BackgroundsTxt.ClientID%>");
and make sure the ID is resolved by looking at the source to your page.
And lastly, to set the value of the textbox:
theTextBox.val(BackgroundURL);
Your whole function could be
$("#bg8").click( function() {
$("#<%=BackgroundsTxt.ClientID%>").val('Styles/hongkongskyline.jpg');
alert('This has worked');
});
My strategy is to test event handlers with simple alerts before moving on to the real logic.
your jQuery states $('div.bg8') , this calls for a div with the class bg8,
you have not set the class, but rather the id of your div as bg8
change this: $('div.bg8') to $('#bg8')
;)

Categories