This function works on loading an external page inside of a div that passes a $_POST variable and click works on the first record on loading the same external page with $_POST variable from query.
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
What is not functioning is this seems to only be passing the first record variable and no others. I can click on the first record and the external page with data loads. I click on other records and the div does not load with new data from click. I have a page that creates a customer list from a mysql query, inside the record loop is a hidden input field with the primary key. Any thoughts on what I am missing? I thought maybe to unbind click, but that did not work either.
HTML Code
<div id="record"><?php do { ?><input type="hidden" name="ContactID" id="ContactID" value="<?php echo $row_tm_reserves['ContactID']; ?>"><!-- Other strings --><?php } while ($row_tm_reserves = mysql_fetch_assoc($tm_reserves)); ?></div>
Help! and Thanks in advance!
The problem is that #form content gets replaced on every load.
My solution:
You can create a new element inside #form, for example a <p>, and append to it, i.e. :
$(document).ready(function(){
$("#form").load("tm-reserves-form.php");
$(document).on("click","#record",function(){
var ContactID = document.getElementById('ContactID').value;
$("#form").append($(document.createElement("p")).load("tm-reserves-form.php", {"ContactID": ContactID}));
});
});
This is the problem with event delegation, change
$("#record").click(function(){
});
to
$(document).on("click","#record",function(){
});
Mainly make sure you have only one id as record in your page.
You should post your html code, to help us help you...
if new dom elements are added, the script that attaches actions on them will not work, because they didnt exist at the load of that script.. switch to :
$(document).on("action","element",function()
Related
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"
});
I have a problem. It is my full honor if anyone helps.
First, let me explain the workflow I want. My CMS is Wordpress. I have a webpage (views.php). In this page, I want to show a download button (id=” download-button”) just to users who has the role subscriber. In default, no one has the role subscriber. So, the button is hidden in default. When a user buys a specific product he gains the role subscriber. Now, suppose a user has opened views.php page as a tab in his browser. In this step, the button is hidden. After that, he opens another tab and buys that specific product and he gains the role subscriber. Now, if he refresh the view.php page, the download button is seen. But, I want the user to see the download button without refreshing the page. In this regard, I wrote button.php file to be called in ajax. However, it does not work.
My codes:
html code (written in view.php which is the place of download button):
<div id="div1"></div>
my javascript code (which is put inside view.php file):
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("button.php");
});
});
</script>
my button.php code:
<?php
if (check_user_role(array('subscriber'))) {
echo ('<button id="download-button">Download</button>');
}
?>
I should note that I have written check_user_role php function in views.php.
It would be my honor if you help.
Thanks in advance.
Milad
As stated by smartdroid in one of the answers above, you can subscribe an event listener function to the window.onfocus event. Try following:
document.addEventListener("DOMContentLoaded", function (event) {
window.onfocus = function () {
$("#div1").load("button.php");
}
});
I highly recomment you to read further into javascript events.
For plain javascript:
https://www.w3schools.com/js/js_events.asp
For jQuery:
https://api.jquery.com/category/events/
Hey you have to use Window setInterval() Method, what this method does it will fire in background at your time interval set.
You can call your ajax code to set/show your button
setInterval(function(){
$("#div1").load("button.php");
}, 3000);
Make sure once you do add this button put return false so it wont execute again and again not to increase load on webpage.
$(document).ready event runs only once after the DOM is loaded. So this event will not fire unless page is reloaded.
If the user is buying a subscription in another browser tab and then returns to the original tab, windows.onfocus event will fire.
So you can use window.onfocus event to check for subscription every time view.php tab becomes active, and then show the button when necessary. So you can use something like the following, in your view.php
$(document).ready(function(){
window.onfocus = function () {
$("#div1").load("button.php");
}
});
Add an iframe to your view.php that doesn't need to contain anyting nor be visible.
<iframe name="download" id="if_download" src="blank.html"></iframe>
Target the download-action to the iframe. With some JS:
function download(href) {
window.frames['download'].location = 'download.php?file=' + href;
return false;
}
You may need to wrap the download-action through a php-file to modify its header
download.php:
$file_name = $_GET['file'];
//validate file exists and *remove any ../ - simple:
if (strpos($file_name, '/') !== false) die('yeah right..');
header("Content-Disposition: attachment;filename=\"$file_name\"");
echo file_get_contents($file_name);
die();
I'm using jQuery mobile and my page is generated from an index.php file. When I click on links referring to another option of my php file (index.php?action=other_action) it loads in Ajax so the previous content is still kept in the code. This causes problems as nothing is dynamic anymore, because I'm using specific ids, so it breaks everything. Of course disabling Ajax works but I loose all the beauty of jQuery Mobile.
I guess a solution would be to create an onclick function on the <a>, that will prevent the page from keeping the previous content or delete the old page.
So is there a way to keep using ajax in a way that it doesn't break my dynamic elements ?
You can see it in action here, you can filter names if everything's good. Then click on the top left panel and click something, notice what happens in the inspector...
Thanks for any help.
Hi you have missed enclosing the selector within qoutes...
your jQuery
$(document).ready(function() {
//bind a listener to "click" event on links with class "markviewed"
$('a.ui-btn-present').click(function(event) {
$('ul.listlist').listview('refresh');
$(#pageone).remove(); //<-- selector should be within quotes
// get ids from clicked <a>
var id = $(this).attr('data-id');
$(this).attr({
"class" : "ui-btn ui-btn-icon-notext-ok ui-icon-check ui-btn-a"
});
After much more research I wasn't looking in the right direction: the problem was that the listview had to be refreshed. So I created a new function
<script>
function refreshlist() {
$('.listlist').listview("refresh");
$('#pageone').remove();
};
</script>
And then I added onclick= "refreshlist()"to all my links and now it works.
I have a page where a user creates an item to auction it. If he submits the item creation form, the browser automatically redirects him to the newly created page via the following line of php code:
header('Location: item.php?itemid='.$itemid);
I would like to display a notification right after the item creation (on the newly created page) saying that the item has been created. This is the (working) code I use to call the notifications:
<script type="text/javascript">
$(function(){
$container = $("#container").notify();
notifyItemCreation();
});
</script>
EDIT: I think people are misunderstanding the problem.
So my sellitem.php page contains a form to sell an item, if this is submitted it gets send to createitem.php, this is where I do the validation checks.
If everything is okay this is where I redirect to the newly created item.php?item='$itemid' page. I want on this (item.php?item='$itemid') page the notification to be displayed.
EDIT2: I do know how to create the item.php?itemid='$itemid' page, this gets done perfectly, it is the notification to appear that is the problem. I am using the notifications from http://www.erichynds.com/blog/a-jquery-ui-growl-ubuntu-notification-widget
Can the people who are downvoting also explain why they are.
You can use session variables. In the next request if a certain variable exists or indicates that the current item is new, you can echo the script tag and unset the variable.
You could just wrap the JS in a condition
<?php if(is_numeric($itemid)){ ?>
<script type="text/javascript">
$(function(){
$container = $("#container").notify();
notifyItemCreation();
});
</script>
<?php } ?>
You could use ISSET() as well
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.