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 < 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
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>
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
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
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>
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>