jQuery .live working in browser but on android phone - javascript

I am using phonegap to build my and I am trying to create a function that will refresh certain elements on pages in my app. I have been following another solution I found here
Jquery-Mobile: How to reload/refresh the internal page
The code is working perfectly in my browser but I can't get it to work on my android. I have tried changing to several different versions of both jQuery and jQuery mobile but neither works. I am new to working with phonegap and jQuery so would appreciate any help.
Javascript:
<script type="text/javascript">
$('#page_3').live('pageshow',function(event, ui) {
// refresh specific element
$('#refresh').val('');
});
$('#page_2').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
</script>
HTML:
<body>
<div data-role="page" id="page_1" >
<div data-role="content" name="contentlogin">
Navigate to page 2
Navigate to page 3
Yeah Page 1
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 2<br />Refresh All Elements<br /><br />
<label for="basic1">Text Input 1 (Refresh):</label>
<input type="text" name="name1" id="basic1" value="" />
<label for="refresh1">Text Input 2 (Refresh):</label>
<input type="text" name="name21" id="refresh1" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 2
</div>
</div>
<div data-role="page" id="page_3" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 3<br />Refresh Specific Elements<br /><br />
<label for="basic">Text Input 1:</label>
<input type="text" name="name" id="basic" value="" />
<label for="refresh">Text Input 2 (Refresh):</label>
<input type="text" name="name2" id="refresh" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 3
</div>
</div>
</body>

Related

Webpage loses interactivity with JavaScript when a form is submitted

