How put a div editable and save after in same page? [closed] - javascript

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
I have a login form and when I login with admin account I want to put Home page editable. Home page have DIVs.
$sql = mysql_query("SELECT * FROM `test` WHERE `username` = '$username' AND `password` = '$password'");
if (mysql_num_rows($sql) > 0)
{
echo ("<SCRIPT LANGUAGE='JavaScript'>
window.alert('Welcome!')
window.location.href='Home.html'
</SCRIPT>");
}
Ok this code is working and I can login successfully but now I want to open Home page but editable and save online.

Too much to cover in one question ... you should read a little further about the subject since there are several ways to do it.
One thing is how you will edit the content ... you can use html5 content editable or some more elaborated solution like a WYSIWYG Editor (what you see is what you get) like CKeditor ... google about it and you will find lots of editors.
Another thing is how you will send the data to the server ... you can use a simple form, ajax, sockets ... as you see it is also a complex thing, but you can start with a jquery load since it's very simple to implement.
Lastly, how you will save the data ... I'm guessing you will use your SQL DB. How you will handle the data in the server is another deep subject. Worry about caching results and queries from the beginning will save you from a lot of trouble later.
Hope this info will help you start building your solution!

You can use the HTML5 attribute contentEditable which is supported by all modern browsers.
<div id="editme">
xyz
xyz
xyz
</div>
<?php
if(is_admin())
{
?>
<div id="edit"></div>
<div id="save"></div>
<script>
$(function(ev){
ev.preventDefault();
$("#edit").on('click', function(){
$("#editme").prop('contentEditable', TRUE);
});
$("#save").on('click', function(){
var url = "insert.php";
var data = $("#editme").html();
$.post(url, data);
});
})
</script>
<?php } ?>

Related

How can I use AJAX to stop page from refreshing when passing parameters in url [closed]

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
Long time lurker here.
DISCLAIMER:
First of all-, sorry in advance for asking what's probably a duplicate question in this forum. Since I have no experience with ajax I need to be specific about what I'm trying to achieve.
CONTEXT:
I'm working on a social site for me and my friends to use, and I'm in the process of making a simple personal message system. I'm therefore passing parameters in the url by clicking anchors in order to sort out what messages are being displayed to the user etc.
The page itself is called messages.php and it looks like this:
[messages.php][1]
As you can see in the picture above, I have a block link called "9 meldinger til" (which translates "9 more messages") at the bottom of the message list. This button counts the remaining PMs for each user and adds two parameters to the url when clicked: ?view=inbox&show_all.
<a href='?view=inbox&show_all' class='small'>" . $remaining . "</a>
These parameters are fetched using $_GET in php:
$view = $_GET['view'];
$show_all = $_GET['show_all'];
When I scroll down on messages.php and click "9 meldinger til", the page (obviously) refreshes and jumps back to the top, now having added the parameters to the url.
WHAT I NEED HELP WITH:
How do I use ajax to stop the page from refreshing after having clicked the anchor? (So that the page doesn't jump around while navigating messages)
And-, how do I implement it on my page? What would an example code look like?
To do this you would need to use AJAX.
$('.small').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href');
var hrefSplit = href.split('?view=');
var viewSplit = hrefSplit[0].split('&');
var view = viewSplit[0]
$.ajax({
url: '/messages.php?view=' + view + '&show_all',
success: function(result) {
result = $(result).find('#messageList');
$('#messageList').html(result);
}
});
});
Something similar to this should work for you but will probably need some tweaking and there's probably a more efficient way to get the value of the view query.
What this will do is, using the event, it will prevent the anchors default action from taking place. Then we get the href from the link that was click, and use that to get the view query. With this we then ajax to the page with that query in the url, and take the #messageList HTML contents from what renders, and then back on the page, we change the current #messageList HTML to the new #messageList HTML
To make the split more straight forward you could use:
<a href='?view=inbox&show_all' data-view="inbox" class='small'>" . $remaining . "</a>
Then all you would need is:
var view = $(this).data('view');
Rather than using var href, var hrefSplit, var viewSplit.

Input text from html to javascript [closed]

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 7 years ago.
Improve this question
I don't understand how to make and use forms. Can someone give me and example using external java script where there is an input text and a submit button and when it gets click it does a java script function. I also have some questions. If i'm not using a form to change pages do i need a method. What do i put for the action attribute. Are forms the best way to get input text data to java script. And why should i use a form and not just input tags.
Thanks.
No, you don't need a form to collect user input form fields.
Here is a really simple friendly example using MagJS:
HTML:
<div id="hello">
<label>Name:</label>
<input name="hello" placeholder="Enter a name here" />
<hr/>
<h1>Hello <name/></h1>
</div>
JS:
mag.module("hello", {
view: function(state) {
state.input = {
_oninput: function() {
state.name = this.value
}
}
}
})
Here is a link to the working example: http://jsbin.com/fivaqoliqe/1/edit?html,js,output
Hope that helps!
The short of it is that W3Schools lets you play around but they are scarce on explanation so I suggest you check out this resource instead (which also has a demo of a form): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
The action attribute is where it should go after it is done to further process the form (typically a route or backend server is where you will go after). Given what you have been talking about however, you only have one field and one button, so you should look into the onclick attribute and then look up the input field and read the value. You use a form when you have a lot of inputs that are related and should be sent at once. There's a lot out there though as this is very basic but if you have any questions just ask.

