I have HTML form where I open a new popup and insert some data and refresh the
complete page and close the popup.
But my problem is: I want to refresh only specific input field data not whole page.
Kindly also send some links for details and demo.
Thanks in advance
Use ajax (maybe jquery, if you are already using it)
$.ajax({
url: "http://url_to_get_input_field_data",
}).done(function( data ) {
$("input_field_id").val(data);
});
Related
I have a functioning site that includes a search function that loads results into a <div> element via a jQuery $.ajax call like so:
$.ajax({
url: '{{ path('order_search') }}',
type: $(this).attr('method'),
data: $('#search_form').serialize(),
success: function (data) {
$('#js-search-results').html(data);
}
});
I'm working in a twig template within a symfony project, thus the url notation. This is working perfectly.
This is on a site that requires login. I have an event listener in symfony that checks for a period of inactivity at each each kernel request (taken from here), and if the inactive period exceeds a maxIdleTime then the user is redirected to the login page.
My problem is that if the user is inactive for a period and then enters a search, the js-search-results div is filled with the login page. What I would like to happen is to have the entire window redirect to the login page. Seems simple, but I haven't figured out how to do it.
One what I thought to handle would for my login page script to check whether it was being loaded into the full window (rather than just a div element), and if not then refresh the entire window. How to do this?
You can check the content inside the variable "data" to check if it contains elements from the login page and then use an if else statement.
if(data.includes("username") && data.includes("password")){
window.location.assign("https://your.login.page.html");
}else{
$('#js-search-results').html(data);
}
It sounds like you want to find out what type of data is there and if it is the login page do a redirect.
Find out if the data contains elements that are in the login page. if it is do a window.location.href = "/login" if not display the search results in the div. send data from backend like {page : "login"}
I have a PHP page with implementation of jQuery horizontal tabs. I have added a jQuery script so that the page URL reflects the tab#. I have a form on the page and upon form submission I need to refresh and stay on this same page to include the jQuery correct tab number.
This is the code to add the jQuery tab number to the URL:
<script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "#tabs-1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
</script>
The full URL of the page is http://somedomain.com/includes/nonadmin_user_profile.php#tabs-5 and includes the tab number for the jQuery horizontal tab.
I am using this script to refresh and stay on the same page: echo "<script>window.location=window.location</script>";
On refresh here is the problem as it lands at this URL which does not include the tab number. http://somedomain.com/includes/nonadmin_user_profile.php
Any suggestions would be appreciated very much.
Here is another detail: The problem described above does not occur if I merely refresh the page with the browser refresh button or if I right click the page and refresh. In this instance the page refreshes and stays on the full url with the tab#.
Per Disaster Faster's request, the issue encountered was simply that the browser was not going to the desired location of the page. The form data was successfully submitted and correct page was loaded.
The solution to his issue was modifying the form's action attribute to include the location information (similar to adding location information to an anchor).
Original:
<form action="nonadmin_user_profile.php" method="post">
New:
<form action="nonadmin_user_profile.php#tabs-5" method="post">
Original Post:
The window.location = window.location redirect should include the location information.
JSFiddle: http://jsfiddle.net/6dqcmh9d/
If you click the button first, it'll report the URL with the location information because it hasn't been added to the URL. Then click the link and re-click the button. You'll receive the URL with the location information added.
If you want just the location information, you can use window.location.hash, but this will only produce the location on the page, not the URL of the page.
The problem you'll run into will be with the form submission. To submit a form without changing the page, you'll either have to submit the form to a new window (add target="_blank" to the form) or implement AJAX. In either case, we'd need a little more of your code to help with integrating it properly.
It is likely that the tab controls are being handled with onclick events or something similar, and are not listening for hash changes onload. You'll likely need to add some custom JS to force the tab change if there's a hash change.
What's wrong with using the reload() method?
document.location.reload(true);
From the docs:
The Location.reload() method Reloads the resource from the current
URL. Its optional unique parameter is a Boolean, which, when it is
true, causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its
cache.
If you need to integrate it into a PHP echo struct, use:
echo '<script>document.location.reload(true);</script>';
You should use reload() to refresh the page, eg:
window.location.reload();
Or given your example:
echo "<script>window.location.reload();</script>";
I am working on Spring MVC. I have a page having list of items in table. I need jquery to pick up the radio selected and then user can click on view or edit or delete. According to the button clicked, ajax block invokes proper action with the form object serialized and the id goes to the action for processing.
Everything went fine till here.
Then, when the action returns back to ajax success: block
$.ajax({
type : "post",
data : str,
url : newUrl ,
async : false,
success : function(data) { <----- here
I need to redirect to page action has in its view object. Instead, as we know, its ajax, so I need to show the result in some div on that page itself. But I need to go to the page directed by spring action. Please help me do this.
In short, I don't want to show the details on a pop up but another page.
Thanks.
get url of page directed by page action and use following statement to redirect page
window.location = pathReturned;
above statement will simply redirect users' browser window. So if you may require to persist state of the page.
i am trying to be able to edit my custom cms blog posts without leaving the page.
The way it works is each post has a edit button which when clicked hides the post text, and displays a ckeditor and also a save button.
All the code works correctly behind the scenes as to say, when saved an ajax call is made to another php page which updates the posts content. Now the issue is i want to on save, show again the text and hide the editor.
I can get this working, but i cant get the div text to update to the new content until the page is refreshed.
So the ajax looks like so:
// ... goes after Validation
if (check == true) {
$.ajax({
type: "POST",
url: "process/updatepost.php",
data: $targetForm.serialize(),
dataType: "json",
success: function(response){
if (response.databaseSuccess)
$targetForm.find('.editor').toggle('hide'),
$targetForm.find('.buildtext').load('http://localhost/buildsanctuary/viewbuild.php?id=134 +bt+'),
$targetForm.find('.buildtext').toggle('show'),
$targetForm.find('.edity').toggle('show'),
$targetForm.find('.saveupdatebutton').toggle('hide');
else
$ckEditor.after('<div class="error">Something went wrong!</div>');
}
and this is how im trying to use a variable in the selector...
var bt = $(this).attr(".buildtext");
hope this all makes sense?
Craig.
sir,
when i click on "Rename Day button" jquery popop calender appears in my screen , once if i click on its submit button it is forwarding to my page but is not refreshing the exact div.. I do not where should i specify div target for refreshing my particular div..
jquery function for submit
function okButton(){
$("#formId").submit();
};
$(this).submit({
target: '#userTemplateRightmiddlediv'});
};
struts.xml
<!-- Rename Selected Day for User Template -->
<action name="EditDayAction"class="com.ebhasin.fitnessbliss.dao.DynamicTableOperationsService" method="RenameDayUserTemp">
<result name="success">/jsps/userTemplateRightmiddlediv.jsp</result>
</action>
Extend the functionality of your 'okButton' to stop the default form submission behavior, then create an ajax function to connect to your XML file, return the data, and then insert the data into the .html() of the element with an ID of userTemplateRightmiddlediv
function okButton(){
$("#formId").submit(function(e){ //'e' for 'event'
e.preventDefault();//stop the page from refreshing
$.ajax({
url: 'Struts2 URL Here',
dataType: 'xml',
success: function(xml){
//function(xml) represents an object returned from our XML file, we can work with it however we want by using normalized jquery procedures
$("#userTemplateRightmiddlediv").html(xml);
}
});
});
}
Edit
Changed to reflect portability with Struts 2.
You're trying to fire two submits. $ is a function that returns an object. 'submit' is a method of that object. If the jquery object is holding a form, it's like pressing the submit button on that form so the page refreshes and all the remaining code doesn't matter. You're trying to submit twice but $(this).submit doesn't really make sense.
If I had to guess, maybe you want something more like this:
$('#formId').submit( function(e){
e.preventDefault(); // stops the page from reloading
//maybe ajax or something else to change this div you're talking about.
} )