Single DIV refreshed - e.preventDefault(); - javascript

When a user search items in <div class="searchBar"> I want to POST the data to <div id="auto"> and get only <div id="auto"> refreshed rather than reloading the full page.
My problem is that when the Submit button is clicked, the entire page is loading. I need to be able to refresh only <div id="auto"> when the submit button is clicked. The main purpose is that I want to avoid <div class="menuList"> being reloaded every time Submit is clicked. Below is my code.
<div class="searchBar">
<form action="" method="post">
Furniture item:
<input type="text" name="val1" id="val1" value="<?=$_POST['val1']?>" />
<input type="submit" id="submit" value="Submit" name="submit" />
</form>
</div>
<div class="menuList">
List of Furniture:
<select id='myList' name="mList" onchange='document.getElementById("val1").value = this.value;'><option value="">Furniture Available</option>
</select>
</div>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
refresh();
});
function refresh(){
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
url: 'php/filep.php',
type: 'POST',
data: $('#submit').val,
success: function(data, status) {
$("#result").html(data)
}
});
$(".result").fadeOut("slow");
refresh();
});
}
</script>
</body>
filep.php
if( isset($_POST['submit']) ){
$resData = htmlentities('img/'.$_POST['val1']).'/';
}
if( isset($resData) ) {
$files = '*.*';
$fin = glob($resData.$files);
$counts = count($fin);
$imgs = array();
$div= '';
foreach ($imgs as $fin) {
$div .= '<div class="imgSlots">';
$div .= '<li><div class="imgSlotsInner"><input type="image" src="'.$fin.'"/><testDes>"'.basename($fin.$files).'"</testDes></div></li>';
$div .= '</div>';
}
echo $div;
}

yes you can refresh the single div only. what exactly you need to do is refresh the html of that div i.e. first delete the html of that div like
$('#auto').html('');
and then put you content again what you have fetched from the Ajax posting in that Div. like if you are going to refresh a Grid or table just write the inline HTML and fill all the data coming from ajaxpost. You may use .each method to make it in loop
Thanks

Related

Why can't I pass a value from <li> to a text field?

I am trying to create a search-as-you-type field and to pass those values into another text field on click. But when I click on the results nothing happens.
Here's part of the HTML
<!-- Main Input -->
<input type="text" id="search" autocomplete="off">
<input type="text" id="mytext">
<!-- Show Results -->
<h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4>
<ul id="results"></ul>
</div>
</body>
<script>
$(".myLi").click(function(){
$('#mytext').val($(this).text());
});
</script>
<script>
$(function () {
$('#results').on('click', function () {
var text = $('#text');
text.val();
});
});
</script>
</html>
Part of the PHP is here
$html = '';
$html .= '<li value="myLi" class="myLi">My element 1</li>';
You are not clicking li but ul.
hope this snippet will be useful
$('#results') .on('click','.myLi',function(){
$('#text').val($(this).text());
})

Simple ajax post not working

