I have a main DIV where I would like to insert different DIVs via PHP.
Very simplified my HTML looks like:
<div id="mainDiv">
<div id="invoice1">
....
</div>
<div id="invoice2">
....
</div>
<div id="invoice3">
....
</div>
</div>
The user can then interact by clicking on buttons (ajax) and fx. the div with "invoice2" needs to be given new HTML (cleared out and having inserted the new HTML).
I can do this by using innerHTML but gets very slow with 100's of divs (invoices) and the coding is not nicely done.
To improve this I tried with insertAdjacentHTML but I cannot get it to make HTML like:
<div id="invoice1">
insertAdjacentHTML inserts it as
<div id="invoice1"></div>
And the ending
</div>
is stripped away (making the page look wrong).
So how can I do this in a smart way?
Related
I have two files Mypage.Html , PageLogic.js
HTML page contains multi-step form
In first step Based on user selection for his interest(drop-down/radio buttons)
step_2 Div is visible(step 2 form is different for each interest topics)
Step_2 structure is like
<div id="step_2">
<div id="interestTopic_1">
Long html with different form fields......
</div>
<div id="interestTopic_2">
Long html with different form fields......
</div>
<div id="interestTopic_3">
Long html with different form fields......
</div>
<div id="interestTopic_4">
Long html with different form fields......
</div>
<div id="interestTopic_5">
Long html with different form fields......
</div>
</div>
I want to add "interestTopic" div to step_2 div dynamically based on values selection from step_1 , Each interestTopic may contains different text fields/input controls.How can i add this div dynamically and also want to use input controls inside div in same js from which i added that div..
Is This Possible without server call? I tried simple hide/show but when you are loading a page and then filling first form long html cause page to freeze for 1-2 seconds
Try this. For your reference here I have added "interestTopic" div to "step_2" div as a child dynamically through button click with input box.
var i=6;
$("#add").click(function () {
$("#step_2").children().last().after('<div id="interestTopic_'+i+'"><input type="text" value="Test"/></div>');
i++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="step_2">
<div id="interestTopic_1">
Long html with different form fields......
</div>
<div id="interestTopic_2">
Long html with different form fields......
</div>
<div id="interestTopic_3">
Long html with different form fields......
</div>
<div id="interestTopic_4">
Long html with different form fields......
</div>
<div id="interestTopic_5">
Long html with different form fields......
</div>
</div>
<button id="add">Add New Div</button>
You can update the innerHTML of step_2 div using .innerHTML like this:
document.getElementById("step_2").innerHTML ="<your new div based on the user selection from step 1>";
This approach will give you only one div inside your step_2 div. Alternatively, you may place all the divs initially in the DOM with display:none and then show the desired div per user inputs.
I am using jsoup to parse an html document. I need to extract all the child div elements. This is basically div tags without nested div tags. I used the following in java to extract div tags,
Elements bodyTag = document.select("div:not(div>div)");
Here is an example:
<div id="header">
<div class="container">
<div id="header-logo">
<a href="/" title="mekay.com">
<div id="logo">
</div> </a>
</div>
<div id="header-banner">
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
</div>
</div>
</div>
I need to extract only the following:
<div id="logo">
</div>
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
Instead, the above code snippet is returning all the div tags. So, could you please help me figure out what is wrong with this selector
This one is perfectly working
Elements innerMostDivs = doc.select("div:not(:has(div))");
Try it online
add your html file
add css query as div:not(:has(div))
check resulted elements
If you want only div leafs that do not have any children then use this
Elements emptyDivs = document.select("div:empty");
The selector you are using now means fetch me all the divs that are not direct children of another div. It is normal that it brings the very first parent div, because the div id="header" is not a direct child of a div. Most likely its parent is body.
I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.
The layout of my page:
<div id="header">This is where you select tabs</div>
<div id="main">
<div id="left">Main Content</div>
<div id="right">Sidebar</div>
</div>
<div id="bottom">
<form>
<input id="msgForm" type="text" name="chat" size="100"/>
<input id="enterB" type="submit" value="enter"/>
</form>
</div>
The left and right needs to change content when you select another tab on the header. I am thinking of putting the innerHTML of each tab into an array, and when I want to switch tabs I just arrayOfContent[currentTabId] = getElementById("left").innerHTML; getElementById("left").innerHTML = arrayOfContent[switchTabId]
And the same for right. This page will use ajax requests to add divs and remove old divs (which for the current tab I can just remove divs with javascript by id, but for tabs not currently active I'll have to split strings as I'll mark a <!-- SPLIT ME --> at the end of every js-created div.)
Will this work? Are there better approaches to this?
according to me,
better approach is to use jquery library and Ui library
http://jqueryui.com/demos/tabs/
see the example of ajax page.