I wish to pass 'selectlang' parameter in javascript and redirect to the MVC controller but the var 'selectlang' have error and mention that it does not exist in current content? Please guide me thanks!
My javascript:
$('.filterlang').on("click", function () {
var selectlang = document.getElementById("Language").value;
location.href = '#Url.Content("~/SURV_Main/SURV_Main_Details/?key=" + Model.Survey_Key +"&Language=" + selectlang)';
});
filterlang is button class and "Language" is dropdownlist id.
Have you tried this:
$(document).on(".filterLang", "click", function(){
var selectedLang = $("#Language").val(); // if it is normal dropdown, this will work for both cases
var selected2Lang = $("#Language").select2("val"); // if it is select2 dropdown
window.location = '#Url.Content("~/SURV_Main/SURV_Main_Details/?key=" + Model.Survey_Key +"&Language=' + selectlang + '")';
});
Hope this helps.
Related
I have a problem in which I have generated name of check box dynamically , which comes inside a loop, I have added loop id to the name and the name is generated for each row of the table (which is still the same ), I am trying to capture this variable in jquery , the expression comes fine but while running the code I am getting error "Uncaught Error: Syntax error, unrecognized expression:" , below is my Jquery code :
$('.select_all').on('click',function(){
var id = $(this).attr('id');
console.log("inside select all click id is :" + id)
var cbox = "'"+id+"checkBox"+"'";
var c ="\"input[name="+cbox+"]\"";
if($("#" + $(this).attr(id) + " INPUT[type='checkbox']").attr('checked', true)){
console.log("inside this");
$(c).each(function(){
console.log("inside ckbox")
this.checked = true;
});
}else{
$(c).each(function(){
this.checked = false;
});
}
});
here the variable c is formed like "input[name='1checkBox']" which is correct , but when it comes to the $(c).each part , it throws the above mentioned error. Can some let me know how the dynamic expressions are created and run in jquery . Thanks in advance.
You can try:
$(`input[name='${cbox}']`)
Example:
const name= "password"
console.log($(`input[name="${name}"]`)[0])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="password"/>
Ditch the redundant " marks enveloping the selector: instead of
var c ="\"input[name="+cbox+"]\"";
do simply
var c ="input[name="+cbox+"]";
I could resolve my issue by changing the code , below is the JS code which I used .
$('.select_all').on("click", function(event) {
console.log("inside event propogation")
event.stopPropagation();
});
$('.select_all').on('click',function(){
var id = $(this).attr('id');
var cbox = "'"+id+"checkBox"+"'";
if(this.checked) {
$("[name="+cbox+"]").each(function(){
this.checked = true;
});
}else {
$("[name="+cbox+"]").each(function(){
this.checked = false;
});
}
});
I have a button listener as follows:
$('body').on('click', '.showrecent', function() {
$('#display').toggle();
});
I have a json search(where I am appending a button):
var search = 0;
$.getJSON('data.json', function(data) {
if ((this.Name.toLowerCase()).indexOf(sr) > -1) {
id++;
//blah blah blah
var recent = "<button class = 'showrecent' onclick = 'showrecent(id)'>Recent Transaction</button>";
$('#founded').append(recent);
});
});
Basically, I want to pass id with showrecent function!
Any help is highly appreciated!
If you're wanting each one to have its own id in the function call, you need to concatenate.
var recent = "<button class = 'showrecent' onclick = 'showrecent(" + id + ")'>Recent Transaction</button>";
Another approach is to use jQuery to bind the handler.
id++;
var thisid = id;
$("<button>", {className:'showrecent',
text:" Recent Transaction",
click: function() {
showrecent(thisid);
}
}).appendTo('#founded');
var recent = "<button class='showrecent' onclick='showrecent(" + id + ")'>Recent Transaction</button>";
It is better if you do not use inline event handlers.
var recent = $("<button class ='showrecent'>Recent Transaction</button>");
recent.data("id",id);
recent.on("click",showrecent);
$('#founded').append(recent);
and the function
function showrecent() {
var btn = $(this);
var id = btn.data("id");
console.log(id);
}
If you want to do it the way you are doing it, build up the string.
var recent = "<button class = 'showrecent' onclick = 'showrecent(" + id + ")'>Recent Transaction</button>";
I have a following html string of contentString:
var content =
'<div id="content">' +
'<div>' +
'<input name="tBox" id="select" type="checkbox" value="" '+
'onclick="changeView()"> Select for operation' +
'<p style="text-align:right">View details</p>' +
'</div>' +
'</div>';
Here, How I find the checkbox select by id and add attribute checked on changeView() function?
function changeView(m) {
//find the select id from content string
var checkbox = content.find($('#select'+m));
// Apply the checked property on checkbox.
checkbox.attr("checked","checked");
}
Thanks in advance.
If you convert it to a JQuery object first then you can do it like this:
var contentObj = $(content);
var checkbox = contentObj.find("#select");
checkbox.attr("checked", true);
then if you need it back at html string:
content = contentObj[0].outerHTML;
Note: If outerHTML is not working as expected, the following JQuery can be used as an alternative:
content = contentObj.clone().wrap('<div>').parent().html();
If m is meant to be the id you want to find (e.g. "select"), then use this:
var checkbox = contentObj.find("#" + m);
Live Example: Here is a working example
Here is the complete function for easy reference:
function changeView(m) {
var contentObj = $(content);
var checkbox = contentObj.find("#" + m);
checkbox.attr("checked", true);
content = contentObj[0].outerHTML;
}
You need to compile the string into a DOM object first by wrapping it in a jQuery call first. Then you can use the find method.
So:
var dom = $(content),
select = dom.find('#select');
In any case, there is no need to add the 'checked' attribute, because when you click the checkbox, it will automatically become checked.
If however, you want to still programmatically check it:
select.on('click', function () {
this.attr('checked', 'checked');
});
Simply like this
function changeView(m) {
//find the select id from content string
var checkbox = content.find('#select');
// Apply the checked property on checkbox.
checkbox.attr("checked","checked");
}
if you want to pass id then
function changeView(m) {
//find the select id from content string
var checkbox = content.find("#" + m);
// Apply the checked property on checkbox.
checkbox.attr("checked","checked");
}
Since you're using the onclick handler, you don't really need to do any of that :
in html : onclick="changeView(this);"
function changeView(box) {
if(box.checked) { stuff; }
// or get jquery ref to that box :
$(box).prop("checked", true);
}
I don't know if that title even describes what I want to do, but here goes.
I have some JavaScript, which changes the href of a link, depending on what item is selected in a select box. Here's the code:
function setText(text) {
var selectVal = text;
var url = $('twitter2').attr("href");
url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on';
$('a').attr("href", url);
}
The problem is there are multiple links on the page. Would there be a way to specify which link to change the URL of? Sorry for the woeful explanation, here's the accompanying html.
<twitter2><a><img src="http://stream.cz.cc/images/twitter.png" onmouseover="this.src='http://stream.cz.cc/images/twitterover.png'" onmouseout="this.src='http://stream.cz.cc/images/twitter.png'" /></a></twitter2>
Any advice?
Add an id to your image tag and JQuery select it by the ID.
<img id="THISONE" src="http://stream.cz.cc/images/twitter.png" onmouseover="this.src='http://stream.cz.cc/images/twitterover.png'" onmouseout="this.src='http://stream.cz.cc/images/twitter.png'" /></a>
Javascript:
function setText(text) {
var selectVal = text;
var url = $('twitter2').attr("href");
url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on';
$('#THISONE').attr("href", url);
}
first of all
var url = $('twitter2').attr("href") would give you nothing, as twitter2 does not have any href attribute.
second, you can access your a as:
url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on';
$('twitter2 a').first().attr("href", url).
This will change the href of the first a inside the <twitter2> tag
I have 4 <div> tag and <a> tag for each <div> tags.
In each and every div tag i have inserted 2 span tag and a a tag.
When the a tag is clicked i need to get the product name and the price of that div
Here is the demo http://jsfiddle.net/8VCWU/
I get the below warning message when i use the codes in the answer ...
Try this:
$(".get").click(function(e) {
e.preventDefault();
var $parent = $(this).closest(".item");
var itemName = $(".postname", $parent).text();
var itemPrice = $(".price", $parent).text();
alert(itemName + " / " + itemPrice);
});
Example fiddle
Note that you had a lot of repeated id attributes which is invalid code and will cause you problems. I've converted the #item elements and their children to use classes instead.
jQuery
$(".get").click(function(event){
event.preventDefault(); /*To Prevent the anchors to take the browser to a new URL */
var item = $(this).parent().find('#postname').text();
var price = $(this).parent().find('#price').text();
var result = item + " " + price;
alert(result)
});
DEMO
A Quick Note about id:
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
solution is below
use the blow code and try it
<a data-role="link" href="javascript:linkHandler('<%= obj.productname %>', '<%= obj.price %>')" class="get" >Add <a>
function linkHandler(name, price)
{
alert(name);
alert(price);
var name = name;
var price = price;
var cartItem = new item(name, parseFloat(price));
// check duplicate
var match = ko.utils.arrayFirst(viewModel.cartItems(), function(item){ return item.name == name; });
if(match){
match.qty(match.qty() + 1);
} else {
viewModel.cartItems.push(cartItem);
var rowCount = document.getElementById("cartcontent1").getElementsByTagName("TR").length;
document.getElementById("Totala").innerHTML = rowCount;
}
}
with jQuery
$('a.get').on('click',function(){
var parent = $(this).parent();
var name = $(parent+' #postname').text();
var price = $(parent+' #price').text();
});
Or again:
$('a').click(function(e){
e.preventDefault();
var $price = $(this).siblings('#price').text();
var $postname = $(this).siblings('#postname').text();
alert($price);
alert($postname);
});
Try
function getPrice(currentClickObject)
{
var priceSpan = $(currentClickObject).parent("div:first").children("#price");
alert($(priceSpan).html());
}
and add to your a tag:
...
I'd suggest to use classed instead of id if you have more than one in your code.
The function you're looking for is siblings() http://api.jquery.com/siblings/
Here's your updated fiddle:
http://jsfiddle.net/8VCWU/14/
Hi I cleaned up the HTML as mentioned using the same Id more than once is a problem.
Using jQuery and the markup I provided the solution is trivial.
Make a note of the CSS on the below fiddle
http://jsfiddle.net/8VCWU/27/
$(document).ready(function(){
$("#itmLst a.get").click(function(){
var $lstItm = $(this).parents("li:first");
var pName = $lstItm.find("span.postname").html();
var price = $lstItm.find("span.price").html();
alert("Product Name: " + pName + " ; Price: " + price);
});
});
I have made some changes in your html tags and replace all repeated Ids with class, because you have repeated many ids in your html and it causes trouble so it is wrong structure. In HTML, you have to give unique id to each and every tag. it will not be conflicted with any other tag.
Here i have done complete bins demo. i have also specified all alternative ways to find tag content using proper jQuery selector. the demo link is as below:
Demo: http://codebins.com/bin/4ldqp8v
jQuery
$(function() {
$("a.get").click(function() {
var itemName = $(this).parent().find(".postname").text().trim();
var itemPrice = $(this).parent().find(".price").text().trim();
//OR another Alternate
// var itemName=$(this).parents(".item").find(".postname").text().trim();
// var itemPrice=$(this).parents(".item").find(".price").text().trim();
//OR another Alternate
//var itemName=$(this).closest(".item").find(".postname").text().trim();
// var itemPrice=$(this).closest(".item").find(".price").text().trim();
//OR another Alternate
//var itemName=$(this).siblings(".postname").text().trim();
//var itemPrice=$(this).siblings(".price").text().trim();
alert(itemName + " / " + itemPrice);
});
});
Demo: http://codebins.com/bin/4ldqp8v
You can check above all alternatives by un-commenting one by one. all are working fine.