I have dataTable which last column for edit. I have a separate page for edit form. what i want is when edit link is clicked open that page in a jQuery dialog box and submit data.
The correct way to solve this problem
Assuming that you want a popup or a more specific term modal to edit the form, you should not have a separate html view for that but actually make a general form and post data using ajax. Creating a separate page defeats that purpose.
Now assuming that you still want to have a separate page for that. The modal should be like
<div class="modal">
<iframe src="" id="frameSrc">
</iframe>
</div>
where the src contains the url of the page that you want to open, i am guessing from the href. So here is how you would do that in javascript
$(this).on("click", function () {
var editUri = $this.attr('href');
document.getElementById('frameSrc').src = editUri;
});
The javascript will get the url from href and substitute the src in iframe tag in modal.
Hope this helps..
you can do this without alert and you don't need send href to jquery
use fadeIn and some style to make it.
$('a#login').click(function(){
$("#bgstyle").fadeIn('slow');
$('form').fadeIn('slow');
})
Fiddle DEMO
hope this help you
anyway if i wanna do this i prefer to use bootstrap modal.
Related
So this is the code!
<a class="gray" onclick="javascript:window.open('https://forms.zohopublic.com/cpmovers/form/Locationupdates/formperma/0e5D2g0E23J372HC4Dek22J43');">Customer Form</a>
What I want to be done is so instead of the submit button. I want it to be the logo, so it can be clickable. I hope I explained myself well. An image turned into a clickable that leads to this whole code.
I don't see the image tag... but you need to set an onclick attribute for the image tag
example:
<img src='img/name.jpg' onclick='myFunction()'/>
and inside javascript you will have:
function myfunction(){
document.getElementById('formId').submit();
}
As i see that link re-directs you to a form, what you will need to do is to position the image where the submit button was and then add the script so when you click the image it will submit the form you have on your page
I have a homepage with a register button. When clicked it displays a hidden div where the form is. I have a "Register" button in one of my inner pages of my website. Whenever it's clicked I want it to open the homepage and display the hidden register form without it being hidden. How can I do this?
As #Barmar commented, a way could be to pass a parameter to the URL
Another possibility is to use HTTP referer
var x = document.referrer;
and checking on document.ready if you should hide or show your registration form, depending on referrer value.
Remember that HTTP referer is totally client side managed, so it could be hacked (if important in your case)
use css in your hidden <div id="reg"> display:none;
while click a link or button use onclick="showDiv();" to show that div
in js function
showDiv(){
document.getElementById("reg").style="display:block;";
}
first adding id on within <a> just like
and then use this script
$('#atagId').click(function() {
var someId = $(this).attr("id");
window.open('SECOND.html/#'+someId);
});
I can't seem to figure this out, and I've tried multiple forums. I would like to render a form when I click a link using javascript. Could someone show a basic example on how to do this?
Just to clarify #Luan Nico answer since you just have to render a form without doing anything extra in your controller you would be better served if you put your form inside a div tag and then toggle that div to show when you click on button.
Fix:
a. Make a div and put your form inside it
<div id="myForm">
<%= render "your_form" %>
</div>
b. Hide that div by css
#myform {
display:none;
}
c. Create your link to show your from:
<%= link_to "Your button","#", id: "yourButton" %>
d. Write your js inside assets/javascript/application.js or make a new file and then require in inside application.js
$(document).on("click","#yourButton",function(){
$(#myform).show();
});
Assuming the form doesn't change when the button is clicked, just have it's visibility toggled, you can put the entire form inside a div, give it an id, and then you can use jquery:
$('#my-button').click(function (){
$('#div-id').toggle();
});
Where my-button is the id of the button in HTML, and div-id is the div id in the HTML (something like <button id="my-button">Click me</button> and <div id="div-id"><!-- form --></div>).
Or you can do it with plain JS as well, if you don't have jquery (getElementById, etc).
If the form changes slightly, you can also use this technique, but you will need to add some conditions. Otherwise, you will have to use AJAX to get the current data.
Just a warning, try to avoid passing the whole form HTML via an ajax call, the best way is to provide just the data via json and using JS to populate the HTML with the data.
Here is the problem:
I have a page e.g www.app.com/home and I have some windows that are added in a slide way to the DOM via jquery. One of those windows has the functionality of looking into a gmail account for contacts.
This is done in this way:
User is in the home page.
Clicks the search Friends button, and a window with many options
slides in (added by jquery, rthe content is in another .gsp)
Clicks the option gmail and it redirects to googles oauth,
permissions and account selection, where he must accept the access
to his/her contact list.
Once accepted, it redirects to my home page again, where I have a
var to know if its the callback from google, so I ran the script
that shows the popup again.
The problem Im having, is that from the home page itself, I can access the model passed by the controller that has the ${friendList}, but when I add some code to the popup window, the ${friendList} is not detected.
I have used grails render templates to solve this problem in the past. You can have a hidden div that jquery unhides when it is popped up. e.g
<div id="theSlideWindow" style="display:none">
<g:render template="gsptemplate" collection="${friendList}" var="myfriend" />
</div>
Now when the button is clicked, jquery will unhide the div and animate it however you are animating it. Now this is not very efficient depending on the size of friendList because it is loaded with every refresh.
But you can still make jquery load work by doing the following:
add user id to a hidden input.
<input type="hidden" value="${userid}"/>
use jquery so send the id as a param:
$('button').click(function() {
var page = "gspurl/show?userid=" + $("#hidden").val();
$("div").load(page, function(response, status, xhr) {
//do something here
});
return false;
});
In your gsp use userid to load friendList.
Another alternative would be to use a controller that returns html or json instead of a gsp.
Obviously, there several different ways of passing friendList around but hope this gives you some ideas.
I am wondering if there's a good way to take a variable built in Javascript and then insert it into a form that's on another page.
My application is a survey: I've got it so that at the end of the survey, all the results are displayed so they can look over their answers. Now I want to have the user click a link and have the answers of the survey show up automatically in the body of the form where they'll then add their email and contact info and click "send."
Any ideas?
Knowing that this ISN'T possible is fine too...if not, what alternate methods might I accomplish the end result?
You can create a hidden field in first page and change that value from javascript variable. When you post that page it can be another page where you need to display in form element.
EDIT
If you need without form in first page you need to link with hyperlink like below.
<a href='#' onClick='OpenPage()'> Go To Result </a>
<script>
var val=20 ; // say this is the value you want to pass to second page
function OpenPage ()
{
window.location.href = "resultpage.php?param=" + val;
}
</script>
After you need to read that param in resultpage either with javascript through URL string or from server side (in PHP $_GET).
Hope it helps.