refresh div (populated by jquery) when form (inside div) is submitted - javascript

Here is my scenario. I have a 'Master Page (Course_Maintenance.php)' that has 2 divs on it. The first is populated from the code on Course_Maintenace.php. The second div populates using the following:
$(document).ready(function() {
$("select[id='SelectCourse']").change(function() {
var link = 'CourseTeeInfo.php?CourseID='+$(this).val();
$('#CourseTeeInfo').load(link);
})
});
The CourseTeeInfo.php page has a form that populates and works perfectly. I use a staging system on that page:
// Get stage of form
if(!isset($_POST['btn_submit']) || !$_POST['btn_submit']) { $stage=0; }
if(isset($_POST['btn_submit']) && $_POST['btn_submit'] == 'submit') { $stage=1; }
So once the form is filled out and validated, I use javascript to change the value of btn_submit to come back to the form to use PHP to write to the MySQL database:
function ValidateForm() {
if(!noErrors2()) { alert("You must fix errors on page before submitting"); }
document.getElementById('btn_submit').value = "submit";
document.TeeInfo.submit();
}
Currently I have Stage 2 just echoing the $_POST variable to the screen. This all works if I call CourseTeeInfo.php directly. However, when I click the Update button on the form (which fires the ValidateForm() javascript) within the div on Course_Maintenace - the div refreshes to a blank screen rather than the $_POST variable display (as it does running directly).
Any insight on how to have the div refresh properly in the parent (Course_Maintenace.php) window would be greatly appreciated. I simply want the div to work exactly like the form works if called directly. My goal is that after I successfully write the record (in $stage=1) that I will reload the form (yet again) back to $stage=0 which will then have the new/updated information.
Thanks in advance for the help.

I changed the approach slightly and used jQuery AJAX calls to write to the MySQL database (instead of reloading the form). After writing the record, I simply refreshed the div using the jQuery .load function.

Related

How do I make a JS function triggered in one HTML page edit elements defined in a second HTML page?