I have a single page website that has three buttons (styled with jQuery Mobile) as a menu which, when clicked, show different content that is contained on hidden "div". However, on the main page I have a form connected to mysql which lets users join in, but when you fill the form and click the button "submit", the page "kind of reloads" and the header buttons don't work anymore. So, when form is submitted on main div, menu stops to work (it doesn't display and hide content anymore) Is there any solution to this?
(I've included a snippet but here the problem is not seen as I can't connect it to mysql).
function updateContent(hash) {
var newClass = hash.substring(1);
var newContent = $("." + newClass).html();
$("#content").html(newContent);
$("#content").css("display", "none");
}
if (window.location.hash) {
updateContent(window.location.hash);
}
$(".contentUpdate").click(function() {
updateContent($(this).attr("id"));
$("#content").fadeIn();
$(".contentUpdate").removeClass("ui-btn-active");
});
.hiddenContent {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="menu">
<div data-role="navbar">
<ul>
<li><a class="contentUpdate" id="#swim">Swim</a></li>
<li><a class="contentUpdate" id="#cycle">Cycle</a></li>
<li><a class="contentUpdate" id="#run">Run</a></li>
</ul>
</div>
<!-- /navbar -->
</div>
<div id="content">
FORM
<div id="joinForm">
<form method="post">
<label for="name">Name and Surname(s)</label>
<input type="text" id="name" placeholder="Adam Smith" value="" name="name" />
<label for="email">Email</label>
<input type="text" id="email" placeholder="example#esade.edu" value="" name="email" />
<label for="phone">Phone</label>
<input type="text" id="phone" placeholder="+34 671 542 893" value="" name="phone" />
<fieldset data-role="controlgroup">
<p>Choose the sports you're interested in:</p>
<input type="checkbox" id="swimming" name="swimming" value="" />
<label for="swimming">Swimming</label>
<input type="checkbox" id="cycling" name="cycling" value="" />
<label for="cycling">Cycling</label>
<input type="checkbox" id="running" name="running" value="" />      <label for="running">Running</label>
</fieldset>
<div align="right">
<button type="submit" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" name="submit" id="submit" value="submit">Submit</button>
</div>
</form>
</div>
</div>
<div class="hiddenContent swim">
swim
</div>
<div class="hiddenContent cycle">
cycle
</div>
<div class="hiddenContent run">
run
</div>
Thank you!

Cordova Framework7 template sub pages javascript doesn't works

I have a index.html page in Framework7 template which acts like master page, and sub pages for example contact.html ;
<div class="pages">
<div data-page="contact" class="page no-toolbar no-navbar">
<div class="page-content">
<div class="navbarpages navbarpagesbg">
<div class="navbar_left">
<div class="logo_text">BLIX</div>
</div>
<div class="navbar_right navbar_right_menu">
<img src="images/icons/white/menu.png" alt="" title="" />
</div>
<div class="navbar_right">
<img src="images/icons/white/user.png" alt="" title="" />
</div>
<div class="navbar_right">
<img src="images/icons/white/cart.png" alt="" title="" /><span>3</span>
</div>
</div>
<div id="pages_maincontent">
<h2 class="page_title">CONTACT</h2>
<div class="page_single layout_fullwidth_padding">
<h2 id="Note"></h2>
<div class="contactform">
<form class="" id="ContactForm" method="post" action="">
<label>Name:</label>
<input type="text" name="ContactName" id="ContactName" value="" class="form_input required" />
<label>Email:</label>
<input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input required email" />
<label>Message:</label>
<textarea name="ContactComment" id="ContactComment" class="form_textarea textarea required" rows="" cols=""></textarea>
<input type="submit" name="submit" class="form_submit" id="submit" value="Send" />
<input class="" type="hidden" name="to" value="youremail#yourwebsite.com" />
<input class="" type="hidden" name="subject" value="Contacf form message" />
<label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
</form>
</div>
<h3>Our Location</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193578.74109041138!2d-73.97968099999997!3d40.70331274999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York+NYC%2C+New+York%2C+Statele+Unite+ale+Americii!5e0!3m2!1sro!2s!4v1425027721891" width="100%" height="200" frameborder="0" style="border:0"></iframe>
<blockquote>
Adress: New York 23066 / Pacific Street / Brooklyn <br />
Email: email#yourwebsite.com <br />
Mobile: +900 456 567 77
</blockquote>
Call Us Now!
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
When I add bottom page this javascript ;
<script type="text/javascript">
alert('Hello World!');
</script>
It doesn't trigger and it doesn't give any error. When I add it to bottom of index.html page or my-app.js file it works. But I need some specific javascripts in sub pages. How can I achive this? Thanks.
Page Events: https://framework7.io/docs/page.html#page-events
On your index page, include a whatevername.js file and put page specific logic inside it. (Alternative ways with routing and components)
Inside that js file, target the page by it's data-name, and the page event you want it to be run at.
Example: on my html page called home
<div class="page" data-name="home"> with whatever normal html the page has inside it.
In my js file I would run js on it by using this
$$(document).on('page:init', '.page[data-name="home"]', function (e) {
//whatever code here
alert('Hello World!');
})
So on the home page, on its init event, it will trigger the javascript that has alert hello world.
Starting from a template will make it easier to see how different parts work within F7. https://framework7.io/templates/ The Single View is a good starting point.

Make signup div to pop up when people come to site in wordpress

i hava this code
<!-- signup work start here -->
<div class="signup">
<div class="signfree">
<div class="signfree1">
<h6>Sign up for our FREE <br /><span>bark bulletin!</span></h6>
<h5>monthly newsletter</h5>
</div>
<img src="<?php echo get_template_directory_uri(); ?>/images/dog_news.png" alt="" />
<form id="footer">
<input type="text" value="name" class="name" />
<input type="text" value="email" class="email" />
<input type="submit" value="submit" class="submit" />
</form>
</div>
</div>
<!-- signup work end here -->
i have this form to popup when some user come to my site !!
Try to hide your div by css and show using jquery the way suggested below.
in css:
.signup{
display:none; /* this hides your div when page loads*/
}
and jQuery:
jQuery(function(){ // dom ready function
jQuery('.signup').show(); // when dom is ready show the element
});

Jquery-Mobile: How to reload/refresh the internal page

I have 2 pages(i.e., page_1 and page_2) in the container page(i.e., page.html).In the first page i have only one button if you click on that then it will navigates to the second page.when you come back from the second page to First page and once again click on the button for navigating to the second page at this time i want to reload/refresh the page. i tried but i am not getting please can anybody help me.
Here the code:
<div data-role="page" id="page_1" >
<div data-role="content" id="contentlogin">
Navigation
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" id="contentlogin">
//Some Form elements are there
</div>
</div>
<script type="text/javascript">
function refresh()
{
$.mobile.changePage($("#page_2"), {transition: "pop",reloadPage: true});
}
</script>
thanks
You could try something like this:
http://jsfiddle.net/sJdfy/4/
JS
$('#page_3').live('pageshow',function(event, ui) {
// refresh specific element
$('#refresh').val('');
});
$('#page_2').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
HTML
<div data-role="page" id="page_1" >
<div data-role="content" name="contentlogin">
Navigate to page 2
Navigate to page 3
Yeah Page 1
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 2<br />Refresh All Elements<br /><br />
<label for="basic1">Text Input 1 (Refresh):</label>
<input type="text" name="name1" id="basic1" value="" />
<label for="refresh1">Text Input 2 (Refresh):</label>
<input type="text" name="name21" id="refresh1" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 2
</div>
</div>
<div data-role="page" id="page_3" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 3<br />Refresh Specific Elements<br /><br />
<label for="basic">Text Input 1:</label>
<input type="text" name="name" id="basic" value="" />
<label for="refresh">Text Input 2 (Refresh):</label>
<input type="text" name="name2" id="refresh" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 3
</div>
</div>

How can I select the next div using jQuery?

I am quite a noob when it comes to jQuery and I'm trying to select the next element using the next() selector but having a little trouble in getting it to work!
What I'm trying to do is to activate slideDown() once the user has finished making their selection on a ui slider. Here is my code:
$('.slider').slider({
stop: function(event, ui) {
$(this).nextAll('.secondq:first').slideDown('slow')
}
});
Trouble is, this doesn't work at all. It will only work if I put the 'secondq' question inside the parent div of the ui slider. Here is my HTML:
<div class="option">
<h2 align="left">How high is your ceiling from the floor?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderFt slider"></div>
</div>
</div>
<!-- End Option -->
<div class="option">
<h2 align="left">How many windows do you have?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderWinDoor slider"></div>
</div>
<div class="secondq" style="display:none;">
<h2>What type of material are your windows made of?</h2>
<div class="radiocont">
<label>Wood</label>
<input type="radio" class="styled" value="wood" name="windowtype" />
</div>
<div class="radiocont">
<label>Metal</label>
<input type="radio" class="styled" value="metal" name="windowtype" />
</div>
<div class="radiocont">
<label>PVC</label>
<input type="radio" class="styled" value="pvc" name="windowtype" />
</div>
</div>
</div>
nextAll only gets siblings. Based on your HTML structure, you could do:
$(this).parent().next()
To make it more independent from the structure, you could also do:
$(this).closest('.slidewrap').nextAll('.secondq:first')

Categories