How to click a button 'not submit' automatically on load depending on a result from PHP [closed]

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 7 years ago.
Improve this question
,I'm working on a website as a developer using PHP ,
what I have now is a pop up review form , which appears when the user press a button,
the problem is I'm validating it using PHP and when you press on the submit the validation occurs server side as you know and when it loads the page again you will find the form is gone , and you have to press that button again to see the result of the validation
like: "please enter a valid email..",
is there any way I could press that button automatically if isset($_POST) or something similar ?
I can provide the website link if it is allowed , just tell me if you need it.
thanks in advance
You could have something like
<?php if (isset($_POST)...){ ?>
<script>
// here you could call the Javascript function which is called when the button is clicked
function onLoad() {
yourFunction();
}
</script>
<?php } ?>
<body onload="onLoad()">
...
As War10ck pointed out in the comments, if you're going to use this approach, you should also wrap the body onload="onLoad()" tag within the if statement so that if the pop up should not show, and because of that the onLoad function is not included in the HTML, you won't get an undefined function error in Javascript.
Another solution would be to not hide the form in the first place i.e something like this:
<?php
$class = "hidden";
if (isset($_POST)...) {
$class = ""; // make the form not hidden if $_POST...
}
?>
<div id="form" class="<?php echo $class; ?>"> ...
where
.hidden {
display:none;
}

Autocomplete users lastname in PHP form selection field [closed]

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
I have tried to search for an answer, but I don't know the exact terms to use.
I'm sorry if this has been asked (a lot) before.
I have an HTML/PHP form where the user needs to enter a client name via dropdown field.
What I want to do with this field is limit the selection while the user is typing. Say I want to input the name John Smith, wich is shown as "Smith, john", I want the user to be able to start typing the last name and the form 'automatically' select the name closest to what has been typed already.
So in this example I would type in "Smit" and the dropdown list is limited to all names that start with 'Smit'.
I know HTML and PHP, but Java/jQuery/AJAX/etc are new for me and I really don't know where/how to start ;-)
Can anyone point me in the right direction?
Edit:
I have tried the javascript autocomplete function. The examples given seem to work quite well, although it now presents an ugly list of words that match.
What I'm still not sure about is how to get a PHP array in there. I have tried to do what void suggests, but to no avail. Here's the code I have now:
<script>
var client= $.parseJSON('<?php echo json_encode($clname); ?>);
$(function(){
$( "#tags" ).autocomplete({
source: client
});
});
</script>
Where $clname is an array of 'lastname, firstname' entries from my client table.
Use autocomplete provided by jQuery UI
I am assuming you have an Array of names in PHP then you can do it this way
<script>
var username= $.parseJSON('<?php echo json_encode($username); ?>'); // Convert PHP Array to JS Array
// DOM Ready
$(function() {
$( "#tags" ).autocomplete({
source: username
});
});
</script>
Or you can also make an AJAX call to fetch array from PHP.
Dont forget to include jquery-ui.js

How to submit a form using PHP? [closed]

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 9 years ago.
Improve this question
I have a simple HTML form on my site. I submit my form using a button. The button is a PNG, not a regular submit button, so until now, I have been using onClick="document.getElementById("myFormId").submit();" as an HTML property for my Submit-Image.
Now, I want to capture the values of 2 fields (Username and Password), so I decided to use sessions.
So I used this code before my HTML tags:
<?php
session_start();
$_SESSION["username_field"] = $username;
?>
But that stores the variable when the page loads, which will make $username = nothing.
Bottom Line: I need to store this $_SESSION variable when the form submits. (And I would prefer to use $_SESSION, rather than others.)
Please tell me how to $_SESSION["user"] = $userfield; when the Image is clicked. Thank You.
You just have to check if the value is set:
<?php
session_start();
if (isset($_POST['username'])) {
$_SESSION["username_field"] = $_POST['username'];
}
?>
If your form method is method="GET", you have to replace the $_POST to $_GET.
Forms either submit with method="get" or method="post" and then you access that data on the next page load with $_GET and $_POST respectively.
Look up some elementary tutorials: http://www.w3schools.com/php/php_forms.asp

Categories