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.
Related
I am looking to reorder the contents of the div in a particular order. The contents inside of the div comes dynamically from CMS content. I have 2 paragraph elements that come from CMS, and one image inside of a div. Now my requirement is I want to show them in a particular order. I don't want to use flex display and give an order. Is there any other way I can achieve this?
Since it is a dynamic content, I am posting a sample markup of how it is going to look.
Sample Code:
These 2 div and its contents below are coming from CMS.
<div class="order-class">
<div>
<p> Some sample content </p>
</div>
<div>
<p> Some other sample content </p>
</div>
</div>
Here in my JSP I have another div with an image in it. Sample below
Sample Code:
<div class="koh-release-content-section">
<hst:html hippohtml="${pressRelease.content}" /> //This is the sample content mentioned above
<div class="koh-press-release-detail-image order-class">
<tag:imagePressRealeasetag image="${pressRelease.image}"/>
</div>
</div>
I am not able to figure out how to reorder these elements. Any help is appreciated.
on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.
I am using JQM and I have a situation where I have HTML generated dynamically. It's possible, even probable that the same HTML will be used in more that one place on the page. I have a div with data in it that I only want to be displayed when the user clicks the header div. IE:
<html>
<head>
<style>
</style>
<script src="/js/jquery.js"></script>
</head>
<body>
<div onclick="$(this).children('div:first').toggle();">This is Div 1</div>
<div style="display:none">
<p>I'm hidden</p>
</div>
</div>
</body>
</html>
What I'd like to do is when the user clicks on the Click Me link the child toggles its display on and off. Any thoughts on how this can be accomplished without some convoluted ID scheme? (I've thought of at least two).
According to the code you posted, the div containing "I'm hidden" is not a child of the first div.
You can use $.eq() to select a specific children index: https://api.jquery.com/eq/
<div onclick="$(this).children('div').eq(0).toggle();">
This is Div 1
<div style="display:none">
<p>I'm hidden</p>
</div>
</div>
See working JSFiddle (with "hidden div" child of Div1)
If you need to toggle visibility of a sibling, you can use $.siblings() https://api.jquery.com/siblings/ or $.next() https://api.jquery.com/next/
<div onclick="$(this).next().toggle();">
This is Div 1
</div>
<div style="display:none">
<p>I'm hidden and I'm a sibling</p>
</div>
See JSFiddle2 (hidden div sibling of Div1)
you can tie an event to the Click Me and in javascript/jquery, find the first child div after "this" (the div that was clicked). Something like this:
$(this).children("div:first");
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?
I am trying to create a group of links or buttons that will change the content of a div
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
Each employee has a different image and description but each div are the same size, the first employee will be shown by default as so to have no empty space but when the other 3 are selected the div is filled with the respective div according to it, then you can cycle through the profiles as you wish. Here is my div structure
<div id="employee">
</div>
<div id="employee1">
</div>
<div id="employee2">
</div>
<div id="employee3">
</div>
<div id="employee4">
</div>
Here is the javascript im trying to use
<script type="text/javascript" charset="utf-8">
$('button').bind('click', function() {
$('div#employee').html($('div#employee' + ($(this).index()+1)).html());
});
</script>
All the help i can get would be really appreciated, im not that great at java script and really need a hand with this. Im not sure i explained myself very well but i did try.
Just to confirm, all the divs are hidden until the button is pressed, then the div for that employee will appear, except the first profile which will appear by default on load.
Thanks for your help in advance.
James
Here's a pretty simplified example. It may or may not be the most efficient, but it should do what you want. This is assuming that you're pre-loading all of the content into the divs, but just hiding it at the beginning. If you are wanting to dynamically load the content, then you'll want to use some ajax
HTML
<p><button id="button1">EMPLOYEE One</button></p>
<p><button id="button2">EMPLOYEE Two</button></p>
<p><button id="button3">EMPLOYEE Three</button></p>
<p><button id="button4">EMPLOYEE Four</button></p>
<p><button id="button5">EMPLOYEE Five</button></p>
<br/><br/>
<div id="employee1" class="employeeInfo">
Employee1 is a good employee
</div>
<div id="employee2" class="employeeInfo">
Emloyee2 is an alright employee
</div>
<div id="employee3" class="employeeInfo">
Emloyee3 is the best employee ever!
</div>
<div id="employee4" class="employeeInfo">
Employee4 is not a very good employee
</div>
<div id="employee5" class="employeeInfo">
Employee5 is about to be fired
</div>
Javascript
$(function(){
$("#employee1").show();
$("button").on("click", function(){
$(".employeeInfo").hide();
$("#employee"+String($(this).attr("id").substring(6))).show();
// OR if you don't want to have to give IDs to the buttons
// $("#employee"+String($("button").index($(this))+1)).show();
});
});
CSS
.employeeInfo {
display: none;
}
JSFiddle