How to call <div> on submit button click - javascript

Please refer code below i m learning jquery and i want to display
tag named #child on submit button click using javascript/jquery can any one help me how to call on button click
And also want to call #child and #home tag on >>(next button) & <<(prev button)** on button click respectively in code >> and<< is written as &lt and &glt.? can anyone
help me out ?
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagvati
</h3>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" href="#home">
<<
</a>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" href="#child">
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" placeholder="Khushu" type="text" />
</fieldset>
</div>
<input data-theme="d" ="submitbtn" value="Login" type="submit" onSubmit="redirect()"/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" >
<h3>
Page1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagvati
</h3>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" placeholder="Khushu" type="text" />
</fieldset>
</div>
<input data-theme="d" value="Login" type="submit" onsubmit="redirect()"/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" >
<h3>
Page1
</h3>
</div>
</div>

To show a tag use
$('#child').show(); // where child is the id of the element
and to hide ...
$('#child').hide();
alternatively, you can simply toggle it between hide/show as follows:
$('#child').toggle();
to attach these to an onclick event of a button ...
$(document).ready(function() {
$('#buttonID').click(function() {
$('#child').toggle();
});
});
hope this helps

The below code is for javascript
var Home= document.getElementById("home");
Home.style.display="none";//To hide the div
Home.style.display="";//To display the div

Related

Jquery stops working after page change

I'm having this issue that I haven't had before. Once page changes to a different page it seems like the Jquery just stops working. I've looked around and the only promising solution seemed to be the $(window).load() solution but that didn't fix it either. I have no idea why this is happening. I've tested it by redirecting it to the very same page and nothing break then but once I go to a different page, it all stops working
Code:
$(document).ready(function(e) {
$("#goToNewPage").on('click', function()
{
alert("New Page 1");
$.mobile.pageContainer.pagecontainer("change", "#NewPage");
});
$("#goToNewPage2").on('click', function()
{
alert("New Page 2");
$.mobile.pageContainer.pagecontainer("change", "#NewPage2");
});
$("#goToLastPage").on('click', function()
{
alert("Last Page");
$.mobile.pageContainer.pagecontainer("change", "#LastPage");
});
});
HTML:
<body>
<div data-role="page" id="main" class="background">
<div id="logo">
</div>
<div data-role="content" id="content">
<div align="center">
<p>MAIN</p>
</div>
</div>
<div data-role="navbar" class="ui-footer-fixed">
<ul>
<li><input type="button" value="New Page" id="goToNewPage"/></li>
<li><input type="button" value="New Page 2" id="goToNewPage2"/></li>
<li><input type="button" value="Last Page" id="goToLastPage"/></li>
</ul>
</div>
</div>
<div data-role="page" id="NewPage" class="background">
<div id="logo">
</div>
<div data-role="content" id="content">
<div align="center">
<p>New Page 2</p>
</div>
</div>
<div data-role="navbar" class="ui-footer-fixed">
<ul>
<li><input type="button" value="New Page" id="goToNewPage"/></li>
<li><input type="button" value="New Page 2" id="goToNewPage2"/></li>
<li><input type="button" value="Last Page" id="goToLastPage"/></li>
</ul>
</div>
</div>
<div data-role="page" id="NewPage2" class="background">
<div id="logo">
</div>
<div data-role="content" id="content">
<div align="center">
<p><b>New Page 2</b></p>
</div>
</div>
<div data-role="navbar" class="ui-footer-fixed">
<ul>
<li><input type="button" value="New Page" id="goToNewPage"/></li>
<li><input type="button" value="New Page 2" id="goToNewPage2"/></li>
<li><input type="button" value="Last Page" id="goToLastPage"/></li>
</ul>
</div>
</div>
</body>

Selected radio don't change the jquery color button

i have a form ho check a list of task, my idea is when a task is marked the button change the color, but instead the background is changed what is my problem?
part of the code:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(function() {
$('#popupDialog').click(function() {
if($(this).select()) {
$('#ba700')
.buttonMarkup({ theme:"b" })
}
})});
</script>
</head>
<body>
<div data-role="page" data-theme="a" >
<div data-role="header" data-position="inline">
<div class="logo"><img src="http://10.0.210.26/control/logo_utryt.png" width="40%"alt=""/></div>
</div>
<div data-role="content" data-theme="a">
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-check">
        Vagón 1
        Vagón 2
        Vagón 3
