The functions .prev() and .closest() not working as expected - javascript

This is my .cshtml code :
<div class="col-xs-4 col-md-2">
<div class="form-group">
<input asp-for="FileName" type="hidden" class="hdnFileName" />
<input type="file" asp-for="UploadFile" accept=".csv" />
<button id="btnUpload" class="btn btn-tertiary btnFileSelect" type="button">Browse</button>
</div>
</div>
I need the id of the FileName on click of the upload button.
Script :
$(".btnFileSelect").each(function () {
var btnId = $(this).attr("id");
//The below code is not working and throwing an undefined value.
//Tried .closest() which is not working either.
var fileName = $(this).prev('.hdnFileName').attr('id');
})
Variable fileName is showing undefined.
What do I change? Is it being a hidden field the issue?

prev doesn't scan, it will only ever return a jQuery object for the previous element (if the selector matches) or an empty one (if it doesn't). From the documentation:
Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.
(jQuery's set-based nature makes that slightly less clear than it could be, but basically you'll get the immediately-previous element if it matches, or none if it doesn't.)
If you want to scan, use .prevAll().eq(0). Or in this case, I'd probably use siblings:
var fileName = $(this).siblings('.hdnFileName').attr('id');
(I'm assuming something at some point adds an id to that element, since it doesn't have one in the markup you've shown.)

Related

Select the custom tag from button attribute

I have created a button element structure like below
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>
Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.
The snippets I have used to find is as below
jQuery("mycustomtag").each(function(){
//process here
});
PS this works fine in the following case:
<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>
your code
jQuery("mycustomtag")
will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?
try following
//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);
//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
id="btnCustom"
>
You couldn't find them since the value of an attribute is considered just like a string.
To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop(), like :
$('input').each(function() {
$(this).val();
$(this).prop('title');
});
PS this works fine in the following case
That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.
$('input').each(function() {
console.log($(this).val());
console.log($(this).prop('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">
In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.
To select an element based on its value, use the following syntax:
$("input[value='<mycustomtag data-id=15>'")
To select an element based on its title works similarly.
If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span.
So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.
jQuery("input").attr("title");
jQuery("input").val();
Demo:
console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>

Replacing a number found on multiple instances in div element with another number

As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.
However, my jQuery isn't working.
jQuery(".create-new-location").click(function() {
jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
<div class="input-selection title-edit-header">
<div class="text-input">
<input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
</div>
</div>
<div class="open-block pencil-edit" data-row-id="location-header-0"></div>
</div>
You have to set the html like this
jQuery(".create-new-location").click(function() {
var the_html = jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
jQuery("#header-logo").html(the_html);
});
But this is not a good practice!!
When you need to change only the attribute of an <input>, why change the whole #header-logo, right? When you re-draw html like this, you risk losing event-handlers binded to the elements you have just re-drawn.
jQuery(".create-new-location").click(function() {
var elements = jQuery("#header-logo").find('input[name]'); /*all input with name*/
elements.each(function(el){
var the_name = el.attr('name').replace(/\[0\]/g, '['+(1)+']');
el.attr('name', the_name);
});
});
Regexing the html is never a good idea.
As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.
The approach you used, and even the accepted answer here, will not modify the containing div with id="header-logo" which contains several of these references. Moreover, there are significant issues with simply replacing existing dom elements with freshly regexed ones in validation cases (as in, this may break your validation).
The approach you should use is to specifically target the attributes that contain these references, and then only modify those. Here is a general approach which looks in all attributes and modifies the occurrence of [0 (0 being the value of before) into [1 (1 being the value of after) as well as modifying the occurrence of -0 (before = 0) to -1 (after =1).
This will prevent removing any existing event handlers from the elements, as well as a number of other issues associated with regexing straight html and then replacing the dom element with the that result.
$.fn.indexUpdate = function(before,after){
$("*",this).add(this).each(function(){
$(this.attributes).each(function(){
this.value = this.value.replace(new RegExp('\\b\\-'+before+'\\b','g'), '-'+after);
this.value = this.value.replace(new RegExp('\\['+before, 'g'), '['+after);
});
});
};
$("#header-logo").indexUpdate(0,1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
<div class="input-selection title-edit-header">
<div class="text-input">
<input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
</div>
</div>
<div class="open-block pencil-edit" data-row-id="location-header-0"></div>
</div>
This statement jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'); retrieve the html inside the element that have id as header-logo and replace every 0 inside the html string with 1 But it doesn't assign the modified string again to the element So you may want to use following code.
jQuery("#header-logo").html(jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'));
Try this:It will replace all existence of '0' with '##'
$(".create-new-location").click(function() {
$("#header-logo").html().replace(/0/gi, '##')
});

Jquery replacing image issue

I'm using the following script to change an image based on the value entered.
var siteLogo = $('input#site-logo').val();
$('#site-logo, img').attr("src", siteLogo);
html
<div id=site-logo>
<img src="default.png" width="285px" height="100px">
</div>
<input id="site-logo" class="input-xlarge" placeholder="http://" type="text">
<button id="add-site-logo" class="btn" href=""> Add</button>
My issue is that it's changing ALL the images on the page to the value in site-logo. How do I make it so that ONLY the value in site-logo gets changed and not other random stuff on the page?
Try
var siteLogo = $('input#site-logo').val();
$('#site-logo img').attr("src", siteLogo);
There are two problems here:
You have an id field set for two elements. It should be unique.
The selector you're using selects multiple things: the #site-logo selector selects an item with the site-logo ID, the img selects all images on your page. The comma in the selectors defines basically an "or" across all your selectors; it will select an element if it matches #site-logo or it matches img.
Change your selector to this:
$("#site-logo img").attr("src", siteLogo);
You'll want a different id for your <input> tag in this case.
Remove ',' from jQuery selector
$('#site-logo img').attr("src", siteLogo);
$('#site-logo img') means all images inside #site-logo
$('#site-logo, img') means #site-logo plus all images.
Try this instead:
$('img','#site-logo')
Or better:
$('#site-logo').find('img')

Access div hidden parameter

I'm iterating over a div using :
Can I access a hidden parameter in this div within the iteration ?
<DIV>
<div id="myDiv" <input type="hidden" name="Language" value="English"> />
</DIV>
$('#myDiv div.id').each(function() {
//access a hidden parameter of the current div here
});
You can use one of the following methods:
$('#myDiv div.id').each(
function(){
parameter = $(this).attr('data-hidden-parameter');
/* or:
parameter = $(this).data('hidden-parameter');
*/
});
The first parameter = $(this).attr('data-hidden-parameter') requires the following structure:
<div class="id" data-hidden-parameter="value"><!-- other stuff --></div>
Whereas the latter works with getting/setting with the data() method of jQuery:
$(selector).data('hidden-parameter','value'); // sets
$(selector).data('hidden-parameter'); // gets
If you mean retrieving text, or other content/attributes, from a hidden element that's a child of the div.id element, with mark-up such as:
<div class="id">
<input type="hidden" value="somethingOrOther" />
<span style="display: none;">Some text in a hidden element</span>
</div>
You could retrieve that value with:
$('#myDiv div.id').each(
function(){
parameter = $(this).find('input:hidden').val();
/* or:
parameter = $(this).find('span').text();
});
Note your jQuery selector implies you're iterating over a number of elements, based on the class of those elements, while your class-name, id, implies you're trying, instead, to search based on the id of an element. This might be pseudo-code to demonstrate your approach, but please don't use a class-name of id. It's perfectly valid, but it's terribly confusing. Albeit this is simply my own, personal, objection and response.
Edited, to supply a more targeted answer, by amending one of the above suggestions with an appropriate selector:
var parameter = $('#myDiv').find('input:hidden[name="Language"]').val();
References:
attr().
data().
find().
:hidden selector.
text().
val().
your html code is invalid: if you mean
<div id="myDiv"><input type="hidden" name="Language" value="English"></div>
this will target your input
$('#myDiv input[type="hidden"]')
You cannot put a tag inside another tag (or, in HTML or HTML-compatible XHTML, use self-closing tag syntax on a div). Your HTML is invalid and subject to whatever error recovery parsers care to put it though.
If you had, for instance:
<div id="myDiv">
<div class="id">
<input type="hidden" name="Language" value="English">
</div>
</div>
Then you could do:
$('#myDiv div.id').each(function(index, element) {
var foo = $(element).find('input').val()
});
… but you are probably better off using data-* and jQuery's data() method

Prototype - Element with styleclass in element with an id?

First of all: I'm new to Prototype JS Framework!
Until now I worked with jQuery.
In jQuery I am able to get an element by coding:
$('#myitemid .myitemclass').val()
html:
<div id="myitemid">
<input type="text" class="notmyclass" />
<input type="text" class="myitemclass" />
<input type="text" class="notmyclass" />
</div>
But how to do this in prototype?
I tried to code:
$('myitemid .myitemclass').value
but this won't work.
Can U help me plz?
Use $$ which returns all elements in the document that match the provided CSS selectors.
var elemValue = $$('#myitemid input.myitemclass')[0].getValue();
Also input.myitemclass is better than .myitemclass because it restricts search to input elements with class name .myitemclass.
If you want to get the named element myitemid, simply use $('myitemid'). This is equivalent to $('#myitemid') or document.getElementById('myitemid'). Your case is more complex, since you want to select a child of a named element. In that case you want to first find the named element, then use a selector on it's children.
$('myitemid').select('input.myitemclass')
Then, to access it's value (since it's a form element), you can add .getValue().
$('myitemid').select('input.myitemclass').getValue()
Should be faster
$("myitemid").down("input[class~=myitemclass]").value

Categories

Resources