I'm really new here. Hopefully this title makes sense.
My problem is: after I clicked either good.png or bad.png as a button, the js works well, but after I click the OK in the alert window, the image will disappear. It will show up again after I refreshed the page.
Here is real page for code: http://bit.ly/1iUjnlW
How could I fix this? Thank you very much !
(sorry for my bad language)
This is part of my code:
=========js function========
<script type="text/javascript">
$(function() {
$(".rate").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up'){
//$(this).fadeIn(200);
$.ajax({
type: "POST",
url: "../data/rate_up.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
else
{
//$(this).fadeIn(200);
$.ajax({
type: "POST",
url: "../data/rate_down.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
return false;
});
});
</script>
========img buttons in a table===========
<p class="p1">
<fieldset>
<legend>Sighting Detail</legend>
<div id="scroll_detail" style="overflow-y:auto; height:600px;">
<table>
<td>Rate this sighting: </td>
<td>
<div class="box">
<img src="../images/rating/good.png"><?php echo $up; ?>
</div>
<div class="box">
<img src="../images/rating/bad.png"><?php echo $down; ?>
</div>
</td>
</tr>
</table>
</div>
</fieldset>
</p>
</div>
</div>
<!-- Above is the website main files -->
<?php include ('../footer.php');
You are replacing your anchor tag's (which holds yiur image) inner html with html from AJAX response
parent.html(html);
try to alert the html returned from your AJAX before you replace the content and see what it contains
try appending the html returned
parent.append(html);
Related
I have text area where I need to load image to <img> tag. Then, I want to post content of text area to generate_pdf.php to generate pdf. I have encauntered URI Too Largeerror when I post text area content by $.ajax({}).
Method 1-$.ajax({}) in $().on("click",function(){}) of submit button
<?php
//image from sql
$image =$array_image[0]['file'];
$encode_img ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready(function()
{
let hd = document.createElement('div'); // Create new DIV
hd.style.display = "none"; // Hide new DIV
hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
document.body.prepend(hd); // Add to body
document.querySelector('#test').src = <?php echo $encode_img;?>;
document.querySelector('#ta').value = hd.innerHTML;
content =$('#ta').val();
$('#test').src = <?php echo $encode_img;?>;
//submitted uri too large
//-(<form id="text_editor" name="text_editor" >)
$('#pdf').on("click",function()
{
$.ajax({
type:"POST",
url :"generate_pdf.php",
data:{
'pdf ' :content,
}
,
success:function(data)
{
alert('successfully posted!');
$('#content').html(data);
}
});
})
})
</script>
</head>
<body>
<form id="test_img" name="test_img" >
<textarea id="ta" name="ta">
<img alt="test" id="test">
</textarea>
<input type="submit" value="Submit" name="pdf" id="pdf">
</form>
<div id="content" name="content"></div>
</body>
</html>
Then , I tried using $.post in $().submit(function(event){}). This able to submit without this error.
Method 2-$.post in $().submit(function(event){}) of form
<?php
//image from sql
$image =$array_image[0]['file'];
$encode_img ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready(function()
{
let hd = document.createElement('div'); // Create new DIV
hd.style.display = "none"; // Hide new DIV
hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
document.body.prepend(hd); // Add to body
document.querySelector('#test').src = <?php echo $encode_img;?>;
document.querySelector('#ta').value = hd.innerHTML;
content =$('#ta').val();
$("#test_img").submit(function(event)
{
event.preventDefault();
var $form = $( this ),
url = $form.attr( 'action' );
var posting = $.post( url, { pdf:content} );
posting.done(function( data )
{
$('#content').html(data);
});
})
})
</script>
</head>
<body>
<form id="test_img" name="test_img" method="POST" action="generate_pdf.php" >
<textarea id="ta" name="ta">
<img alt="test" id="test">
</textarea>
<input type="submit" value="Submit" name="pdf" id="pdf">
</form>
<div id="content" name="content"></div>
</body>
</html>
$.post is a shorthand for $.ajax.But, why method 2 able to submit successfully and first method could not? In method 1, content of data that we posting included in url. But, in second method, not included. Thanks in advance.
Adding preventDefault() method in $('#pdf').on("click",function() {}) had solve error URI Too Large.
The preventDefault() method stops the default action of a selected element from happening by a user. This method does not accept any parameter and works in two ways:
It prevents a link from following the URL so that the browser can't go another page.
It prevents a submit button from submitting a form.
Code:
$('#pdf').on("click",function(e)
{
e.preventDefault();
$.ajax({
type:"POST",
url :"index_debug_uritoolarge_2.php",
data:{
pdf :$('#ta').val(),
},
success: function(data)
{
alert('successfully posted!');
$('#content').html(data);
}
});
})
Reference: post_textarea_content_in_ajax
I have spent the better half of a day looking for an answer to this problem, I can just not wrap my head around it. I have an Index.php that requires the head element.
Head element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="requires/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="requires/scripts.js"></script>
<title>Frontends</title>
</head>
<body>
<div class="grid-container">
<div class='header' style="background-color: #0059B3;">
<a href='index.php'>
<img src="assets/hhe logo.PNG"/>
</a>
</div>
This is required into the index.php file, this file looks like so:
<?php
require_once 'requires/head.html';
require 'requires/connect.php';
$string = "";
?>
<script type="text/javascript">
</script>
<div class='content' style='border-radius: 4px;'>
<div class="formcentre">
<input class="searchform" type="text" id="search" placeholder="Søger så snart du skriver." onkeyup="submitter();" autocomplete="off"/>
</div>
<div class='menu' style=' margin-top:10px;'>
<dl>
<dt>Tilføj</dt>
<dd>
<a href='opret.php'>Artikel</a><br>
Enhed<br>
Kategori<br>
</dd>
<dt>Slet</dt>
<dd>
Enhed<br>
Kategori
</dd>
</dl>
</div>
<table id="results">
</table>
⌃
</div>
</div>
<script type="text/javascript" src="requires/scripts.js"></script>
</body><!--Is opened in the reuired head.html-->
</html><!--Is opened in the reuired head.html-->
There is ofcourse a scripts.js file that looks like this:
function goBack() {
window.history.back();
}
function submitter() {
var search = document.getElementById("search").value;
/*AJAX the searchstring*/
$.ajax({
type: 'post',
url: 'ajax/searcher.php',
data: { searchString : search },
success: function(response){
$('#results').html(response);
}
});
return false;
}
$(document).ready(
function submitter() {
var search = document.getElementById("search").value;
/*AJAX the searchstring*/
$.ajax({
type: 'post',
url: 'ajax/searcher.php',
data: { searchString : search },
success: function(response){
$('#results').html(response);
}
});
return false;
}
function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 20) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
This all fine and well, I suffer from the problem that I get this specific error when i try to search for anything:
Uncaught ReferenceError: submitter is not defined at HTMLInputElement.onkeyup (index.php:27)
So the question is: should I not be able to do it this way?
Edit:
I would like to add that, apparently the browser may cache a JS file. So, yeah clear the cache. that's what actually did the trick including point number four on the marked solution. Thank you very much for the help.
Please, let's do two things:
Do not mix JavaScript and jQuery (although both are JavaScripts).
Use unobtrusive code.
These are the changes I have done:
Remove the onkeyup from the element:
<input class="searchform" type="text" id="search" placeholder="Søger så snart du skriver." autocomplete="off"/>
Add the event listener using the document's ready event:
$(function () {
$("#search").keyup(function () {
submitter();
});
});
Still better, you can do it this way:
$(function () {
$("#search").keyup(submitter);
});
Thanks to Chris G.
Use a single way:
function submitter() {
$.ajax({
type: 'post',
url: 'ajax/searcher.php',
data: {
searchString: $("#search").val()
},
success: function(response) {
$('#results').html(response);
}
});
return false;
}
Remove the duplicate occurrences of submitter() function definition. Just have only one inside the document's ready event.
Below is the script works fine with hover but need it to be either a toggle or a click function if anyone has any ideas on how to achieve this.
it collects data from different php files depending on the button that is hoverd over thats fine but when working on the page it pops up all the time kind of annoying
<script type="text/javascript">
$(document).ready(function(){
$(".container").hide();
$(['btn1', 'btn2', 'btn3']).each(function(){
var btn = this;
var con = $("#"+btn).children('.container');
$("#"+btn).hover(
function(){
$(".hover").mouseout();
$(this).addClass('hover');
var cache = $(con).children('p');
//check to see if content was loaded previously
if(cache.size()){
con.show();
}else{
$(con).show();
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'data/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
},
//mouseout
function(){
if($.browser.msie){
$(con).hide();
}else{
$(con).fadeOut(250);
}
$(this).removeClass('hover');
}
);
});
});
</script>
<div id="btn1" class="wrapper">
<div class="button">
<p><i class="fa fa-users" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
<div id="btn2" class="wrapper">
<div class="button">
<p><i class="fa fa-comments" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
Thanks guys i figured out how to do this and also make the coding less.
so what it does is you create the dropdown button with the btn1 id
and the next button with id of btn2.
the parsing php files called btn1.php you code what you need to display the data in the content div of the buttons
Aaaargh sorry seems like only the first button works shows the conent div and closes when clicked but subsequent new buttons show the content div Ajax requests are all fine
but dont close when clicked again
<script>
$(".wrapper").click( function()
{
var btn = $(this).attr('id');
var conte = $('.content').css('display');
var con = $(this).children('.content');
if (conte == 'block') {
$(con).css('display','none');
} else if (conte == 'none') {
$(con).css('display','block');
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'configuration/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
});
</script>
Got blocked.
Created a php page with normal html, css, js and php.
Inside of that file, wanted for the user to be able to see events accordingly to the selected date.
In order to do that, once the date was selected, the value associated that date would get posted into a php script.
Inside of that php script, the posted variable was going through some conditions and echoing the results.
Then, the result of this php script, would be displayed in the initial php page.
Ok, so far so good.
Thing is,
Want the text to appear styled, which means, want it to allow styling classes.
Did some research but can't seem to find any problem like that.
When you go to the page and write, for example, the following in input: 12/22/2016, you can see data being displayed. Problem is, it doesn't come anywhere close to styled.
This makes sense, somehow, because the php script doesn't have mentioned anywhere to use those styles.
The styles are being used in the initial php page (html/css/js/php), where the results will be displayed.
Initially I thought the style in the results would be recognized because it is called in the exact same page where those style files are mentioned.
What am I doing wrong?
This it the result of the php script:
<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>
As you can see, it has the class called inside of the h1
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The CSS:
.hero-content > h1.hero-header-otro {
font-size: 4rem;
margin-bottom: 20px;
font-weight: bold;
color: #ffffff;
}
Try using datatype html in ajax request:
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
Got it fixed. This it the result of the php script:
<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">2016-12-22 00:00:00</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">2016-12-22 00:00:00</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">dfgdfgdfg</h2>
<p>Organized by <span class="event-list-organizer">yyyyyyy</span></p>
<p class="event-list-description"><p>dffghfghgfhf</p></p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The PHP:
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">'.$row['Start_Date'].'</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">'.$row['End_Date'].'</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">'.$row['Event_Name'].'</h2>
<p>Organized by <span class="event-list-organizer">'.$row['Company_Name'].'</span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }
<div id="divId_graph" ></div>
<div class="graph" id="graph" style="margin-top:-15px"></div>
controller.js:
$('#graph').svg({ onLoad:drawIntro});
The drawIntro is a function which calculate values.It's not calling when I recall the function with in same page by change some input values.
$.ajax({
type: "GET",
url: "/templates/ch_div_content.html?loadPortion=graph",
data: "partnerSelect="+$rootScope.partnerSelect,
success: function(msg){
if (box1) box1.remove();
$("#divId_graph").html(msg);
}
});
the the ch-div-content.html is the part i want to reload and it is as follows
<?php if ($loadPortion == 'graph'){ ?>
<script language="javascript">
if($( ".graph" )[1]!==undefined){
$( ".graph" )[1].remove();
}
</script>
<div class="graph" id="graph" style="margin-top:25px">
</div>