Enviar
     </div>
<div data-role="controlgroup">
<div class="grid grid-pad">
<div class="col-1-3">
<div class="module">
<a href="#popupMenu" id="popupm" data-role="button" data-rel="popup" data-position-to="window" data-transition="pop" >
<h1>Dispositivos de Recaudo</h1></a>
<div data-role="popup" id="popupMenu" data-theme="a" data-dismissible="false" >
Close
<div data-role="collapsibleset" id="popupDialog" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" >
<div data-inset="false" id="ba700" data-role="collapsible" data-theme="a">
<h2>BA700</h2>
<ul data-role="listview" >
<form id="form"><fieldset data-role="controlgroup"><input type="radio" name="radio-v-m" id="radio-v-m" >
<label for="radio-v-m">Si</label><input type="radio" name="radio-v-m" id="radio-v-1m">
<label for="radio-v-1m">No</label>
 <textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4" placeholder="Observación"></textarea>
</fieldset>
</form>
</ul>
</div>
this code change the theme of the back but i want to change the theme of the button when i select a radio mark
any help please
Assuming you want the theme of the collapsible to change when clicking the radio buttons. Add a value to the the radio buttons so we know which one is selected:
<input type="radio" name="radio-v-m" id="radio-v-m" value="0" />
<label for="radio-v-m">Si</label>
<input type="radio" name="radio-v-m" id="radio-v-1m" value="1" />
<label for="radio-v-1m">No</label>
Then in script handle the change event of the radio buttons, figure out which one is selected and then change the collapsible theme as needed
$('input[name="radio-v-m"]').on("change", function(){
var val = $('input[name="radio-v-m"]:checked').val();
if (val == '0'){
$(this).closest(".ui-collapsible").collapsible( "option", "theme", "b" );
} else {
$(this).closest(".ui-collapsible").collapsible( "option", "theme", "a" );
}
});
Working DEMO

page navigation not working

I'm very new to phonegap and have had to pick up someone else's code. I am having an issue with page navigation. I have an onClick event on a list item and depending on a boolean, I want to navigate to a specific page.
The two possible pages the user will move to are almost identical. There is only one div which is different containing a list view. Originally I had only one page and I loaded the html of the div dynamically with javascript but the css was not being applied to so I decided to create an additional page which was almost identical apart from the one div mentioned above.
My issue now is that whichever div(page) I create first in my index.html will work for navigation but the second one will not i.e.
if I define the divs in the following order:
<div id="page1" data-role="page"></div>
<div id="page2" data-role="page"></div>
then navigating to page1 will work and navigating to page 2 will not. But if I switch the order in which I place the divs in the index.html page i.e.
<div id="page2" data-role="page"></div>
<div id="page1" data-role="page"></div>
then navigating to page 2 will work and navigating to page 1 will not.
Hope this made sense. Here is my code:
In the head tag I have the following function:
function SetMyAccountsBool(bool){
MyAccountsBool=bool;
if (CheckBool){
alert('here');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans4");
//window.location = "file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans3";
//$("#MyAccTrans3").trigger("pagecreate");
}
else{
alert('here2');
//$.mobile.changePage('#MyAccTrans');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans");
}
};
Then on a listview, I am calling the above function as an onClick event. It is entering the function, as I am getting the alert either 'here' or 'here2' depending on a boolean.
And finally here are the two almost identical divs I have:
<div id="MyAccTrans" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div" style="padding:10px">
<ul id="MyAccTrans_ul" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Savings - 173</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<img src="../images/homeGrey50.png">
<img src="../images/EuroGrey50.png">
<img src="../images/CalculatorGrey50.png">
</div>
</div>
AND
<div id="MyAccTrans4" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER4"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL4"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div4" style="padding:10px">
<ul id="MyAccTrans_ul4" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Current - 004</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<img src="../images/homeGrey50.png">
<img src="../images/EuroGrey50.png">
<img src="../images/CalculatorGrey50.png">
</div>
</div>
Any help appreciated

