Send a dynamic parameter to a jQuery function from code behind - javascript

In code behind I have the following code that gets the [IDphoto] from an SQL database. Now I want to send the IDphoto as a parameter to a jQuery function onClick. How can I do that?
Code behind
sb.AppendFormat("<a onclick='popup()' href='#" + IDphoto + "'>");
jQuery
function popup() {
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
});
}
UPDATE
I've updated the codes based on TrueBlueAussie reply:
photos_sb.AppendFormat("<a href=\"#\" class=\"photo\" data-photo=\"" + IDphoto + "\">");
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
$('a.photo').click(function(e){
// Stop the link click from moving to the page top
e.preventDefault();
var id = $(this).attr("data-photo");
alert(id);
});
});
Nothing is happening. The click doesn't fire the jQuery function!

A few words of advice:
Do not use inline onclick attribute handlers with jQuery. That adds unneeded complexity and separation of the event code from the event registration code.
Use double-quote on HTML attribute values. Most browser accept either, but double-quoting is safer for compatibility.
Also use data- attributes to provide meta-data (rather than bury it in the href). Make the href a plain bookmark link (#).
Use a common class on any photo links to allow simpler jQuery matching (and styling):
$(function(){...}); is a handy shortcut for $(document).ready(function(){...});
e.g
sb.AppendFormat("");
and add a jQuery click handler that looks for clicks on any .photo links:
$(function () {
// Here I want to get the value of IDphoto ...
$('a.photo').click(function(e){
// Stop the link click from moving to the page top
e.preventDefault();
var id = $(this).attr("data-photo");
alert(id);
});
});
Here is a mockup of the above using some sample links:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/wqkxwz2j/

why not just send the IDphoto to same popup function from your Code-Behind:
sb.AppendFormat("<a onclick='popup("+IDphoto+")' href='#" + IDphoto + "'>");
jQuery
function popup(myVarID) {
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
});
}

Not fully understand what you want. But here is example:
Code behind:
sb.AppendFormat("<a onclick='popup("+IDphoto +")' href='#'>");
Javascript
function popup(IDphoto) {
console.log(IDphoto);
}

Related

DOM Manipulation After .load()

Trying to use Rainbow.js for syntax highlighting. I have a pagination navigation that, when being clicked, loads the page (#page2) into the body. It works great, but when I call Rainbow.color() (which searches the DOM for syntax inside pre-defined pre tags), it fails to color it. When the page first loads, I call this event:
$(window).load(function() {
/* Act on the event */
Rainbow.color();
});
And it works just fine! But when I call this function, Rainbow.color() does not highlight anything!
$('.pure-paginator .pure-button').on('click', function () {
$('#content').load('html.html ' + $(this).attr('href'));
Rainbow.color();
});
Help is appreciated, let me know if you need more code!
Ajax is async. Put your call in the ajax callback:
$('.pure-paginator .pure-button').on('click', function () {
$('#content').load('html.html ' + $(this).attr('href'), function() {
Rainbow.color();
});
});

Calling a click event or JQuery function from the code behind VB.NET

I have a JQuery (v1.8) which handles the code after clicking a hyperlink. I would like to call that click or do anything else (as the clicking of the link would) to enforce the JQuery to run from the code behind. Any ideas?
JQuery code:
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery('#lnkShowModule').toggle(
function (){
jQuery(this).html('Hide the Module');
jQuery('.hide-element').toggle();
},
function (){
jQuery(this).html('Show the Hidden Module');
jQuery('.hide-element').toggle();
}
);
});
and this is my link in the ascx control:
<a id="lnkShowModule" href="#"> show the hidden module</a>
any ideas?
add the javascript code inside a function and you can add the following code whereever you want to call the javascript function
Page.ClientScript.RegisterStartupScript(Page.GetType(), "ShowHide", "ShowHideDiv();", true);
#UPDATE 1
function ShowHideDiv(){
$(document).ready(function (){
$('#lnkShowModule').toggle(
function (){
$(this).html('Hide the Module');
$('.hide-element').toggle();
},
function (){
$(this).html('Show the Hidden Module');
$('.hide-element').toggle();
}
);
});
}
also you have to change the " a "
<a id="lnkShowModule" href="#" onclick="ShowHideDiv();"> show the hidden module</a>
If you're already posting back (as you noted in your question that you're wanting to do this from the code-behind), then you can simply set the visibility of the object in question from the code-behind as well.
If your intention is to hide a div, you can turn it into an asp:Panel (MyPanel) (which outputs a div). Then you can simply call:
MyPanel.Visible = False; ' or True
to set the visibility. No javascript/jquery required.

