I have Laravel project with view where user adds form fields dynamically.
There's AJAX "SAVE" button and link which opens "print view" of page.
If user hits Back button after printing, there's no dynamically added fields, although they are saved ( - if I reload the page, it renders correctly)
Am I missing something regarding caching these fields?
ok, i found few possible solutions:
1) target: _blank for links that lead away
2) input type=hidden for dynamically added fields, populated on onbeforeunload, and restored on page load (link)
but i choosed to force reloading pages after back button with such (dyn) content.
after BODY tag:
<input type="hidden" id="tmkReloadTest" value="reloaded" />
<script>
if(document.getElementById('tmkReloadTest').value!=="reloaded") {
location.reload();
}
window.onbeforeunload = function (e) {
document.getElementById("tmkReloadTest").value = "fromcache";
}
</script>
hope it helps..
br
Y
Related
I'm having trouble getting the click event on a save button.
Let me explain.
I have a view index which displays a list of posts.
For each post, there is a button to add a comment.
When the user click on add a comment, I renderPartial a form where I have a input field for the comment and 2 buttons, 1 to save and another to cancel.
If I look the html through firebug, I can see
<input id="save" type="button" value="Save">
but if I right click on the html page and click on view page source, I cannot find the
<input id="save" type="button" value="Save">
that's why I suppose my jquery script doing things on button click
$('#save').click(function(e) .... does not work, I put a alert in the code to see whether I go inside the function but no alert message is displayed.
I must add that the click event function for the button to add comment is in the same script and works (when I look at html source code, I can see the id of add comment)
Do you have any idea of what could be the problem?
The reason is because the form is added after the original DOM load. You need to use the .on function and bind it to a DOM element that exists on original page load. So you could do this:
$('body').on('click','#save',function(e) {
//more code here
});
Or you need to bind the .click to #save after you have rendered the form on the page. You can't bind an action to an element before it exists in the DOM.
SOLVED -SORT OF---
window.location.reload(); in my code where i have the submit button close the div, worked.
// Collapse Panel on submit
$("div#panel").on('submit', function() {
window.location.reload();
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
return false;
});
I keep searching for this answer and i get more frustrated every time.
Scenario:
i have a div that slides down for login purposes (jquery, css).
the login form itself in that div is initially dynamically created with PHP ( by if else statement based on value in SESSIONS - PHP echo loads the form).
3.if i put in the correct login and click submit, i have the div close (jquery on(submit)) so that the user can see the page. The page loads dynamic content from a php file using xajax/PHP functions.
4.PROBLEM - if i click to re-open the div it still shows my login form.(because the page has not reloaded). BUT my on page navbar done with xajax/PHP reloads to show the correct menu functions.
my problem is that i want the div to REFRESH after submission, or on any event change if that helps, so that it sees the NEW SESSION data and adjusts accordingly. I DO NOT WANT TO LOAD ANOTHER HTML PAGE INTO THE DIV, so load(whatever.html) IS NOT WHAT I WANT.
if i refresh the whole page using f5 after i login, and pull down the div, the login form will not be there because my SESSIONS now states that im a logged in user and no longer a guest that needs to login. and the div isnt just for login, it will house other links and shortcuts, so it would be used while your logged in throughout your visit.
index.php
<div id="left" class="left">
<?php if(isset($_SESSION['admin'])){
if($_SESSION["admin"] == "1") {
echo "YOU ARE LOGGED IN AS AN ADMIN";
}
}
if(isset($_SESSION['userID'])){
echo "YOU ARE LOGGED IN AS A USER";
}
else { echo '<form class="clearfix" id="loginForm" name="loginForm" action="javascript:void(null)" onsubmit="xajax_login(xajax.getFormValues(\'loginForm\'));">';
slide.js
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// Collapse Panel on submit
$("div#panel").on('submit', function() {
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
return false;
});
// if there is an error, close div and allow link on main content page to be clicked to reopen div
$("#content").on('click', "#tryAgain",function() {
$("div#panel").slideDown("slow");
$("#toggle a").toggle();
}); });
This is very easy to be acomplished even with pure JavaScript, no need of jQuery.
Just make one JS function that resets the input fields in the form or the div and call it every time when you need to "refresh" the content of the div or the form.
If you paste the div definition we can give you more specific advice accompanied with JS code that actually do this.
Well, if you load values into the form when the page loads, it makes sense they'd be there when the form is submitted via ajax. What you really need to do is clear the form values when the div is 'closed' in the first place.
$(#formselector).on('submit',function(){
//your ajax login and page load code
//then:
$('#formselector').find('input').attr('value','');
});
UPDATE
Based on your comment, what you really need to do is check to see if the user is really logged in before popping the form in the first place. There are a few techniques to do this, but what I'd recommend is in your php script that your form submits to, before processing the login, check your $_COOKIE variable to see if the user is recognized. This also requires modification of your login script to make sure it stores user data in a $_COOKIE, similar to how it stores data in the &_SESSION variable.
At that point, your php script will deliver two different responses based on the user state, and your javascript code that launches the form drop down would check to see if it gets the "user not found" response before showing the login form.
To just refresh the content of a particular div, use the follwing:
$("#abc").load(location.href + " #abc>*", "")
where #abc is for the div to be targeted.
I have been on this site all day and can't seem to find what I need - no duplicate post intended.
I have a form containing a link which calls a modal popup containing a different form.
###### PARENT PAGE #############
<form...>
...
link
...
</form>
**** MODAL POPUP ****
<form...>
...
<input type="submit" />
</form>
**** END MODAL POPUP ****
### END PARENT PAGE #############
When I submit the form in the modal popup, the parent page is refreshed to show the updated info in the corresponding section of the page; except that the first form is not submitted and when the page refreshes to update the necessary section, the contents of the first form is lost.
I have tried using ajax to refresh only the necessary section of the page but that doesn't work as the sections that need refreshing use php variables with contents from mysql.
The system does what it needs to do and I don't mind the refresh. But I need a way to keep the user data entered into the first form.
Is it possible to submit the first form at the same time as the second to the same php page or any other way of preserving the user data in the first form on page reload without submitting it.
You cannot do this with pure php. You'll need javascript and write it in a way that when you hit submit on the modal it 'puts' the information back into the parent form.
One way is to make the modal form submit button not an actual submit button.
You might even be able to get away with taking the filled out section dom elements in the modal injected back into the parent form. Some jquery plugins already do this. For example colorbox
Here is a working example using only ONE <form> tag and jquery colorbox. http://jsbin.com/olalam/1/edit
I am not a php developer, so I'll suggest an alternative approach.
Before you refresh the page, you can serialize the form and store the data locally (e.g. in a cookie) then restore the data back into the form. Granted, that will require a bit more JS code, but should get you what you want.
UPDATE: Since you mentioned that you might need a little assistance on the JS front, here is some guidance:
Grab the jquery.cookie plugin here.
Grab the jquery.deserialize plugin here.
Use the following code as a starting point.
.
// the name of the cookie
var cookieName = 'myCookieName';
function beforeSubmit() {
// serialize the form into a variable
var serializedForm = $('#id-of-form').serialize();
// store the serialized form
$.cookie(cookieName, serializedForm, { path: '/' });
}
function afterRefresh() {
// read the cookie
var serializedForm = $.cookie(cookieName);
// de-serialize the form
$('#id-of-form').deserialize(serializedForm, true);
}
HTH
So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -
$("a#cat").click(function() {
$("div#categoryBox").show();
return false;
});
So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -
<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">
If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?
If you need any additional information, please ask.
May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.
$('#categoryBox a').click(function(e){
e.preventDefault();
});
There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.
If you want to display the div every time the url is ?action=edit or ?action=delete, use this:
$(function () {
if (/\baction=(edit|delete)\b/.test(location.search)) {
$("div#categoryBox").show();
}
});
Or, you could append a hash parameter when you want to show the div:
edit
delete
$(function () {
if (location.hash === "#showCategoryBox") {
$("div#categoryBox").show();
}
});
I am editing to try to put my primary question at the beginning of this post:
1) I am sitting at my customers/preferences page updating info in the form
2) I want to add a widget to my list of available widgets, so I need to open the widgets/addWidget page/form to add a new widget (note I am still working in my current customers/preferences page/form, so I need to continue with this page after adding a new widget in the widgets/addWidget page/form.
3) I select a link to go to widgets/addWidget, and I have jQuery dialog open this link in a dialog with the addWidget form and submit button
4) after adding a newWidget in the dialog popup form, I want to submit the newWidget (the code for addWidget is in the widgets/addWidget controller/action, not in the customers/preferences action)
Problem: the addWidget form action goes to widgets/addWidget, so when I submit the addWidget form in the dialog, it takes me away from my current customers/preferences page
Question 1) what is the proper/best way given this scenario to popup a form in another controller/action to submit that form, but then resume my current controller/action?
Question 2) should I move all of my form and code from the widgets/addWidget controller action into my existing customers/preferences action? (that seems to be the wrong approach)
I have researched jQuery documentation, Zend documentation, and searched other threads with trusty Google and stackoverflow, but I am still struggling to figure out the right way to get this to work with Zend Framework and popup forms such as jQuery dialog.
I have a working Zend action/controller that using a Zend Form and view to display and process my form. I have also been able to use jQuery dialog to popup a window when I click the link to that controller/action.
My issue is with the proper way to get the dialog to display the form and still be able to submit and process the page. If I only load the #content tag in the dialog the form and submit button appear in the dialog box, but the submit button no longer works. If I let the dialog open the full page (not just the #content) now the form will process properly, but the form submit is set to go to my action page for processing, so the form submits and takes me away from the original page and to the real controller/action page instead.
In my customerController I have a preferencesAction where a customer can choose a widget from a list of widgets. When the customer needs to add a new widget to the list, I want to open the addWidgetAction from the WidgetsController in a popup form. I want to add the widget in the popup form, submit the form to the addWidgetAction, and come back to the customer/preferences page I was already working in (with the newly added widget available in my list to select from).
//CustomerController
public function preferencesAction(){
//this is where I click a link to /widgets/addWidget and use jQuery dialog for form
}
//Customer preferences.phtml
<script>
$(document).ready(function() {
$('#add-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
buttons: {
"Add Widget": function(){
$("#AddWidget").submit();
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<a id="add-link" href='<?php echo $this->url(array('controller' => 'widgets',
'action' => 'addwidget')); ?>'>Add a Widget...</a>
//WidgetsController
public function addWidgetAction(){
// display form to add widget
// process form, validate, add to widgets table
$baseUrl = $this->getRequest()->getBasePath();
$action = $baseUrl . '/widgets/addWidget';
$form = new Form_Widget();
$form->setName('Add Widge')
->setAction($action);
}
I need to understand how to get the dialog to load my Zend action page for form processing, but without requiring the entire layout with header, footer, etc. I also need to understand how to process the form in the dialog popup without moving away from my original page where the popup was linked from.
Thank you for your assistance!
Well, I am not sure if i understand your question but you can try this
You can load your form in UI dialog box, to disable layout do this on you can do this
public function addwidgetAction(){
$this->_helper->layout()->disableLayout();
//just diable layout and do eveything normal
}
on your preferences.phtml file load the content of url baseurl/contrller/addwidget to jquery modal dialog
UPDATE
One way is use a jqueryplugin fancybox (external src) check the forgot password link
The other way is to use ajax
UPDATE
Well now i read your question well, though don't understand so clearly, i understand that you are trying to do something that is quite ambitious. And you cannot achieve through normal load method. You need to use ajax
I have to admit that I don't like jquery ui modal dialog so i don't know much about it, and i usually use jquery fancy box where it would give me an ability to load external page. Maybe you can do this through jquery ui modal dialog box.
I guess the problem that you are facing right now is you open a dialog box, you get the form in dialog, and you submit the form, it sends the normal post request, so dialog is reloaded, that's what happens in the link i have above, just click on forgot password link
Well there's solution for that too, the solution is ajax, and i hope you are quite familiar with it. you send ajax request and get response back, and depending on your response, you can exit dialog box as well update the the parent (preferences controller page) but that is quite ..... I tried to so same with few months back, but not with zf, i don't know how much i accomplished but it sure gave me a nasty headache