Develop Reference

Fire a Javascript function after submitting a Gravity Form

I have a multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks

Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.

I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved

Click same button to refresh current page and navigate to a new page

I am working on a jquermobile template (only one HTML page with 10 DIVs as data-role=page) and I have a scenario where I have one button which when clicked should perform two activities at the same time -
Refresh the forms (that means.. reset the form fields)
Navigate to home screen
For this I am doing two things -
An onClick function that calls location.reload() - to refresh the page
For the same button, added an anchor tag referring to a screen (which is a DIV tag in jquerymobile template).
The problem here is, only the location.reload() works and the anchor tag fails to navigate to the given link (e.g. a href="index.html/#myDiv" - this doesn't do anything)
Can anyone suggest me an approach or provide me a working example for the above scenario, in which both the functionalities work for the same button?

The reason is when you do a reload it lost the track and never redirect you, so you can manually clean the entries and then reload to other page
First clear all the values
then navigate away to other page
these both step will be perform sequentially
function SomeName()
{
document.getElementById('elementid').value = "";
....
....
document.location.href='the_link_to_go_to.html';
}
Hope it helps

You can use the following
In the script
<script>
function clickEvent(){
refresh();
navigate to home();
}
</script>
in html
<input type="button" value="Dont show this again! " onClick="clickEvent();" />

jquery mobile trigger 'create' not working except the first time

I am using jQuery Mobile to create a site, in the index page I placed here a form for a search. I hooked submit event for ajax post. When ajax success get the resource
(html,<ul>...</ul>), placed in the target container, then trigger the create event for enhance the view. This work fine in the first time. When I click back to index page and search again I got a raw listview without enhance, who can tell me why? ps: I have tried many methods but there is more and more problem, the official document was so poor.
$(document).bind('pageinit',function(){
$("#search").submit(function(){
var searchdata = $("#search").serialize();
$.ajax({
'type':"POST",
'url':"/server/jnulib.php?action=search",
'data':searchdata,
'success':function(data){
$("#searchresultfield > ul").remove();
$("#searchresultfield").html(data).find('ul').trigger('create');
try{
$("#searchresultfield > ul").listview('refresh');
}catch(e){
}
$.mobile.changePage("#searchresult");
//$("div[data-role='header'] > a").
}
});
return false;
});
});
EDIT： Test Url： http://ijnu.sinaapp.com
Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.

You could try changing:
$("#searchresultfield").html(data).find('ul').trigger('create');
to:
$("#searchresultfield").html(data).find('ul').listview().listview('refresh');
Anytime you append or remove elements you need to refresh, and if you remove the whole list, you need to reinitialize it.
Also I have had issues with listview('refresh') rendering improperly if it was not visible.
$(document).on('pageshow','div',function(event, ui){
if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});

For me, .trigger('create'); always works if applied to the element with data-role="page"
For example
HTML Code
<div data-role="page" id="somePage">
...
</div>
Javascript Code
$('#somePage').trigger('create');
Hope it helps

Try:
$("#searchresultfield > ul").empty();
instead of
$("#searchresultfield > ul").remove();

I think the problem is that jquery mobile loads all pages despite all being from different files into one big page and navigation is based off going to different points in this page, so that when you go onto it the first time the page you access is considered created however when clicking the back button and navigating away from the page that page is still considered created so the event well not fire again,
What I used was:
$('#oppList').live('pageshow',function(event){
getList();
});
Where #opplist is the id of the data-role="page" for the page I just load, this does not matter whether this happens the first time the page is loaded or after because the event is fired whenever the page is displayed.
See Here foe jquery mobile events
Also see here for jquery mobile navigation
Hope this helps !

Maybe you should try to unhook the submit event once it's been handled. And initiate it again once you go back to the page where you were before. Adding eventhandlers multiple times can cause a lot of problems.

Page reload doesn't reset jQuery / CSS styles

I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});

It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.

It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.

Detect first page load with jQuery?

I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks

You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.

An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.

I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.

The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});