Using dom I want to get content from some specific div.
My Current situation is this : I want to get content from site link whose html structure is as below. I want that css class data for my local database. I think this is possible only using dom.
Here is the code :
<div class="listing-info-right ">
<div class="list-card-field name-address">
<div class="list-card-user">
Mr Bimal Kumar Agarwal
</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-phone">
+91-9386750700,+91-612-2530310,+91-612-2530311
</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-email">enquiry#elementguestline.com</div></div>
<div class="list-card-field name-address list-card-border">
<div class="list-card-location">28,, Nalini Aparment 4th Floor, Kidwaipuri, Fraser Road, Patna, 800001, Bihar</div>
</div>
</div>
I want to fetch data of div class named : list-card-user, list-card-phone and list-card-location.
Before I had done coding using dom with css id, but could not get anything with class name..!
Please help me with some code.
Thanks in Advance.
You can select your div with document.getElementsByClassName in Javascript. This will return an array of all the elements with that class, if you only have one occurence then simply get the first node.
var div = document.getElementsByClassName("list-card-user")[0];
The div variable now points to your div, you can use a bunch of functions on it to get different things. For example, if you want its content, you can do this :
var content = div.innerHtml;
Edit I used Javascript because your original question used the Javascript tag, which has been removed now with an edit.
This is the simple one, perhaps this helps you :)
<div class="listing-info-right ">
<div class="list-card-field name-address">
<div class="list-card-user">Mr Bimal Kumar Agarwal</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-phone">+91-9386750700,+91-612-2530310,+91-612-2530311</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-email">enquiry#elementguestline.com</div>
</div>
<div class="list-card-field name-address list-card-border">
<div class="list-card-location">28,, Nalini Aparment 4th Floor, Kidwaipuri, Fraser Road, Patna, 800001, Bihar</div>
</div>
</div>
Output:
<div id="myNamez"></div>
<div id="myPhonez"></div>
<div id="myLoc"></div>
Using jQuery:
<script>
$(document).ready(function () {
var namez='list-card-user';
var phonez='list-card-phone';
var locationz='list-card-location';
document.getElementById('myNamez').innerHTML='namez';
document.getElementById('myPhonez').innerHTML='phonez';
document.getElementById('myLoc').innerHTML='locationz';
});
</script>
Here's the demo
Related
I have around 6 div on a page and only one of them needs to be visible at a time. During page load, I hide all the other divs except the first one.
Here's my HTML structure.
<div id="A1">
</div>
<div id="A2">
</div>
<div id="B1">
</div>
<div id="B2">
</div>
<div id="C1">
</div>
<div id="C1">
</div>
Here's what I do to hide them :-
$(document).ready(function(){
$("#A2").hide();
$("#B1").hide();
$("#B2").hide();
$("#C1").hide();
$("#C2").hide();
});
How would I get the ID of the visible div? I have tried :-
var current_div = $("div:visible");
current_div_id = current_div.attr('id');
Output :- Undefined
var current_div = $("div:visible");
current_div_id = current_div[0].id;
Output :- Blank
What am I getting wrong ?
Fixed it. Posting a solution to help future peeps.
It seems that jquery is unable to find the current div using my above code. What I did is, added a common class to all the divs. Like this :-
<div id="A1" class="divs">
</div>
<div id="A2" class="divs">
</div>
<div id="B1" class="divs">
</div>
<div id="B2" class="divs">
</div>
<div id="C1" class="divs">
</div>
<div id="C1" class="divs">
</div>
And now I modified my JS in this way :-
var current_div = $(".divs:visible");
current_div_id = current_div[0].id;
And it worked. So if you're in the same problem, remember to have a common class for all the divs.
Try this:
var current_div = $("div:visible").attr("id");
$( 'body' ).text( current_div );
http://jsfiddle.net/neowar2x/4/
well, your code is working actually, and I can get id using both methods. You're missing something else here, check console what else do you get.
just one issue, you won't get consistent results as you've duplicate id on your page C1, twice.
<div id="A1">
A1
</div>
<div id="A2">
A2
</div>
<div id="B1">
B1
</div>
<div id="B2">
B2
</div>
<div id="C1">
C1
</div>
<div id="C2">
C2
</div>
<p id = "one"></p>
<p id = "two"></p>
$(document).ready(function(){
$("#A1").hide();
$("#B1").hide();
$("#B2").hide();
$("#C1").hide();
$("#C2").hide();
});
var current_div = $("div:visible");
current_div_id = current_div[0].id;
$("#one").text("ID: "+current_div_id);
var current_div = $("div:visible");
current_div_id = current_div.attr('id');
$("#two").text("ID using second method: "+current_div_id);
Fiddle
I have in my webpage this html popup:
<div class="popup1" id="popup_calendar">
<div class="bg_popup"></div>
<div class="content_popup">
<div class="popup_content">
<h2>Content Detail</h2>
<div class="content_scroll scroll-pane">
<div class="clearfix">
<h3 class="left">Title...</h3>
</div>
<h4>Place: ...</h4>
<h4>Date: ...</h4>
<h4>Hour: ...</h4>
<h4>length: ...</h4>
...
...
...
Inscribirme
</div>
</div>
</div>
And I need to open it with a click but content depends on other data.
How can I open my popup (after load necessary data) and edit it so that I can show it correctly? (I need to fill place, date, hour, length, etc...)
Thank you very much in advance.
put .slideDown() in load() callback:
$('#popup_calendar').load(page, function ()
{
$('#popup_calendar').slideDown(1000);
}
I have the following code in .php (code is edited for easier understanding).
while($row = mysql_fetch_array($biznis)){
<div id='listItem'>
<div id='listPic'>
<img src='../../social/images/avatar/empty_avatar_full.jpg'></img>
</div>
<div id='listCont'>
<span>abcde<i>(request pending)</i></span>
</div>
<div id="listInfo">
<span id='info'>More info</span>
</div>
<div style='clear:both;'></div>
<div id='moreInfo'>
<span>Invitation sent: xx-yy-zzzz</span>
</div>
</div>
<div style='clear:both;'></div>
}
So the code is nothing special, I just get all records from the table lined up.
So now, here is the problem, as you can see, I use the same ids for the same elements.
Jquery code
$(document).ready(function () {
$("#moreInfo").hide();
$("#info").click(function(){
$("#moreInfo").slideToggle();
});
});
OK so here are now the problems. Only first div (#moreinfo) is hidden, all the others are shown. And only first span (#info) is toggling the slider.
I tried with putting the counter for ids, and jquery each function, but nothing realy worked as i imagined.
Ty, Sebastian
Element IDs should be unique identifiers for that element. Use classnames for generic selectors:
<? while($row = mysql_fetch_array($biznis)): ?>
<div class="listItem">
<div class="listPic">
<img src="../../social/images/avatar/empty_avatar_full.jpg"></img>
</div>
<div class="listCont">
<span>abcde<i>(request pending)</i></span>
</div>
<div class="listInfo">
<span class="info">More info</span>
</div>
<div style="clear:both;"></div>
<div class="moreInfo">
<span>Invitation sent: xx-yy-zzzz</span>
</div>
</div>
<div style="clear:both;"></div>
<? endwhile; ?>
And change your jQuery to:
$(function() {
$('.moreInfo').hide();
$('.info').click(function() {
$('.moreInfo').slideToggle();
});
});
Edit
$('.info').click(function() {
$(this).parent().siblings('.moreInfo').slideToggle();
});
use class and not ids because you're in a while loop. An id exists only once.
And update your JS.
I would like to append some html to a div when a button is clicked. The only thing that needs to be dynamic about it is that it needs to have a different id the the otherwise identical html above it. So if I have a structure like this:
<div id="container">
<div id="div1" class="inner">
<p id="P1">Some content</p>
</div>
<div id="div2" class="inner">
<p id="P2">Some content</p>
</div>
</div>
and to the end of container i would like to append
<div id="div3" class="inner">
<p id="P3">Some content</p>
</div>
What would be a good method to store this HTML? Keep it all in a php page and post the number the new div's id should be incremented to? Or is is smarter to put the html inside a string, and have a regular expression increment all of the numbers. Or is there some incredibly obvious way to do this that I've completely missed.
Jquery is an option, as that's already on the page.
Also, if this question seems too open-ended, please let me know in the comments how I can change it before closing it.
Thank you very much.
Based on your answers to comments so far (i.e. that the id's aren't really important, and that you will have input elements in the content), I would say that you would want to redo your html to look like this:
<div id="container">
<div class="inner">
<p><input type="text" name="order_item[]" value="" /></p>
</div>
<div class="inner">
<p><input type="text" name="order_item[]" value="" /></p>
</div>
</div>
Note there are no longer id's and I have used array notation for your input elements such that they will be posted as an array to the receiving script (eliminating the need to increment counters in javascript or parse different posted variable names into a usable array in PHP on the server).
And then use something like this in jQuery
$('#button_id').click(function() {
$('#container > div.inner:last').clone().val('').appendTo('#container');
});
Put the HTML you want to add each time into a hidden div, then use jQuery to copy and add that to the relevant location. For instance:
<div id="appendContents" style="display:none;">
<div class="inner">
<p id="P3">Some content</p>
</div>
</div>
then jquery:
var shownDivs = <?php echo $numberOnScreenFromBeginning;?>;
$('#theButtonYouWantClickable').click(function()
{
var newContent = $('#appendContents').clone();
newContent.$('div.inner').get(0).id = 'div'+shownDivs;
newContent.$('div.inner p').get(0).id = 'P'+shownDivs;
// Where does P content come from??
shownDivs++;
$('#container').append(newContent);
});
Try this Please: Working Demo http://jsfiddle.net/eNXmr/
In the code below it will calculate the lenght of the div hence dynamically set the id as 1, 2, 3, and beyond.
Hope it fits you need :)
API used: http://api.jquery.com/append/
Code
$('#hulk').click(function() {
alert("Total div inside ==> " + $('#container').find('.inner').length);
var next_num = parseInt($('#container').find('.inner').length) + 1;
$('#container').append(' <div id="div' + next_num + '" class="inner"><p id="P' + next_num + '">Some content</p></div>');
});
HTML
<div id="container">
<div id="div1" class="inner">
<p id="P1">Some content</p>
</div>
<div id="div2" class="inner">
<p id="P2">Some content</p>
</div>
</div>
<input type="button" value="Click hulk" id="hulk" />
i want to show hide multiple divs with jquery or javascript.
I seached the web but i find codes that must have unique divs
like:
<div id="div1">text</div>
<div id="div2">text</div>
and so on, but i want to add the divs in a foreache php function so i can't have multiple IDs,
the foreache is a div wrapper.
So, my question is how can i do that ?
EDIT
Because i am complete noob at JQuery i don't know how to implement anything,
so i have this
<div id="wrapper">
<div class="title">
<div class="hide"> Hidden Text</div>
</div>
</div>
When i click the title div, i want the class="hide" to be shown.
Solution:
.box
{ margin:10px;
height:auto;
}
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().slideToggle(500);
});
});
</script>
<div class="box">
<h1>This is the div</h1>
<div class="flip">If u click </div>
<div class="panel"> This will show</div>
The problem was as i said the div were generated by the foreach function and this solved it, Thanks to all ! I have much to learn.
You can try
<div id="div1" class="toggle">text</div>
<div id="div2" class="toggle">text</div>
Then
$('.toggle').toggle(); //Automatic Display or hide the matched elements.
You can assign common class and later use that class selector to show hide divs with common class.
Live Demo
<div id="div1" class="someclass">text</div>
<div id="div2" class="someclass">text</div>
$('.someclass').show();
there are two ways of doing it:
select divs by class
select children div of the wrapper
The first method is like everyone else described, add the class attribute to select the divs:
<div class="hide">content</div>
and
$(".hide").hide();
The second method is to give the parent div an unique id:
<div id="wrapper">
<div>content</div>
<div>content</div>
</div>
then select all it's children by tag name:
$("#wrapper div").hide();
Add some class to select all dives to hide,
<div class="toHide" id="div1">text</div>
<div class="toHide" id="div2">text</div>
And then hide them all ,
$('div .toHide').hide();
Solution 1
<div id="div1">text</div>
<div id="div2">text</div>
jQuery('#div1, #div2').hide();
jQuery('#div1, #div2').show();
jQuery('#div1, #div2').toggle();
Solution 2
<div id="div1" class="some-div">text</div>
<div id="div2" class="some-div">text</div>
jQuery('.some-div').hide();
jQuery('.some-div').show();
jQuery('.some-div').toggle();
Another answer:
Use the parent element:
<div id="yourId">
<div id="div1">text</div>
<div id="div2">text</div>
</div>
$("#yourId div").hide();