Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
This isn't really a problem so much as a general question. I don't have much experience with javascript, and I wrote this a few months ago and now I can't remember why it works. I have the following code in a php file:
echo'<SCRIPT type="text/javascript" src="button_js.js"></SCRIPT>
<input type="text" placeholder="Enter Nickname" name="nickname" id="nickname" />
<br />
Submit Request |
Continue Searching';
Inside button_js.js, there is a submit_request function and a continue_searching function. When the user clicks the corresponding link, the appropriate function executes just like I want it to; everything works perfectly.
The problem is that I can't remember for the life of me why this works. How does it know to execute the correct function based on the user clicking on the link? I don't have an onClick in there anywhere. Is it just because the names of the functions match the id's of the links?
Thanks for your help!
Without seeing the code in your script, I can only guess... But it's very likely you are adding an event listener (sometimes incorrectly called an "event handler", which is different but related to your question).
In short, JavaScript has the ability to "grab" elements in your page and "listen" for events that might happen to them (such as click). Once that event happens, you trigger a function (or "handle" that event with an... "event handler").
If you're using jQuery, the concept is the same, however you may find that you're using jQuery's own event handling functions.
Providing the relevent JavaScript code would help others help you.
With that said, I will give you a general answer.
There is an event listener that fires when the user clicks. When the event fires, it gets value of the id attribute. Then, if the id attribute has a function name that corresponds to its value, the event then calls that function.
E.g., in JQuery (completely untested):
$("a").click(function(ev) {
var f = this[ev.target.id];
if (typeof f === 'function')
f(); // calls the function whose name corresponds to the id attribute
});
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
So currently I have a system that pulls data from an SQl database and displays the details in separate counts.
For Example, Total Tickets, Tickets with Support, Tickets with customer etc.
The only time this data get update is when the user reload the page or navigates to another part of the system.
I am looking to revamp the whole system to that the data is always valid instead of users needing to reload the page.
I have been looking into JQuery and AJAX however all the information I have been finding still requires user input.
So I would some advise or links on how to setup a system that requires no user input and instead pulls the data every X seconds and updates the page without refreshing it.
I also want to then be able to expand this functionality to display in-page alerts when new tickets are logged etc.
" all the information I have been finding still requires user input."
...not sure what you've been reading, but no, you can set a timeout or interval to make a fixed AJAX call on a regular schedule in order to fetch the latest data, all without user intervention.
Here's a demo. In this case it appends the same data from a static source every time, but if your source returns database data which is being updated in the background, then you might want to replace what's there already rather than appending. It's a small detail, but worth clarifying.
//when called, this will make an AJAX call and append data from the response to the "content" div
function getData() {
$.ajax({
method: "GET",
url: "https://api.myjson.com/bins/df42s",
dataType: "json"
}).done(function(response) {
$("#content").append("<br/>" + response.name);
});
}
//initial fetch of the data
getData();
//then set the same function to run at 5 second intervals:
var interval = setInterval(getData, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
Be careful not to set the interval to be too frequent, otherwise you might overload your server, and/or find that one AJAX call has not completed before the next one starts. Neither of these scenarios is very desirable.
More info about setInterval: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Okay my question is, how can I request from user when clicks on button to enter his email and receive message with link of my web page?
You cannot do this with just HTML or even with just HTML and javascript.
To send an email, you need to use a back-end script, which is usually PHP (on most shared hosting servers) or asp/.Net (on Microsoft web servers)
Javascript has been made much easier with the jQuery add-in. Here is a link to some free videos about how to use jQuery. Basically, jQuery cuts typing dramatically and makes javascript much easier. All you need to use jQuery is to include the jQuery library between script tags -- place that code just above the closing </body> tag.
Here is some example code using jQuery, just to show what it would look like. This example:
* asks user for email address (but does not validate what they enter)
* creates a form with an element named eml that contains what the user typed
* submits the form to a backend PHP file called sendcontact.php. It is up to you to also write sendcontact.php
$(document).ready(function(){
$('#mybutt').click(function(){
var em = prompt('Enter your email');
$('body').append('<form id="yrForm" action="sendcontact.php" method="post"><input name="eml" value="' +em+ '" ></form>');
$('#yrForm').submit();
});
}); //END document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="mybutt">Click Me</button>
Now, you need to have another back-end file, sendcontact.php that will receive the data sent via the form, and send an email. Here is an overview of how to do that:
http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/
(You can ignore the entire first part of the above tutorial that deals with creating the contact form. You only need to read about how to receive the information in PHP and send the email.)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a simple page that shows 4 different divs, all with a <h1> title (or other tag that shows text) and a form (with 1 input text) and a submit button... so far so good.
My answer is simple: I am looking for a way that:
when the user inserts a text and submit the form, the <h1> title shows the text that the user wrote
the form disappear (or takes style display:none)
this will take effect even if I refresh the page or view page in a different computer (probably need to save the data in a DB)
restart this process from the beginning (even if I need to code again).
This is for a mini game to provide to users 4 different choices and, if the user A select option 1, the <h1> will show text something like "User A was the first to choose this option. Please select a blank option" and, after the 1st raw over (point 4 described above), restart all forms.
NOTE: I am not asking in the way to "please do the code for me". I also searching for a way to store data in <php ?> - finding redbeanphp project.
I am also a newbie in SQL (just started to study SQLi last month to android development). My question is ONLY to looking for the best way to do this and what I need.
This would be the workflow:
When you click a button to submit the form JavaScript will send the form data to the server as an AJAX request and wait for a response from the server.
The PHP code on the server will read the data from the AJAX request and save it in a database and echo a success response along with the text to display.
Your JavaScript will receive this success message and hide form from the DOM and display the text in the header.
If you want the data to persist on the page on reload then you can save a flag in PHP session. Sessions persist in until you close browser window.
4.1 Use another AJAX call remove the flag from the session and reload the content.
So, if you are good with HTML and CSS you need:
JavaScript, AJAX, a JavaScript library to make things easier such as JQuery.
A server side language such as PHP.
A database to persist data. There are many choices. I am going to recommend MySQL just because there so many tutorials for it out there.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I currently have a PHP page called item.php that has a link on it "Add Item".
When a user clicks the link, it takes them to save.php, where the page does some stuff like saving the item to the database. On that page, there is a redirection after the saving code has run:
header("Location: item.php);
Now the item.php page says "Remove Item" for the link, as it should.
Here's the problem: if the user now hits the Back button on their browser, it shows them the item.php page again (which I don't want) and shows them the "Add Item" link again (which I also don't want).
How do I solve this issue so that there is only one item.php page in the browser history stack?
In you're not willing to use AJAX, I think the real question you mean to ask is "How can I refresh item.php when the back button is pressed?"
There are several ways to achieve this, here's one that's done using JavaScript/jQuery. Store a hidden <input> variable called "refresh" and submit it when the user clicks "Add Item":
<input type="hidden" id="refresh" value="no">
Now, you can use the following jQuery function:
$(document).ready(function(e) {
if ($("#refresh").val() == 'yes') { location.reload; } else { $('#refresh').val('yes'); }
});
Here's how this code works: The first time you load the page and call $(document).ready, the hidden input value is "no", which means the aforementioned function will set the value to "yes". Then, when the user hits the "back" button, the hidden field value will remain the same (it will still be yes), but $(document).ready would be called again. This time when it is called, it will reload the page.
Related reading: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript
A solution using PHP: How do I make Firefox reload page when back button is pressed?
Let me know if my explanation wasn't clear or if you have any questions. Hope this helps.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Suppose i have an array which contains 500 names and there mobile number...
Eg -
$ar=array("98738383839"=>"name1","4343243332233"=>"name2")
Now what i want to do is give a list of 4-5 people with radio button for the user to select 1... It can me starting 4-5 peoples from the array..
Now i want to give the a search box where they can start writing name and the list of 4-5 friends with radio button changes according to that only...
For example
I would recommend you look at angular as it is much easier than jQuery. I am currently doing a project in angular, and here is how I would approach it.
Go to: http://angularjs.org, then scroll down and look at example 3. The search is very powerful and easy to implement. Implement a simple type ahead in angular, which searches the array as user type.
For the boxes with radio button, it can be easily done in angular since it allows bidirectional data binding, which means if u change a value in JavaScript variable it would also change in HTML.
Basic introduction
For your text box include something like this in HTML. This will look for an array called itemLists (you will need to define as $scope.itemLists in your controller).
<input type="text" ng-model="searchRecord" placeholder="Enter to search..." typeahead="itemList.item_id as itemList.name for itemList in itemLists | filter:$viewValue">
Then you need a http request that looks something like the following. The PHP file will query mysql and return a set a results.
$http.get("someFile.php").success(function(response) {
if(response){# store results into itemLists array}
});
Then for the boxes, you create soemthing using CSS + or bootstrap either way, get it to look how you want it to look. Then for images, Email and radio button. Use ng-model just HTML input textbox in the html example code above.
<input type="radio" ng-model="radioButton1">
<input type="radio" ng-model="radioButton2">
...
ng-model is a bidirectional binding variable, you can access it both from HTML and JS. The value is instantly updated no matter where you change it.
Hope it helps, if you need more information the angular site is always a good place to start.