how to call div from javascript function

I have to call div from javascript function.
I have form tag like this:
<form action="save_json.php" id="hazardForm" method="post" onsubmit="displayDiv()">
and here is div which I have to call from displayDiv() function.
<div data-role="popup" id="submitPopup">
<div data-role="main" class="ui-content">
<p data-theme="b" style="color: #30659B">FORM REPORTED
SUCCESSFULLY</p>
<br> <br> <a href="#initialPage" data-role="button"
id="clearHz1" data-theme="b" data-mini="true">OK</a>
</div>
</div>
Please help me!!
$("#hazardForm").submit(function()
{
$('#submitPopup').show();
return false;
});
CSS:
.popup{
display:none;
}
HTML
<div data-role="popup" id="submitPopup" class="popup">
</div>

JQuery Mobile Button onClick Event will not work after form submission

I'm using JQuery to submit the form and the button click event stops working after the form is submitted. Any ideas?
Details:
Both forms display after form submission
The click function for the button does not work after form submission
If you click the Edit button a new form will display with a minus button to remove the message. Clicking the done button will submit the form.
Desired Outcome:
- Only display txtmessages_after div when Done is clicked
Fiddle Link: http://jsfiddle.net/u3DVW/
<div data-role="page" id="p1">
<div data-role="header" data-theme="a"> <a id="edit" data-role="button" data-theme="b" data-role="button">Edit</a>
<h3>Test</h3>
</div>
<script>
$(document).ready(function () {
var phone_list = "";
$("#txtmessages_after").hide();
$("form#frmEditMessages").submit(function (e) {
$("#txtmessages_after").hide();
});
$(".viewText").click(function (e) {
var type = $(this).attr("data-type");
$("#mobileNumber").val($(this).attr("data-number"));
$("#mobileNumber2").val($(this).attr("data-number"));
if (type != "remove") {
//$("form#frmmessages").submit();
alert('this form would go to another page');
} else {
phone_list = phone_list + $("#mobileNumber2").val() + ",";
$("#" + $("#mobileNumber2").val()).remove();
}
});
$("#edit").click(function (e) {
if ($(this).text() == "Edit") {
$("#edit .ui-btn-text").text("Done");
$("#txtmessages_after").show();
$("#txtmessages_before").hide();
} else {
$("#edit .ui-btn-text").text("Edit");
$("#txtmessages_after").hide();
$("#txtmessages_before").show();
$("#mobileNumber2").val(phone_list);
if (phone_list != "") {
$("form#frmEditMessages").submit();
$("#txtmessages_after").show();
}
}
});
});
</script>
<div data-role="content">
<div id="txtmessages_before">
<form id="frmmessages" action="/viewtext" method="post">
<ul data-role="listview" data-theme="d" data-dividertheme="d" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search messages...">
<li>
<a class="viewText" href="#" data-type="standard" data-number="5551212">
<h3>
555-1212
</h3>
<p>
Example Message
</p>
<p class="ui-li-aside">
<strong>
12/29/2013
</strong>
</p>
</a>
</li>
</ul>
<input name="mobileNumber" id="mobileNumber" type="hidden" />
<input name="keyword" id="messagesKeyword" type="hidden" value="" />
</form>
</div>
<div id="txtmessages_after">
<form id="frmEditMessages" method="post" action="">
<ul data-role="listview" data-theme="d" data-dividertheme="d" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search messages...">
<li id="5551212">
<a href="#">
<h3>
555-1212
</h3>
<p>
Example Message
</p>
<p class="ui-li-aside">
<strong>
12/29/2013
</strong>
</p>
</a>
<a class="viewText" href="#" data-number="5551212" data-type="remove" data-icon="minus" data-theme="e"></a>
</li>
</ul>
<input name="mobileNumber2" id="mobileNumber2" type="hidden" />
<input name="keyword2" id="messagesKeyword2" type="hidden" value="" />
</form>
</div>
</div>

Categories