In my app I have a lot of the same HTML blocks so I don't want to repeat them.
I found out that I can select a block of HTML code and select Extract to User Control option.
It creates an .ascx file with content like this:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="div_field.ascx.cs" Inherits="Obipoly.layout.div_field" %>
<div class="field">
<div class="status_bar">
<div class="hotel_placeholder">
<div class="house_placeholder"></div>
<div class="house_placeholder"></div>
<div class="house_placeholder"></div>
<div class="house_placeholder"></div>
</div>
<div class="players_container">
<div class="player_placeholder"></div>
<div class="player_placeholder"></div>
<div class="player_placeholder"></div>
<div class="player_placeholder"></div>
</div>
</div>
<div class="field_name"></div>
<div class="field_image"></div>
<div class="field_price"></div>
<div class="field_owner"></div>
</div>
I can now use this block in my .aspx file:
<uc1:div_field runat="server" ID="field39" />
Now I need to iterate through my elements (id=field0, id=field1,...) and change some data.
How can I get a reference to each element and find each child in it?
I tried:
for (var i = 0; i < 40; ++i) {
var fieldId = "#field" + i.toString();
var field = $(fieldId);
alert(field); //displays object Object
field.find(".field_name").append($("<p/>", {
text: i
}))
}
But nothing happens. I'm not sure if I can do
var field = $(fieldId);
as if my element were an ordinary html tag.
What if want to find an element which shares the same class with others, e.g. I want to get third <div> with player_placeholder class and give it a unique id?
Or the only way is to create all the elements with JavaScript at runtime?
Thanks.
PS. The reason I can't get any of my fields is that in my DOM I have only body of my control. I thought I would have:
<div id="field20">
<div class="field">
...
</div>
</div>
But actually it is:
<div class="field">
...
</div>
The problem here is that if you were to inspect the ID that asp.net created for you it will not be field39 it would be some custom one, you can however override this behaviour by using ClientIDMode
<uc1:div_field runat="server" ID="field39" ClientIDMode="static" />
Related
I have a html tag like the following:
<div id="slide1" class="mySlides" type="slide" index="1" duration="1100" style="display: block;">
<div id="page_number1" class="numbertext">1/2</div>
<div id="slide_content1"><p>First Slide</p>
</div>
<div id="slide_h1" class="slide_h1"></div>
<div id="slide_h2" class="slide_h2"></div>
<div id="playOptions{slide_number}" class="playOptions">|
<span id="remaining_slide_time{slide_number}"></span> |
<span id="remaining_time{slide_number}"></span>
</div>
</div>
</div>
I need to replace {slide_number} with an integer. Whatever I tried the result doesn't replace the {slide_number}
var str = template.replace("{slide_number}", i);
You can use attribute selector contains that will select all elements where id contains {slide_number} and you can replace that part of the id with the number.
document.querySelectorAll("[id*='{slide_number}']").forEach(function(e) {
e.id = e.id.replace("{slide_number}", 1)
})
<div id="slide1" class="mySlides" type="slide" index="1" duration="1100" style="display: block;">
<div id="page_number1" class="numbertext">1/2</div>
<div id="slide_content1">
<p>First Slide</p>
</div>
<div id="slide_h1" class="slide_h1"></div>
<div id="slide_h2" class="slide_h2"></div>
<div id="playOptions{slide_number}" class="playOptions">|
<span id="remaining_slide_time{slide_number}"></span> |
<span id="remaining_time{slide_number}"></span>
</div>
</div>
in javascript you can find them from
document.querySelector('[id$="{slide_number}"]').id;
and
document.querySelector('[id*="{slide_number}"]').id;
Please read this
If you use jquery then it can be done like below:
$('#playOptions').attr('id','playOptions88');
But I recommend you to use HTML data attribute to distinguish different element. It is a very nice thing to work with multiple elements that can be needed to change dynamically.
If you change your ID attribute dynamically adding some integer number then it may be harder to catch them. Instead, use data like below code.
You can make any element unique setting the data-SOMETHING.
If you write the code below:
$('#playOptions').data('roll','100');
Then the element will be
<div id="playOptions" data-roll="100" class="playOptions">
If you write the code below:
$('#playOptions').data('name','ahmad');
Then the element will be
<div id="playOptions" data-name="ahmad" class="playOptions">
You can then catch the element by the code below:
var name = $('#playOptions').data('name');
console.log(name) //Output should be 'ahmad'
Similarly,
var roll = $('#playOptions').data('roll');
console.log(roll) //Output should be '100'
To learn more about the data attribute please see the link
https://api.jquery.com/data/
This solution worked:
var find = '{slide_number}';
var re = new RegExp(find, 'g');
str = template.replace(re, i);
In my bootstrap website I added fullpage.js, so when a dynamically one class want to add to the page. But two dynamic class added on same element at same time.
So it changed the functionality.
One class only add to the element.
I tried but didn't worked.
Can you please help me to solve this problem.
This is my code, in this code(fp-tableCell) class added two times
<section class="icon-section fp-section fp-table active" id="section-1">
<div class="fp-tableCell" style="height:600px;">
<div class="fp-tableCell" style="height:600px;">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12">
<img src="images/product-1.png" alt="img" class="max-width">
</div>
<div class="col-md-5 col-sm-12 col-xs-12 banner-txt">
<h3 class="preHeading"">volant</h3>
<h1 class="mainHeading">an icon for iconoclasts</h1>
<p class="description">Our singular purpose was to create a product not<br>
bound by convention.
Volant is the realization of that<br> dream.</p>
</div>
</div>
</div>
</div>
</div>
</section>
The code that generates the two <div> elements appears to have been minified and is therefore very difficult to interpret. I think the easiest way to solve this problem would be to remove the duplicate <div> elements from all of the <section> elements after the document has loaded. To do this, you can insert the following code just before your closing </body> tag:
<script>
var sectionElems = document.getElementsByTagName("section"); //creates an array containing all <section> elements
var outerDiv;
var innerDiv;
//loop through each <section> element found and remove duplicate <div> element
for(var i = 0; i < sectionElems.length; i++){
outerDiv = sectionElems[i].children[0];
innerDiv = outerDiv.children[0];
//check class names to make sure it is a duplicate element
if(outerDiv.className == innerDiv.className){
outerDiv.innerHTML = innerDiv.innerHTML;
}
}
</script>
This code loops through each <section> element and writes the content of the nested <div> element into the parent <div> element, basically overwriting itself without including the nested <div> element.
I am trying to pull certain item IDs based on if they have an image tag or not. For a given input like the one below:
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
I could get something like:
ID_1: image4.png
ID_2:
ID_3: image6.png
ID_4: image4.png
I am not too familiar with HTML or Javascript, so any help or resources that someone may have or know will be greatly appreciated.
I would recommend using jQuery for something like this
(dont forget to include jquery in the html head)
Html =>
<div id="divContainer" >
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
</div>
Javascript =>
const doesContainImg = [];
$(".divContainer div").each(function() {
// check for an img
if ($(this).find("img").length) {
// store id in array that contains ids that have imgs
doesContainImg.push($(this).attr("id"));
}
});
that should work, if it does not let me know!
Add a class on those div.
Let's say you have the class "image-div".
We can use this class to see if the divs contain an image or not.
JQUERY:
$(".image-div").each(function(){
if($(this).find('img').length){
//if this div contains an image do something.
}
});
You can attach this code to an event and use it
I'm working on a listing page and I am trying to create a "Load More Items" functionality. I'm attempting to use .load() to append all ".vehicleListing" elements from another page url (the second listing page) and add them after the last occurrence of a a div with the class of "vehicleListing".
Page 1:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Page 2:
<div class="overview-feature-1">
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Desired Result:
Page 1 after "Load More" functionality is executed:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
This is what I have so far, but it keeps adding it inside the last vehicleListing div instead of after it.
$(".vehicleListing").after().last().load('page2url' + ' .vehicleListing');
Can someone point out why it's inserting inside the last div instead of after it, and how I can correct this?
Here is what worked for me:
Add an empty div after the last vehicleListing in your first file
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div id="container"></div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
And change your JS
$("#container").load('http://aba.bbtj.dev/test2.html' + ' .vehicleListing', function(){
$('#container').replaceWith(function() {
return $('.vehicleListing', this);
});
$( '<div id="container"></div>' ).insertAfter( ".vehicleListing:last" );
});
This will load the new vehicles in the empty div, and then remove that div and keep the new vehicles (using the replaceWith function).
Then we re-add the empty div to be able to add more vehicule.
Load documntation:
Description: Load data from the server and place the returned HTML into the matched element.
$(".vehicleListing").after().last()
Targets the last vehicleListing div.
You can try smething like:
$.load('page2url' + ' .vehicleListing').insertAfter(".vehicleListing:last");
Your probably going to have to go about this differently. As mentioned, load() takes the response and loads it into the element it is operating upon. Since it replaces the contents, it doesn't really fit what you are trying to do which is to append additional content to an existing element. Your best bet is to probably use an ajax method instead.
$.get('page2url' + ' .vehicleListing', function(data){
$(".vehicleListing").last().after(data);
});
I am trying to get the sum of all radial buttons selected. There are three groups of three in total with a possibility of three checked. These are created by the Angular ng-repeat that you will see in the index page.
I have lurked through many posts saying that they have found a way to do this, but I still don't get the output that I need. I know that the jQuery is running because I tested that. So I don't know what is going in.
Please see if you can spot or suppose what is going on. Thank you The code looks horrendous and uneven but this is because the box keeps screwing the hierarchy of my code.
<!DOCTYPE html>
<html>
<head>
<title>Cruiseline</title>
<%= javascript_include_tag 'application'%>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= csrf_meta_tags %>
<script>
$( document ).ready(function() {
$(".all_aboard").click(".radial_input", function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$(".totalSum").val(total);
});
});
</script>
</head>
<body>
<%= yield %>
</body>
</html>
<h1 class="title">Choose Your Sailings <span class="pick_one">(Pick one for each box)</span></h1>
<div class="all_aboard" ng-app="app">
<div ng-controller="CruisesController">
<div ng-repeat="cruise in cruises">
<div class="panel panel-default">
<div class="panel-body">
<div ng-controller="SailingsController">
<div ng-repeat="sail in sailings ">
<div ng-if="sail.cruise_id == cruise.id">
<div>
<img src="{{ sail.main_image }}" class="cruise_picture"/>
<img><%= image_tag "lowest_price_tag.png", class: "lowest_price_tag"%> <img/>
</div>
<div class="cruise_details">{{cruise.name}}-{{cruise.ship_name}}</div>
<h1 class="sailing_title">{{ sail.name }}</h1>
<div ng-controller="SailingOptionsController">
<div class="option_box" ng-repeat="soption in sailing_options">
<div ng-if="soption.sailing_id == sail.id" >
<div class="radio">
<input class="radial_input" id="soption{{soption.id}}" type="radio" name="cruisePrice{{sail.id}}" data-price="{{soption.price}}">
<div class="date">{{ soption.date}}</div>
<div class="price">${{ soption.price}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="divider"></div>
<div>
<h1 class="you_selected_total">You Selected Sailings Total</h1>
<input style="color:red;" type="text" class="totalSum" value="" readonly="readonly">
</div>
try this
I updated answer now try
$(".all_aboard").on("click",".radial_input", function() {
var total = 0;
$(document).find("input[type=radio]:checked").each(function() {
total += parseFloat($(this).parent().find('.price').text());
});
$(".totalSum").val(total);
});
I can see couple of things in your code.
First, if you are using jQuery to make things work, you should wrap it up in a $(document).ready(function() {}); like below.
$(document).ready(function () {
$("input[type='radio']").click(function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$(".totalSum").val(total);
});
});
If you are planning to add more radio buttons using code, then you should consider using jQuery 'on' to bind events.
Next, you should use check boxes instead of radio buttons if you are trying to enable multiple select (I am assuming you are, since you are looking to get a total).
Next, try and minimize direct use of jQuery when developing your angular applications: it can lead to lot of confusions and unwanted scenarios like your angular functions not getting executed, or your angular variables not getting updated.
Finally, take a look at the below fiddle and see if it fits your solution
JSFiddle: Update Price when Checked