I have a html file that has a section for writing mdxquery , file sends queries to a js file and that file use this queries and other information and show a map on my html file, know i need to change this mdxqueries automatically by selecting different checkbox, i define different queries for different selections(my selectins are limmited), and now i want replace them in div section for it i defined different div(as you'll see dives are particular and the content of them is inside the div tag and arent changeable) that have different queries, now the problem is that, the js file read the queries ofdiv with just particular div, therefor i need to change the id of div , here is my cod that dont work, please see the code and tell me what is wrong:
<div class="first" style="width:80%;" id="mdxQueryEditor"
dojoType="GeoSOA.Spatialytics.widgets.MdxQueryEditor" title="MDX query editor"
submitButtonLabel="Submit"
mdxQuery="SELECT {[Measures].[report]} ON COLUMNS,
{[State].[City].members} ON
ROWS
FROM [ppgis]">
</div>
<div id="" class='second' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor' style='width:100%;display:none;'
mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,
{[Boston].[City].members} ON ROWS
FROM [ppgis]'
submitButtonLabel='Submit'></div>
<div id="" class='third' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor'
style='width:80%;display:none;' mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,
{([State].[All States].
[Boston].[Allston / Brighton], [Subject].[All Subjects])} ON ROWS
FROM [ppgis]'
submitButtonLabel='Submit'></div>
<script>
function generatorChoice(){
if(($("#Allston").is(":checked") )&&( !$("#All State").is(":checked")) && (!$("#Boston").is(":checked"))){
/*When the checkbox is checked*/
$(".first").attr("id", "");
$(".third").attr("id", "mdxQueryEditor");
$('.first').css('display','none');
$('.second').css('display','none');
$('.third').css('display','block') ;
}
}
</script>
I see a code $("#All State").is(":checked"), this could be potentially wrong.
Here you are trying to grab element with Id - "All State", but HTML Id's cannot have spaces in between, If that's not meet code inside If condition will not be executed and Id will not change.
I usually use getElementBy, for example I do this
var myDiv = document.getElementById('div1');
myDoiv.setAttribute('id', 'div2');
Related
I'm looking to change the title of an html page according to certain form elements, as well as some text found on that page. I found a good site describing how using Javascript can do almost what I need, located here: http://www.devx.com/tips/Tip/13469.
The problem with the script found there is that the option to change the title is restricted to the textarea, or if I try to include another element, I get an error message. I authored web page/form templates, nothing complicated, where the intended users, who, shall we say, are not very computer literate(one of them has never used computers), fill out certain textareas and drop-down options and then save the pages in an ARCHIVE folder. To make it easier for them, I would like to give them the luxury of saving the pages without having to type the relevant date and # (each form is basically one of a series of 59), essentially standardizing the titles of the saved pages which should make it easier to categorize them using another script in the future. Can the code below(the one found in the above web site) be extended to include more than one html item, such as the select drop-down options found below, and maybe something found inside elements such as a or div?
<HTML>
<HEAD><TITLE>Change Title Dynamically:</TITLE></HEAD>
<BODY>
<FORM action="" method=POST name="SampleForm">
<B>Enter Title for the window:</B>
<TEXTAREA NAME=WindowTitle ROWS=1 COLS=50></TEXTAREA>
<INPUT TYPE=BUTTON VALUE="Change Title" ONCLICK="javascript:UpdateTitle()">
</FORM>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function UpdateTitle()
{
document.title = document.SampleForm.WindowTitle.value;
}
</SCRIPT>
</BODY>
</HTML>
<SELECT>
<option>-----</option>
<OPTION>JAN</OPTION>
<OPTION>FEB</OPTION>
<OPTION>MAR</OPTION>
<OPTION>APR</OPTION>
<OPTION>MAY</OPTION>
<OPTION>JUN</OPTION>
<OPTION>JUL</OPTION>
<OPTION>AUG</OPTION>
<OPTION>SEP</OPTION>
<OPTION>OCT</OPTION>
<OPTION>NOV</OPTION>
<OPTION>DEC</OPTION>
</SELECT>
I would recommend jQuery to get the values of the fields you want to display in the title and set it. More info on jQuery can be found at http://jquery.com/
You can use a jQuery selectors to get the values of the fields and concatenate it accordingly. Something like this:
document.title = $('textarea').val() + ' - ' + $('select').val();
I have a page which connects to a database where I have some users. Then, it takes each user and puts a div for each one of them, so I have 6 divs (a user in each div).
What I want is that, when somebody clicks in a div, it would give me the id of that user like if it was a form with an input.
I mean: the page takes the id and the name of each user from the database, so if I used a normal input, I would make that when the form is submitted, the form would return me the id of the selected user, but as I am using divs and no buttons, it would be nice to achieve that.
This is how my page looks (number 4 is where my mouse is):
The structure is basically, as I said, 6 divs, each one containing the name and the id of the user (I hide the names for privacy).
So, what can I do? If I haven't explained well I can give you more details... Thanks!!
Your HTML should be generated similar to this (each div has an attribute to point to its corresponding user from the DB)
<form id="select-user" action="formActionPage.php" method="POST">
<input id="selected-user" type="hidden" value="0">
</form>
<div id="1" class="user"></div>
<div id="2" class="user"></div>
<div id="3" class="user"></div>
The form has no submit button as you mentioned but has an input which is hidden notice that value=0 is a default value chosen by me .. you may control this in the action page ..
JQuery:
$("div").on('click', function() {
$('#selected-user').val($(this).attr('id'));
$('#select-user').submit();
});
EDIT
you may use div.[classname] div.user in my example, because you just don't want to apply this for any div
Use this:
HTML code:
<div><span id='userId'>10</span></div>
<div><span id='userId'>11</span></div>
jQuery code:
$("div").on('click', function() {
var userId = $("span", $(this)).text();
console.log(userId);
});
CSS code:
span {
display: none;
}
Main idea is to create in each div hidden span in which you will store user id, connected to this div. Also, you need onclick event, which will find this span and show needed id. Simple. Demo below.
DEMO
Note, that it is just an example. You can edit it as you need
I am doing a portlet in Liferay with a form like this:
<form method="post" action="<%=actionAddRule.toString() %>" id="myForm" >
<aui:select name="attribute" style="float: left;">
<c:forEach var="attr" items="${fields}">
<aui:option value="${attr}" selected="${condition.attribute==attr}">${attr}</aui:option>
</c:forEach>
</aui:select>
<aui:input type='button' value="Add Condition" name='addCondition' onClick="addCondition();" %>'></aui:input>
<div id='conditions'></div>
</form>
I want that when someone click the button add a new select, but I don't know how do a new . I tried do it with JavaScript with:
var conditions = document.getElementById('conditions');
conditions.innerHTML('<aui:select ...>...</aui:select>');
and
document.createElement('<aui:select>');
I tried too with AUI script doing:
var nodeObject = A.one('#divAtr');
nodeObject.html('<aui:input type="text" name="segment21" label="Segment" value="lalal" />');
But it doesn't work because is html and doesn't can make AUI, and if I make the new select with HTML normal, when I catch the values some are lost.
Thanks.
As #Baxtheman stated, this won't work because the tag is not a client-side HTML tag, but a server-side tag from the aui-taglib.
To dynamically load the contents of the select box you would want to follow these steps:
add an element in your JSP, but make it hidden
<aui:select id="conditions" style="display: none;"><aui:select>
From your javascript, when the event occurs that you want to use to load your second select box, you would select the dropdown box and add the options you wish to it with something like the answer from this post Adding options to select with javascript
Make sure you set the select box to be visible after loading the options.
document.getElementById('<portlet:namespace/>conditions').style.display = 'block';
For more clarity, the reason you're missing information on POST if you add a normal HTML select box, is because of the way the aui:form serializes the data. I believe the ends up with a custom onSubmit that gathers only the aui elements.
<aui:select> is a JSP taglib, not the final HTML markup.
If you understand this, you resolve.
I have a web application which replaces content. This content has jquery ui check buttons. When I replace the content if a button already exists then don't add it again:
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
$('.checkWeek').button();
If I push the button (its state is checked) and if I replace the content, the button starts locked until the same content is replaced again.
I use Backbone.js to replace the content
jsfiddle
How can I unlock the check button?
You are duplicating id attributes and that leads to bad HTML, bad HTML leads to frustration, frustration leads to anger, etc.
You have this in your template that you have hidden inside a <div>:
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
Then you insert that same HTML into your .content-central. Now you have two elements in your page with the same id attribute and two <label> elements pointing to them. When you add the jQuery-UI button wrapper, you end up with a slightly modified version of your <label> as the visible element for your checkbox; but, that <label> will be associated with two DOM elements through the for attribute and everything falls apart.
The solution is to stop using a <div> to store your templates. If you use a <script> instead, the browser won't parse the content as HTML and you won't have duplicate id attributes. Something like this:
<script id="template-central-home" type="text/x-template">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
</div>
</script>
and then this to access the HTML:
content.view = new ContentView({
model: content,
template: $('#template-' + template_name).html()
});
Demo: http://jsfiddle.net/ambiguous/qffsm/
There are two quick lessons here:
Having valid HTML is quite important.
Don't store templates in hidden <div>s, store them in <script>s with a type attribute other than text/html so that browser won't try to interpret them as HTML.
I took a detailed look at your fiddle after you mentioned this problem. The solution I suggested here was more like a quick fix.
If you want to follow the right thing to avoid long term problems and side effects you should consider what is mentioned here. This way your problem is solved and there are no other bugs.
I am creating a html document for class and there is an example in my notes that is very similar to what I have to do it has First Name, Last Name, and Phone Number, my question is what does this line of code mean? There is a .addphone in style but the code on the bottom only applies to phone why not first name or last name?
<!-- <div class="addphone" onclick="addPhone();">Add Phone</div> -->
<input id="adduser" type="submit" value="Add User" style="margin-top: 25px;">
</div>
The first line of code is an example of a clickable element. In this case has been commented out, meaning it will not be rendered in the browser.
For example:
<!-- Anything written here won't affect the page -->
Is it possible this line, plus the line in your stylesheet, are examples on how to write your other fields for your assignement?
Why not first name or last name?
I guess it's because your 'user' can have more than one phone, but not more than one first name or last name. This isn't really a programming question then though, is it?!
It's never good to put an onclick() event handler on a div element. It also looks like the div has been given a class for styling to make it look like a button or link. Well, if you need a button, or link, then use a button, or link. That way, keyboard support is automatically included.