Can't trigger click event on a link

My problem is that I got 2 aspx controls generated like this :
<a id="sortByDate" href="javascript:__doPostBack('sortByDate','')">Date</a>
<a id="sortByLastName" href="javascript:__doPostBack('sortByLastName','')">Last name</a>
so those links allow you to sort the results. I'm trying to put this in a combobox instead of using links.
So I made it like this
<select id="sortBySelect" onchange="javascript:sortBy(this);">
<option value="sortByLastName">Last name</option>
<option value="sortByDate">Date</option>
</select>
with this javascript function
function sortBy(sel) {
var id = sel.value;
$("#" + id).trigger("click");
}
So when you change the selected element in the combobox I want to trigger the click event on the link to call the dopostback to sort.
It does nothing so far. I tried "click", "onclick", "onClick" and nothing works. Unfortunately, this is for IE quirks mode.
I know, this is really not elegant, but I'm really short in time and I need something quick and dirty. I will make an aspx control eventually to handle this nicely.
Any ideas how I could make this work in ie quirks mode?
Thank you
Try changing the location of the page:
document.location = $("#" + id).attr('href');
why don't you just fire the __doPostBack directly:
function sortBy(sel) {
var id = sel.value;
__doPostBack(id,'');
}
Use:
function sortBy(sel) {
var id = sel.value;
alert($("#" + id).length);//just for conforming that the element exists.
$("#" + id).click();}
Actually, jQuery only triggers any event bound to an element. You are trying to call the href action.
If you don't want to change the markup, you could try this solution.
Otherwise, you will have to change your html markup to bind javascript events & then try triggering it.
Good luck!
Everything works as intended!
JSFiddle proof.
Make sure you have an element with the id sortById and sortByLastName !
JavaScript/jQuery
$(document).ready(function(){
$('#sortByDate').click(function(){
alert('Sort By Date Click Event fired!');
})
});
function sortBy(sel) {
var id = sel.value;
$("#" + id).trigger("click");
}
Alternative
Force the window.location change
JavaScript/jQuery
function sortBy(sel) {
var id = sel.value;
window.location = $("#" + id).attr('href');
}
Note: You won't see any change in JSFiddle:
Refused to display 'https://www.google.ca/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

how to create onclick for a link