I am an AJAX noob. I was writing code to understand it, but no matter what I couldn't make it work. Textarea in the code should update comment_area of comment of id=218 when user pressed "save" button. There is probably a mistake in my AJAX code which I couldn't find.
My AJAX script:
<script type="text/javascript">
$(document).ready(function() {
$("#save").submit(function() {
var text = $('#breaking_news_text').val();
var id = 218,
$.ajax({
type: "POST",
url: "update.php",
data: {comment_area:text , id:id}
success: function() {
alert("sucess");
}
});
});
});
</script>
<div id="b_news">
<form method="post" action="">
<div>
<div>
<textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50" placeholder="Add text here..." required></textarea>
</div>
</div>
<div>
<input type="button" id="save" value="Save Changes"/>
</div>
</form>
</div>
My update.php file
<?php
include("./inc/connect.inc.php");
if(isset($_POST['comment_area']))
{
$update = mysqli_real_escape_string($mysqli, $_POST['comment_area']);
$sql = "update comments set comment_area='$update' Where id='".$_POST['id']."'";
$result = mysqli_query($mysqli, $sql);
}
?>
The submit works on a form and you have it on the input element.
Try:
$("#b_news form").submit(function(evt) {
evt.preventDefault(); //this is required to stop the default form submission
Documentation can be found here
Also, if these dom elements are dynamically loaded, you might want to read up on event delegation

jquery - hide not working

By clicking on "empty cart?", I am unsetting the cart array which is working fine. Now I wanted another form to be hidden if this "empty cart" button is clicked.
html:
<form id="f1" action="checkout.php" method="post">
<input name="cust_login" type="submit" value="Continue" />
</form>
<br>
<button>empty cart?</button>
javascript:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#f1").hide();
});
});
</script>
php code for unsetting array:
if (isset($_GET['cmd']) && $_GET['cmd'] == "emptycart") {
unset($_SESSION["cart_array"]);
But hide is not working here.
My question is, can we use button and link together as I have written ? If not, then how to implement it?
Try to use this:
$(document).ready(function(){
var cmd = '<?php echo $_GET["cmd"] ;?>' ;
if(cmd == "emptycart")
{
$("#f1").hide();
}
});
You can try
$(document).ready(function(){
$("button").click(function(){
$("#f1").attr('style','display: block !important')
});
});
or to add a class to style file that do the same and then just add this class when clicking on the button.
<form id="f1"
action="checkout.php"
style="<?= (isset($_SESSION['cart_array']) && count($_SESSION['cart_array']))? "display:none;": ""; ?>"
method="post">
<input name="cust_login" type="submit" value="Continue" />
</form>
<br>
<button>empty cart?</button>
On rendering form - check if cart is empty - render it on hidden state
But in this case your js code had no sense. So you can add
<script>
$(document).ready(function(){
$(document).on('click', "a[href='cart.php?cmd=emptycart']", function(ev){
ev.preventDefault();
$.get($(this).attr('href', function() {
$("#f1").hide();
});
});
});
</script>
Istead of your js code - this one prevent page reload ( which happens when you click on link ) and send request via AJAX
You can try this solution
HTML
<form id="f1" action="checkout.php" method="post">
<input name="cust_login" type="submit" value="Continue" />
</form>
<br>
<button>empty cart?</button>
JS
$(document).ready(function(){
$("button").click(function(){
//$("#f1").hide();
window.location.href = "cart.php?cmd=emptycart";
});
});

Reload a single DIV on a page using onClick

In my page there are several DIVs, which are supposed to show different news items depending on the user selection and a press of a submit button.
Am I able to refresh only a single DIV when the relevant submit button is clicked?
I tried <input type ="button"> instead of <input type="submit"> but that didn't work as expected. My code is below:
<div class="dloader"></div>
<div class="search">
<form action="" method="post">
Furniture:
<input type="text" name="val1" id="val1" value="<?=$_POST['val1']?>" />
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<?php
if( isset($_POST['submit']) ){
$postItemHeader = htmlentities($_POST['val1']);
}?>
<script>
$(window).load(function() {
$(".dloader").fadeOut("slow");
})
</script>
Take One Button For Post Event
<input type="submit" id="add" name="add" />
If You want to pass the Text Data, so a text value from the Text to fetch the particular data
<div id="result">Result should appear here</div>
Use Javascript To POst The Text Data To Back End
$(document.ready(function() {
$("#add").click(function(e) {
e.preventDefault();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#add').val,
success: function(data, status) {
$("#result").html(data)
}
});
});
});
What you need is AJAX. (read the documentation). A simple example is here.
The HTML
<div id="target_div"></div> <!-- Here is where you gonna place your new content -->
<input type='button' id='trigger' onClick="get_new_data()" value="Get new Content"> <!-- When this button is pressed get new content -->
The Javascript
function get_new_data()
{
$.ajax(
{
type: POST,
url: "you-url-here.php",
dataType:"HTML", // May be HTML or JSON as your wish
success: function(data)
{
$('div#target_div').html(data) // The server's response is now placed inside your target div
},
error: function()
{
alert("Failed to get data.");
}
}); // Ajax close
return false; // So the button click does not refresh the page
} // Function end

Convert a DIV to textarea with specific "name" attribute

I have a small admin panel that I have created to do simple database tasks for my DayZ server. Now I want to make a simple editor for the news blurb on my website. The news blurb is stored in a table on my database. What I want is when the page loads it simply echo's the data and looks like it does on the live site. Then, when I click on it, I want it to convert into:
<textarea name="edit><?php echo news; ?></textarea>
This is my current code:
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea name="edit" />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
$(document).ready(function() {
$("#editable").click(divClicked);
});
<form method="post" action="newsedit.php">
<div id="editable"><?php echo $news; ?></div>
<input type="submit" value="Edit News" />
</form>
Now, this does work in the sense that when I click on the text it does convert into a textarea. The problem is that it doesn't give it the "edit" name so when I hit the sumbit button, it is as if I submitted nothing and it deletes all the data out of the table because
<textarea name="edit"></textarea>
is technically empty. Are there any ways to make it so when I click on the text it will convert the code to textarea with that specific name so there is actual data when I hit submit?
Change the form to:
<form method="post" action="newsedit.php">
<div id="<?php echo $newsID;?>"><?php echo nl2br($news); ?></div>
<input type="submit" value="Edit News" />
</form>
Where $newsID is returned along with the $news text.
The nl2br($news) will just make sure the line breaks are honored.
var editableText = $("<textarea name='edit' />");
http://jsfiddle.net/H5aM4/ inspect the textarea
TRY This
$("#editable").click( function(){
$(this).replaceWith(function() {
return $("<textarea name='edit'>").text(this.innerHTML);
});
});
Here is the working example

Categories