Basically I have two HTML pages, and both are connected to the same JS file. I want a function triggered by an event handler element in the first HTML to edit an element in the second HTML page, and then open it.
Here's a very basic example:
$("#p1").click(function() {
$("#p2el").text("TEST");
})
<button id="p1">CLICK</button>
In this example, the button p1 is defined in the first HTML, and the p2el element is defined in a second HTML page, both linked to the same JS file.
In the above example, I also used location.href inside the function. The idea being that, the element is edited, and automatically the second HTML page is loaded.
It's not working, and I don't know why. The second HTML page loads, but the element p2el is not edited.
I suspect this is has to do with data not transferring to the second HTML, but I am not sure why and what is happening exactly. I tried using localStorage inside the function, and then use the stored data as a condition that edits the element in the second HTML page...
function second() {
if(localStorage["key"] == "on") {
$("#p2el").text("TEST");
location.href = "secondpage.html"
}
}
$("#p1").click(function() {
localStorage["key"] = "on";
second()
})
... but It didn't work.
I hope somebody can help me out.
Navigating to a new page completely resets the "JavaScript envirionment".
Your JS files are reloaded, everything starts anew. Some things persist through page loads, such as local storage and cookies, but function calls certainly don't.
To do what you want to do, you'll need to:
Listen to the click event, and save the fact it was clicked somewhere.
(You're already doing this)
On page load, check the storage to determine whether or not the button was clicked at some time. If it was, do whatever you want. You will probably want to reset the stored value so this happens only once.
This will probably do the trick for you:
if(localStorage["key"] === true) {
localStorage["key"] = false; // reset the key.
$("#p2el").text("TEST");
}
$("#p1").click(function() {
localStorage["key"] = true;
location.href = "secondpage.html"
});

How to use information from the URL to click on specific button?

I'm working on a group project for a class, and we have a webpage that is split into different tabs, so it is only one webpage, but appears to be different pages using Jquery so the page doesn't have to reload when switching between tabs. The problem I am having is that one of the tabs has a form to get information from the user, then after the user clicks the submit button, the info is sent to the database using php, causing the page to reload. Then depending on if the information was successfully sent to the database, there will be either "success" or "invalid" appended to the end of the URL. If the user submits this form, we want them to automatically come back to this tab on the reload, and I have tried doing this by using a script like this:
<script>
document.getElementById("baseTab").click();
window.onload = function() {
var theurl = document.location.href;
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
};
</script>
The baseTab is the tab we want to load whenever someone first loads the webpage, unless they have just submitted the form on the infoTab page. This code structure works on a simple test webpage I run on my computer, but when I try to push it to our project repository, it will only do the "baseTab".click, and not click the "infoTab" button even if theurl includes "success" or "invalid". I tried doing it without the window.onload(), but that doesn't work either. Also, if I do
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
else {
document.getElementById("baseTab").click();
}
then neither of the buttons get clicked. If their is an easier way to do this or you see where I am going wrong, any help would be appreciated. Thanks!

Why is my jQuery click function not firing?

I am building a search page that posts back to itself. I finally got a sample page working here. I also built a fiddle here. But I don't understand why it works. When the user initially hits the page, it should only show the search form. When a search is submitted, it should hide the form, show results, and a button for a new search. I'm using jQuery. Here's my code:
//Code Block 1
// Show search form if there is no querystring
//Hide search form, show results if querystring
$(document).ready(function() {
if(document.location.search.length) {
$("#newsearch").show(1000);
$("#results").show(1000);
$("#search").hide(300);
} else {
$("#search").show();
}
});
//code block 2
//if new search clicked, show form, hide results
$("#newsearch").click(function() {
$("#newsearch").hide(1000);
$("#results").hide(1000);
$("#search").show(300);
});
When code block 1 and 2 are loaded in the head, block 2 never fires. When I pull 2 out and put it at the end of the page, it works.
I am trying to learn, so I have 2 questions. (1) Why didn't it work when it was one block, and (2) Any suggestions for doing it better?
Thank you.
D
$("#newsearch").click(function() { is being run before the #newsearch element exists.
Therefore the click event is attached to nothing.
It works in the first block because it's in a $(document).ready, which runs code inside only after everything has finished loading.

Javascript code not running after the page is refreshed or reloaded

I have a javascript code that, whenever a checkbox is checked, will reload my current page and then is supposed to grey out some input fields.
However, it is only doing the reload when the page is reloaded the input fields are never greyed out.
$(document).ready(function(){
$("#storePickUp").on("click", function () {
if ($(this).is(":checked")) {
document.getElementById("shippingForm").submit();
document.getElementById("shippingAdress").disabled = true;
document.getElementById("shippingState").disabled = true;
document.getElementById("shippingCity").disabled = true;
document.getElementById("shippingZip").disabled = true;
document.getElementById("shippingZipCode").disabled = true;
document.getElementById("shippingButton").disabled = true;
}
});
});
So in your code on the 4th line where you call .submit()... unless you have some extra magic on the page that you are not showing, this line will proceed to post/get your form to whatever url you have configured in that form.
What this means is that the lines underneath that do not matter at all, since they will not be executed on the forms target page.
To get around this if you truly need the form post in the middle, you would need to post to a specific url and use that url as a trigger on page load to disable those elements. Not directly after the click, but rather on the newly loaded page that is the target of the form... make sense?
I think that's because it's only disabling them when you click on #storePickUp but if your page is reloaded it will reset.
Method submit is executed, page reloads, code after submit is never executed. Even if that code would be executed, page refresh nullifies any changes.
You should probably do submitting with ajax, not with submit method. If you are using jQuery, it will make it easy for you:
http://api.jquery.com/category/ajax/

javascript onclick even handler reveals form

I am wanting to pass a variable through to another form that will reveal itself when a certain radio button is clicked. However not sure the best way to do this as do not want to refresh the page.
the javascript for the form opening is:
$(document).ready(function(){
$(".col3flex").css("display","none");
$(".category").click(function(){
if ($('input[name=category]:checked')) {
$(".col3flex").slideDown("fast");
} else {
$(".col3flex").slideUp("fast"); //Slide Up Effect
}
});
});
what i need to do now, is pass the radio button value to be picked up by my php select statement in order to display the correct values.
How would i implement this please
thanks
I believe that you're having trouble with the event handler and then checking for the value of the radio button. I think this is what you need (I assume that ".category" is the radio button?)
$('.category').change(function() {
if ($(this).val('checked') === 'checked') {
// do whatever...
}
});
If you need to load some backend-informations via PHP you won't come around AJAX - especially if you need such informations while not reloading the page.
You need to send the AJAX-request and fill the needed elements which its information before sliding the .col3flex-element down.
If thats not quite what you wanted, you need to go further into details regarding your problem.
hi you can send an ajax request to any other page that will render you other select. At on click event just send an ajax request to some other page
$(document).ready(function(){
$(".col3flex").css("display","none");
$(".category").click(function(){
if ($('input[name=category]:checked')) {
var url='somepage.php';
var data=$(".category").val();
$.ajax({url:url,data:data,type:'POST',success:function(data){
//here you will just populate the html response sent by `somepage.php` say your select has id='select' then
$('#select').html(data));
}});
$(".col3flex").slideDown("fast");
} else {
$(".col3flex").slideUp("fast"); //Slide Up Effect
}
});
});
And your somepage.php file will get the post data and generate the dropdown
if(isset($_POST))
{
?>
//Your html for generating a select statement
<?
}

Categories