I want to open link Using jquery - javascript

I want to open link using Jquery by clicking on anchor by using its anchor id in change function. Please help me to open it
<div id="div1" style="display:none">
<a id="0" href="http://www.friferie.dk/inspiration/Belgien">Belgium</a>
<a id="1" href="http://www.friferie.dk/inspiration/Bulgarien">Bulgarien</a>
<a id="2" href="http://www.friferie.dk/inspiration/Danmark">Danmark</a>
</div>
**I want to pass id then open particular href into it**
$ ("").change(function () {
}

Long version (for readability):
$ ("#someselector").change(function () {
// Get selected value
var val = $(this).val();
// Use the selected value to create a jQuery ID selector to get the link
var link = $('#' + val);
// get the href value
var href = link.attr("href");
// Change the browser location
window.location = link;
});
Or simulate a link click:
$ ("#someselector").change(function () {
// Get selected value
var val = $(this).val();
// Use the selected value to create a jQuery ID selector and get the link
var link = $('#' + val);
// Click the link
link[0].click();
});
I tend to use [0].click() and not the jQuery click() here as it hits the underlying browser implementation (and we won't care about the jQuery extras as the page will change).
Notes:
Both examples can be shortened, e.g. by removing local variable, but this was for explanatory purposes
e.g.
$ ("#someselector").change(function () {
window.location = $('#' + $(this).val()).attr("href");
});
or
$ ("#someselector").change(function () {
$('#' + $(this).val())[0].click(); // Or `).click()` is you want it shorter
});

yes with select by a dropdown of a dropdownlist using its id
As per this comment, you can do this :
$("#dropdown").change(function(e){ // change event on dropdown
$('#'+this.value).click(); // and apply the click on specific anchor
// $('#'+this.value).get(0).click(); // comparing to selected value
});

<div id="div1" style="display:none">
<a id="0" href="#" onclick="onChange(this)">Belgium</a>
<a id="1" href="#" onclick="onChange(this)">Bulgarien</a>
<a id="2" href="#" onclick="onChange(this)">Danmark</a>
</div>
<script>
function onChange(obj){
var id= $(obj).attr("id");
switch(id){
case "0":
window.location.href="http://www.friferie.dk/inspiration/Belgien";
break;
case "1":
window.location.href="http://www.friferie.dk/inspiration/Bulgarien";
break;
case "2":
window.location.href="http://www.friferie.dk/inspiration/Danmark";
break;
}
}
</script>

Related

Selecting an element depending on attribute's value

How can I select an element on the form and perform click action on it using jQuery? Here's an example for what I want:
If I have many image buttons created on the runtime and here's one of them:
<img class="arrow arrowDown" onclick="toggleMyChildren(this);" alt="" src="/sp.gif" complete="complete" svalue="2"/>
How can I select this element and perform "Click" action on it depending on the value of attribute's (svalue) value?
$(document).ready(function() {
$("img[svalue=2]").on("click", function() {
var attr = $(this).attr("svalue")
alert(attr);
});
});
or if you need attribute on click :
function toggleMyChildren(ooo) {
var attr = $(ooo).attr("svalue")
alert(attr);
}

jQuery html onclick storing anchor ID, then pulling content from a javascript array

I'm trying to create a html anchor that has a unique ID and then when a user clicks the anchor, the ID gets passed to javascript via the onclick html tag and then a javascript script reads the ID and displays the content in a div. We're using jQuery library for this.
what I have so far:
<a id="MyID1" onclick="var ClickVariable=this.id;return false">1</a>
<a id="MyID2" onclick="var ClickVariable=this.id;return false">2</a>
<script>
var ClickVariable;
var ContentBox = [];
ContentBox[ClickVariable] = "Content for MyID1";
$(ClickVariable).click(function() {
$('.dropdown-menu-content').html(ContentBox);
});
</script>
The above does not work however we have an alternative that works but is not efficient.
<a id="MyID1">1</a>
<a id="MyID2">2</a>
$('#MyID1').click(function() {
$('.dropdown-menu-content').html('Text 1');
});
$('#MyID2').click(function() {
$('.dropdown-menu-content').html('Text 2');
});
As you can see the above one would work but is very repetitive for our needs because we have a large list to enter.
Here is a jsfiddle of the working one that is a tedious repetitive task:
http://jsfiddle.net/2z7o5hn3/
You can reuse the same handler like so:
//mapping id to string to display
var data = {
'MyID1': 'Text 1',
'MyID2': 'Text 2'
}
//shared click handler
var displayEl = $('.dropdown-menu-content');
function handler() {
displayEl.html(data[this.id]);
}
//add click handler to each id
$.each(data, function(k,v) {
$('#'+k).click(handler);
});
http://jsfiddle.net/2z7o5hn3/2/
Give all anchor tags a class and access it like this:
HTML:
<a id="ID1" class="clickVariables" href="#">ID1</a>
<a id="ID2" class="clickVariables" href="#">ID2</a>
JS:
$('.clickVariables').on('click', function(e){
e.preventDefault();
$('.dropdown-menu-content').html($(this).attr('id'));
})
do you mean like this? => DEMO
var texts=['Text 1','Text2'];
$('a[id^=MyID]').click(function() {
$('.dropdown-menu-content').html(texts[$(this).text()-1]);
});

Javascript - selecting and .click()

I'm trying to automate a click when visting a website. This is the HTML I'm looking at.
<div class="box_wrapper">
<a id="itemcode_11094414" class="box">7.5</a>
<a id="itemcode_11094415" class="box">8</a>
<a id="itemcode_11094416" class="box">8.5</a>
</div>
when I select the size, say for instance size 8, the class= tag turns to "box active" like so,
<div class="box_wrapper">
<a id="itemcode_11094414" class="box">7.5</a>
<a id="itemcode_11094415" class="box active">8</a>
<a id="itemcode_11094416" class="box">8.5</a>
</div>
How can I go loop through the class and select a desired size? Also, I was just tinkering around and noticed that I had a hard time simulating a click on the add to cart and other buttons. For the add to cart the HTML looks like this,
<div class="add_to_cart">
<div class="add_to_cart_left">
<img id="add_to_bag_btn" alt="Add To Bag" src="/images/add_to_bag.gif"></img>
<img id="add_to_bag_btn_processing" alt="" src="/images/add_to_bag_processing.gif"></img>
</div>
</div>
Is this the correct chunk of HTML I should be looking at for a simulation of a click?
Since it's Christmas and you sounded excited to see jQuery in action I created a fiddle for you. Here is a sample of what you (could) want using jQuery: http://jsfiddle.net/akkJ5/2/
The code for selecting sizes and twiddling active classes is as follows:
var selectedSize = '';
$(".box").click(function(){
$(".box").removeClass('active');
$(this).addClass('active');
selectedSize = $(this).html();
$("#messages").html(selectedSize +" was selected");
});
In it I create an event listener for clicks on all box class elements. Since only one should be active I remove the active class from all box class elements then add active to the clicked box. I save the innerHTML of the selected link as selectedSize, and write it to an element for display sake.
In terms of simulating a click on a button you could do something like this:
$(".add_to_cart").click(function(){
alert('cart clicked');
});
$(".add_to_cart").trigger('click');
Updated
To attach event to all the classed you can do
var selectedvalue = '';
for(var i = 0; i < document.getElementsByClassName('box').length; i++ ) {
var d = document.getElementsByClassName('box')[i];
d.onclick = function (e) {
selectedvalue = this.text;
this.className = this.className + " active";
}
}
Check http://jsfiddle.net/raunakkathuria/Nv8t2/2/
To navigate through classes and add your class to the link that has same value
JS
var value = 8;
for(var i = 0; i < document.getElementsByClassName('box').length; i++ ) {
var d = document.getElementsByClassName('box')[i];
if(d.text == value) {
d.className = d.className + " active";
}
}
To simulate the click handler for the add to cart you can enclose them to
<a href="javascript:void(0)" onclick="myJsFunc();">
<img id="add_to_bag_btn" alt="Add To Bag" src="/images/add_to_bag.gif"></img>
</a>
If you want to send it some link update this href="javascript:void(0)" onclick="myJsFunc();" to href="your_link"
Check http://jsfiddle.net/raunakkathuria/Nv8t2/1/

how to pass runtime parameters in jquery functions?

I m new to jquery. My requirement is to pass rowid(unique id of each record of a table) in a jquery function. I can get rowid only at runtime. so how can I bind click event to the tag whose id is this rowid.
Upd
Del
$(what to pass here).bind('click',function(ev) {
_operation(para1,para2); // function which is going to perfom action
ev.preventDefault();
return false;
});
get the id , and acording to id do what ever you want
$('a').on('click',function(){
var id = $(this).attr('id');
if(id == //what you want)
{
//function 1
}
else
{
//function 2
}
return false;
});
If there are any similarities between the IDs, you can use one of the attribute selectors such as:
ID contains
$('[id*="something"]')
ID begins with
$('[id^="something"]')
http://api.jquery.com/category/selectors/
A better approach would be to place all of the dynamically named anchors into a container, and then select on that:
<div id="container">
<a ...></a>
<a ...></a>
</div>
Then you would select all the child anchors:
$('#container > a').click(...);
It's hard to find a good selector from so few HTML code. Use a class on your markup if possible:
<a class="roww" href="javascript:void(0)" id="`string(rowid(Gatepass))`">Upd</a>
<a class="roww" href="javascript:void(0)" id="`string(rowid(Gatepass))`">Del</a>
then you can use $('.roww') to query your nodes.
Here's what you can do to get the id from the event handler:
function( ev ) {
//wrap the element with jQ:
var jel = $(this);
//Then access attributes with .attr() getter:
var id = jel.attr('id');
... //do whatever you want now.
... // there's a quicker alternative to get the id without jQuery, simply:
... // var id = this.id
}
if the id comes dynamically from the server, put inside the function the same id + hash for id selctor
$(what to pass here) => $("'#" + string(rowid(Gatepass)) + "'")

Jquery detecting clicked element id

I'm trying to use the same function to slide up and down a text area. using jquery's slidetoggle.
How can I make javascript detect the clicked element in order to know which box to expand.
Here is what I have
function slidedown(id){
$(id+'text').slideToggle(500);
}
that is my function
in my html I have this
<a id="reroof" href="javascript:slidedown(this)">reroof</a>
the section i want to expand is called rerooftext
however when I check the value of id.id I says undefined.
Any ideas?
try the following code:
html code:
<a id="reroof" href="#" onclick="javascript:slidedown(this)">reroof</a>
JS code:
function slidedown(val){
var id = val.id;
alert(id);
$(id+'text').slideToggle(500);
}
In html you are passing the element(this refers the element not an id)
Working Example:
http://jsfiddle.net/jAkMq/
In your HTML:
<a id="reroof" href="#">reroof</a>
In your javascript:
$("#reroof").click(function (e) {
var id = "#" + this.id + "text";
$(id).slideToggle(500);
e.preventDefault();
});
try this
<a id="reroof" href="javascript:void(0)" onclick="slidedown(this)">reroof</a>
function slidedown(obj){
$(obj.id+'text').slideToggle(500);
}
javascript:slidedown(this). here this will be the element not the id

Categories