i have a div for which i set value dynamically during run time, if there is value than i have enable or create a link which will have onclick method where i will call a javascript method.
how to do this in jquery or javascript?
I set value to a div like the following,
document.getElementById('attachmentName').innerHTML=projectInforamtionMap.Cim_AttachmentNames;
this the div :
<tr>
<td align="left"><div id="attachmentName"> </div></td>
</tr>
Kindly help me to find and fix.
Best Regards
You can set a onclick function:
document.getElementById('attachmentName').onclick = function() {};
Assume that your function are previously define like this
function foo(){alert('function call');}
After adding innerHTML
In Javascript
document.getElementById('attachmentName').setAttribute('onclick','foo()');
In Jquery
$("#attachmentName").attr('onclick','foo()');
You have several alternatives
JavaScript:
// var elem = document.getElementById('attachmentName');
elem.onclick = function() {};
elem.setAttribute('onclick','foo()');
elem.addEventListener('onclick', foo, false); // The most appropiate way
jQuery:
// var elem = $('#attachmentName');
elem.click(foo);
elem.on('click', foo);
$('body').on('click', elem, foo);
Between the 3 jQuery alternatives, the last is the best one. The reason is due to the fact that you are attaching an event just the body element. In this case, it does not matter but in other cases, you are probably willing to attach the same event to a collection of elements, not just one.
Therefore, using this approach, the event is attached to the body but works for the elements clicked, instead of attaching the same event to every element, so it's more efficient :)
$('#attachmentName').click(function(){
//do your stuff
})
jquery way:
$("#attachmentName").click(function() {
some_js_method();
});
You can do this without inserting link in the div in following way
document.getElementById("attachmentName").onClick = function () {
alert(1); // To test the click
};
You can achieve it with the help of jQuery as well in the following way.
$("#attachmentName").click(function ()
{
alert(1);
});
for this you have to include jQuery liabray on the page. refer jQuery.com
Still if you forecefully want to include the link in Div then following is the code for it
var link = $("<a>"+ $("#attachmentName").text() +"</a>");
$("#attachmentName").html($(link);
link.click(function () {
alert(1);
});
Hope this would help.
as i was converting a classical asp details page to a one-page ajaxified page, i converted the existing links in the page to get the details loaded in the DIV in the same page. i renamed the href tag to dtlLink and got that data in the jquery load() function.
detail.asp (server.urlencode is added and required here )
<a href=""#"" onclick=""javascript:LoadDetails(this)"" dtllink="detail.asp?x=" & Server.URLEncode(Request("x"))&y=" & Server.URLEncode(Request("y")) > link text </a>
parent.asp (it has some extra code for holdon.js spinner image, button enable/disable, results div show/hide)
Jquery
function LoadDetails(href) {
//get the hyperlink element's attribute and load it to the results div.
var a_href = $(href).attr('dtllink');
console.log(a_href);
$('#divResults').html('');
DisplayHoldOn();
$('#divResults').load(a_href, function (response, status, xhr) {
$('#divCriteria').hide();
HoldOn.close();
if (status == "error") {
var msg = "There was an error: ";
$("#divResults").html(msg + xhr.status + " " + xhr.statusText);
$('#divCriteria').show();
$("#cmdSubmit").removeAttr('disabled');
}
});
}

Writing javascript with jquery and using a variable

As a javascript newbie, I am struggling to use a script with a variable that runs a bit of JQuery (and also struggling to use the right language here, I'm sure!)
The action I want to happen is to change the CSS class of a specific div, e.g. #det90, for which I have the following code (I have used the same on a $(window).load(function() and it works on a different set of divs):
$("#MYDIVIDHERE").switchClass("sdeth","sdet",50);
So I wrote the following:
<script type="text/javascript">
$(function revealCode(divID) {
$("#divID").switchClass("sdeth","sdet",50);
})
</script>
and called it from an anchor with:
onClick="revealCode('det90');"
I think the problem is that I don't know how to write the script and pass the variable in the brackets (divID) to the next line (where I've got "#divID"). Any help or pointers to tutorials gratefully received!
Solution
Thanks to all, but particularly to Caleb. I've scrapped the general function and the onClick, added an ID to the anchor and inserted the following for that anchor (and then repeated that for each anchor/div combination I want to use it on ... and it works :D
$("#linkID").click(function() {
$("#divID").switchClass("sdeth","sdet",50);
});
Change your code to: onClick="revealCode('#det90');"
$(function revealCode(selector) {
$(selector).switchClass("sdeth","sdet",50);
})
jQuery is powered by "selectors" -- similar to CSS syntax.
Don't quote your variable name. Just quote the "#" prefix.
<script type="text/javascript">
$(function revealCode(divID) {
$("#" + divID).switchClass("sdeth","sdet",50);
})
</script>
Change to:
<script type="text/javascript">
function revealCode(divID) {
$("#" + divID).switchClass("sdeth","sdet",50);
}
</script>
You don't need $() around the function
$("#divID") will look for an element with the ID divID, and not what was specified in your function parameter
This won't work. revealCode is local to that scope and not known outside. Also, you're not using the argument you've passed into your handler.
If you're using jQuery, use it to bind to the handler as well like this:
jQuery(document).ready(function() {
function revealCode(divID) {
$("#" + divID).switchClass("sdeth","sdet",50);
}
jQuery("#divID").click(function() {
revealCode('det90');
});
});
Move your onclick event handler attachment into javascript code. You should try not to mix your functional code with your html.
Anonymous version:
$('#myDiv').click(function () {
$(this).switchClass("sdeth","sdet",50);
});
Normal version:
var myFunction = function (element) {
$(element).switchClass("sdeth","sdet",50);
};
$('#myDiv').click(myFunction, {element: this});

Categories

Resources