I kindly request that you help me identify the reason in the code why my app keeps refreshing endlessly. This does not allow me to navigate to other pages, Iam a learner in php and I suspect this could be the issue, help. Could it be a problem with the php arrangement?
Here is the code in index.php
<script type="text/javascript">
$(document).ready(function() {
$('#premium_b').click(function(e) {
e.preventDefault();
$('#tabs').tabs( "select" , 4 );
});
$('#tabs').bind('tabsselect', function(event, ui) {
if (ui.index == 4 )
$('#premium_b').css ('display', 'none');
else
$('#premium_b').css ('display', 'block');
});
});
</script>
<div id="bloc_134" class="li_bloc"><ul class="menu"><li>Home
</li>
<li>Config
</li>
<li>Customize
</li>
<li>Export
</li>
<li>Premium
</li>
<li>Statistics
</li>
<li>Doc
</li>
<li>About
</li>
<li>Other Apps
</li>
<li>FAQ
</li>
</ul>
Upgrade to Premium to get white branding and help us improve your favourite apps! : Click her
<div class="clear"></div>
</div>
</div>
<div id="alerts">
</div>
<div id="zone2" class="li_zone li_x1 li_y2">
<div id="contact_form_about"><div class="zone2">
</div></div>
<div id="contact_form_config"><div class="zone2"><script type="text/javascript">
function refreshApp (url) {
$.get(url, function(data) {
$('*').html(data);
});
}
$(document).ready(function() {
var options = {
success: showResponse,
beforeSubmit: disableButton
};
$('#tab_info_form_0').ajaxForm(options);
});
function addToPage() {
var obj = {
method: 'pagetab',
redirect_uri: 'https://apps.facebook.com/mtkenya-dev/?page_id=#contact_form_config',
};
FB.ui(obj);
}
</script>
<script>top.location.href='https://www.facebook.com/dialog/oauth?client_id=461688580525581&redirect_uri=https%3A%2F%2Fapps.facebook.com%2Fmtkenya-dev%2F%3Ftab%3Dcontact_form_config&scope=email,manage_pages'</script></div>
<div class="zone2"><script type="text/javascript">
$(document).ready(function() {
var options = {
success: showResponse,
beforeSubmit: disableButton
};
$('#contact_form').ajaxForm(options);
$('#customize_css').ajaxForm(options);
});
</script>
<div id="bloc_133" class="li_bloc"><p>Page non trouv?e</p>
</div>
</div>
</div>
<div id="contact_form_css"><div class="zone2"><script type="text/javascript">
function refreshApp (url) {
$.get(url, function(data) {
$('*').html(data);
});
}
$(document).ready(function() {
var options = {
success: showResponse,
beforeSubmit: disableButton
};
$('#tab_info_form_0').ajaxForm(options);
});
function addToPage() {
var obj = {
method: 'pagetab',
redirect_uri: 'https://apps.facebook.com/mtkenya-dev/?page_id=#contact_form_css',
};
FB.ui(obj);
}
</script>
<script>top.location.href='https://www.facebook.com/dialog/oauth?client_id=461688580525581&redirect_uri=https%3A%2F%2Fapps.facebook.com%2Fmtkenya-dev%2F%3Ftab%3Dcontact_form_css&scope=email,manage_pages'</script></div>
</div>
<div id="contact_form_doc"><div class="zone2"><script type="text/javascript">
$(function() {
$("#bloc_223").tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html( "Couldn't load this tab. We'll try to fix this as soon as possible. ");
}
},
cache: true
});
});
</script>
</div>
</div>
<div id="contact_form_export"><div class="zone2"><script type="text/javascript">
function refreshApp (url) {
$.get(url, function(data) {
$('*').html(data);
});
}
$(document).ready(function() {
var options = {
success: showResponse,
beforeSubmit: disableButton
};
$('#tab_info_form_0').ajaxForm(options);
});
function addToPage() {
var obj = {
method: 'pagetab',
redirect_uri: 'https://apps.facebook.com/mtkenya-dev/?page_id=#contact_form_export',
};
FB.ui(obj);
}
</script>
<script>top.location.href='https://www.facebook.com/dialog/oauth?client_id=461688580525581&redirect_uri=https%3A%2F%2Fapps.facebook.com%2Fmtkenya-dev%2F%3Ftab%3Dcontact_form_export&scope=email,manage_pages'</script></div>
<div id="footer" class="li_zone li_x1 li_y4"> </div>
</div>
</body>
</html>
Well, I see 3 times:
top.location.href=....
without any condition and not in a function call. That would certainly keep your page jumping.
Related
I'm using laravel5.5 Ajax paging. I am the HTML part assembled in the controller. When I clicked on page second, I jumped to this method. How to make the compiled HTML code continue to display on the page?
After clicking on the second page, a string of JSON data is returned. This is a problem. How can we make the data on the second page continue to display in the original page?
PHP
//Screen video, playback volume and key points.
public function accept(Request $ request){
$id=$_GET['id'];
$summer=$_GET['key'];
$name=DB::table('vd_category')->where('address',$summer)->value('name');
if($id=='1'){
$video=DB::table('vd_video_'.$summer)->orderBy('state','desc')->paginate(25);
}else if($id=='2'){
$video=DB::table('vd_video_'.$summer)->orderBy('thumbs','desc')-
>paginate(25);
}
$data='';
foreach($video as $list){
$data.='<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0
5px;"><div class="movie-item">';
$data.="<a style='position:relative;display:block;' title='$list-
>video_name' target='_blank' href='details?id=$list->id&key =$summer'>";
$data.="<img alt='$list->video_name' title='$list->video_name'
src=\"uploads/$list->image_address\" height=\"230px\" width='100%'>";
$data.="<button class='bdtag'></button>";
$data.="</a>";
$data.="<div class=\"meta\"><div
style=\"width:100%;overflow:hidden;height:20px;\">";
$data.="<a href='/details?id='$list->id'&key='$summer'
target='_blank' title='$list->video_name' class=\"movie-name\">$list-
>video_name</a>";
$data.="<span class=\"otherinfo\"> 5.0分</span></div><div
class=\"otherinfo\">类型:$name</div></div></div></div>";
}
$datav['1']=$data;
$datav['2']="<div>"."{$video->appends(['id' =>
$id,'key'=>$summer,'name'=>'page'])->links()}"."</div>";
return json_encode($datav);
}
HTML
<div id="data">
#foreach($video as $list)
<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0 5px;">
<div class="movie-item">
<a style="position:relative;display:block;" title="{{$list-
>video_name}}" target="_blank" href="/details?id={{$list->id}}&key=
{{$status}}">
<img alt="{{$list->video_name}}" title="{{$list-
>video_name}}" src="{{asset('uploads')}}/{{$list->image_address}}"
height="230"
width="100%">
<button class="bdtag"></button>
</a>
<div class="meta">
<div style="width:100%;overflow:hidden;height:20px;"><a
href="/details?id={{$list->id}}&key={{$status}}" target="_blank" title="
{{$list-
>video_name}}" class="movie-name">{{$list->video_name}}</a><span
class="otherinfo"> 5.0分</span></div>
<div class="otherinfo">类型:{{$namme}}</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<div id="datav" style="background:#FFF;padding-left:15px;">
{{$video->appends(['id' => $page,'name'=>'page'])->links()}}
</div>
JavaScript
<select name="" required id="where_id" style="float: right;padding-
left:10px;border-left:8px;width: 90px;height: 30px;">
<option value="">Click screening</option>
<option value="1">Sort by play volume</option>
<option value="2">Ranking by points</option>
</select>
<input type="hidden" id="summer" value="{{$status}}">
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
}
});
});
</script>
It has been solved.js has been modified.
That is, the parameters carried by the URL through the Ajax request to the
back-end again, and then the back-end returned JSON data inserted into the
specified location again, probably this is the solution, my English is not
very good, please forgive me.
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
fun();
});
function fun() {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
});
}
function pagedata(){
$(".page-item a").click(function (){
var href=this.href;
this.href="javascript:void(0);";
var id=getQueryVariable('page',href);
var key=getQueryVariable('key',href);
var page=getQueryVariable('page',href);
$.ajax({
type: "get",
url: "accept",
dataType: 'json',
data: {id: id, key: key,page:page},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
})
})
}
// Intercept the parameter values carried by URL, such as page parameters
//and some custom parameters.
function getQueryVariable(name,url) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var data=url.slice(url.indexOf('?'));
var r =data.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
</script>
I've bought the "Sonorama" website template and there is ajax function for opening window with news.
But I need to take the news content dynamically from MySQL, so I have to open a .php file. But it works only for .html files.
Could someone please help me what should I edit to make this working?
Thanks!
HTML:
<li id="news?id=1" class="last-news"> <!-- Type One Thumb on Top, PHP, doesn't open -->
<div class="news-info">
<h1>ZIMNÍ KONCERTY SE ZNOUZECNOSTÍ</h1>
<p>Začátkem roku si po dlouhé době opět zahrajeme se Znouzecností.</p>
<div class="news-date">4.1.2016</div>
</div>
<div class="news-thumb">
<img src="img/img-news1.png" alt='img' />
</div>
</li><!-- end Type One -->
<li id="news-02.html" class="last-news"> <!-- Type Two Thumb on Bottom, HTML, works -->
<div class="news-thumb">
<img src="img/img-news2.png" alt='img' />
</div>
<div class="news-info">
<h1>NOVÉ PÍSNIČKY</h1>
<p>Připravujeme několik nových písniček, které již brzy můžete slyšet na dalších koncertech.</p>
<div class="news-date">3.12.2015</div>
</div>
</li><!-- end Type Two -->
AJAX FUNCTION:
/* Dynamic Window Ajax Content */
"use strict";
var $actual2= null;
var obert2=false;
$(".last-news").click(function() {
obre2($(this).attr('id'));
$actual2=$(this);
});
function obre2(quin2){
$.ajax({
url: quin2,
success: function(data) {
$('.news-content').html(data);
$(".news-content").hide(0)
$('.news-window').hide(0)
tanca2();
canvia2();
$("html, body").animate({ scrollTop: $('#news-show').offset().top - (200) }, 500, function(){
$('.news-window').show(0);
$('.news-window').css('height','0');
$('.news-window').animate({height:760}, 1000,function(){
$('.news-window').css('height','760');
$(".news-content").fadeIn("slow");
});
});
}
});
}
/**/
function canvi2(quin2){
var obert2=true;
$.ajax({
url: quin2,
success: function(data) {
$('.news-content').html(data);
tanca2();
canvia2();
$("html, body").animate({ scrollTop: $('#news-show').offset().top - (200) }, 500, function(){
$('.news-window').show(0);
$('.news-window').animate({height:760}, 1000,function(){
$('.news-window').css('height','760');
$(".news-content").fadeIn("slow");
});
});
}
});
}
/**/
function tanca2(){
$(".close2-btn").click(function() {
$(".news-window").slideUp("slow");
$(".news-content").fadeOut("slow");
$("html, body").animate({ scrollTop: $('#anchor01').offset().top }, 1000);
obert2=false;
});
}
function seguent(){
if($actual2.next().hasClass('end')){
$(".news-content").fadeOut("slow");
$actual2=$($('.start').next());
}else{
$(".news-content").fadeOut("slow");
$actual2=$($actual2.next());
}
if($actual2.hasClass('isotope-hidden')){
seguent();
}else{
$(".news-content").fadeOut("slow");
canvi2($actual2.attr('id'));
}
}
function enrera(){
if($actual2.prev().hasClass('start')){
$(".news-content").fadeOut("slow");
$actual2=$($('.end').prev());
}else{
$(".news-content").fadeOut("slow");
$actual2=$($actual2.prev());
}
if($actual2.hasClass('isotope-hidden')){
enrera();
}else{
$(".news-content").fadeOut("slow");
canvi2($actual2.attr('id'));
}
}
function canvia2(){
$('.news-next').click(function() {
seguent();
});
$('.news-prev').click(function() {
enrera();
});
}
I appreciate any help you can give me .
I commented I'm doing an infinite scroll through a foreach php and ajax to load the part of the page that I need, the only detail is that isotope use and when I try to load the new content in the isotope in the sucess function ajax , not load anything, the code above the call if the content loads correctly but not within the isotope.
This is the content of foreach
<ul class="projects_wrapper">
<?php if(isset($feed['gallery']['data'])) { ?>
<?php foreach($feed['gallery']['data'] as $k=>$v){ ?>
<li class="mix <?php echo strtolower($v['parent']['title']); ?>">
<div class="project_item">
<img class="project_item_img" src="<?php echo $v['logo']['src-s'];?>" alt="">
<div class="project_item_description">
<h3 class="project_item_title"><?php echo $v['title']; ?></h3>
<p><?php echo $v['description'];?></p>
<a class="button button_view button_project" href="/<?php echo $v['permalink'];?>">View More</a>
</div>
</div>
</li>
<?php } ?>
<?php } ?>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="http://www.iec.ch/img/loading_sliders_2.gif" /></center></div>
</ul>
This is the content for javascript
var $isotope_container = $('.projects_wrapper');
var current = 2;
var catg = 'all';
$(document).ready(function(){
setTimeout(function(){
$isotope_container.isotope({
itemSelector: '.mix'
});
},1000);
// bind filter button click
$('.filter-link').on( 'click', function() {
catg = $(this).data('filter');
$( ".mix" ).filter(catg).css( "background-color", "red" );
$('.filter-link').removeClass('selected');
$(this).addClass('selected');
var filterValue = $( this ).attr('data-filter');
//use filterFn if matches value
//filterValue = filterFns[ filterValue ] || filterValue;
$isotope_container.isotope({ filter: filterValue });
});
/*$('.add_more').on('click',function(){
var elems = getItemElement().add( getItemElement() ).add( getItemElement() );
//console.log(elems);
// append elements to container
$isotope_container.append(elems).isotope('appended',elems);
});*/
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$('div#loadmoreajaxloader').show();
$.ajax({
url: "/projects",
data: {pag: current, content_only: 1, category: catg},
success: function(data)
{
if(data)
{
//$(".projects_wrapper").append(data);
$(".projects_wrapper").isotope("appended",data);
$('div#loadmoreajaxloader').hide();
current++;
console.log('Me Ejecuto');
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
console.log('Termine');
}
}
});
}
});
});
i resolve this for destroy isotope and reconstruct after like this:
function redo_isotope(){
$isotope_container.isotope('destroy');
$isotope_container.isotope({
itemSelector: '.mix'
},1000);
}
var $isotope_container = $('.projects_wrapper');
var current = 2;
var catg = 'all';
$(document).ready(function(){
setTimeout(function(){
$isotope_container.isotope({
itemSelector: '.mix'
});
},1000);
// bind filter button click
$('.filter-link').on( 'click', function() {
catg = $(this).data('filter');
$( ".mix" ).filter(catg).css( "background-color", "red" );
$('.filter-link').removeClass('selected');
$(this).addClass('selected');
var filterValue = $( this ).attr('data-filter');
//use filterFn if matches value
//filterValue = filterFns[ filterValue ] || filterValue;
$isotope_container.isotope({ filter: filterValue });
});
/*$('.add_more').on('click',function(){
var elems = getItemElement().add( getItemElement() ).add( getItemElement() );
//console.log(elems);
// append elements to container
$isotope_container.append(elems).isotope('appended',elems);
});*/
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$('div#loadmoreajaxloader').show();
$.ajax({
url: "/projects",
method: "get",
data: {pag: current, content_only: 1, category: catg},
success: function(data)
{
if(data)
{
$(".projects_wrapper").append(data);
redo_isotope();
//$(".projects_wrapper").append(data);
$('div#loadmoreajaxloader').hide();
current++;
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});
});
I'm trying import images to HTML using PHP, but NivoSlider not loaded that.
I looked for the cause of the problem.
I am printing a alert message of response and the right.
Here is the HTML and AJAX query:
<div id="workcontent" class="pcontent" style="display:none;">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
</div>
</div>
<script>
$(document).ready(function() {
var wl = $('#worklist div');
wl.on('click', function(){
var name = $(this).attr('id');
console.log(name);
$.ajax({
url: 'read.php',
type: 'POST',
data: { data : name }
}).done(function (response) {
$('#slider').prepend(response);
alert(response);
});
});
});
</script>
<div id="back"></div>
<div id="backcontainer">
<div id="back">
Back
</div>
</div><!--End backcontainer-->
</div><!--End content-->
And here is the other jQuery:
<script>
$(document).ready(function() {
$('#slider').nivoSlider(function(){alert('OK');});
});
</script>
This alert don't show! ):
Finally, here is the PHP code:
<?php
if (isset($_POST["data"])){
if ($_POST["data"] == "") {
echo "data ures";
} else {
$data = $_POST["data"];
$fname = "content/".$data."/*.*";
$files = glob($fname);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
echo '<img src="'.$num.'" data-thumb="'.$num.'">';
}
}
} else {
echo "nem jott data";
}
?>
Sorry for my bad english
NivoSlider doesn't take a function as an argument.
Also .nivoSlider() is probably called before the AJAX call returns it's response.
A better solution would be:
$(document).ready(function() {
$.ajax({
url: 'read.php',
type: 'POST',
data: { data : name }
}).done(function (response) {
$('#slider').prepend(response).nivoSlider( {} );
});
});
Now you can be fairly sure #slider contains the images from the response body so NivoSlider can act on them.
I'm trying to delete a li item using jquery, but its not working. Here's my code:
the html file:
<li>
<img class="avatar" src="images/$picture" width="48" height="48" alt="avatar" />
<div class="tweetTxt">
<strong>$username</strong> $auto
<div class="date">$rel</div>
$reply_info
<div class="date"></div>
<a class ="delbutton" href="#" id = $id> Delete </a>
</div>
<div class="clear"></div>
</li>
The jquery file:
$(function () {
$(".delbutton").click(function () {
var del_id = element.attr("id");
var info = 'id=' + del_id;
if (confirm("Sure you want to delete this update? There is NO undo!")) {
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
the delete.php file:
<?php
include("includes/connect.php");
if($_POST['id'])
{
$id=$_POST['id'];
$sql = "delete from {$prefix}notes where id='$id'";
mysql_query( $sql);
}
?>
There is no element in your HTML with a class of record. I would try something like this:
<li class="record">
<!-- a bunch of other stuff -->
<a class="delbutton" href="#">Delete</a>
</li>
then in the JS:
$(function ()
{
$(".delbutton").click(function ()
{
if (confirm("..."))
{
$.ajax({ /* ... */});
$(this).closest(".record").fadeOut();
}
return false;
});
});
If your div look like this:
<ul>
<li>One | <a href='#' class='delete'>Delete</a></li>
<li>Two | <a href='#' class='delete'>Delete</a></li>
<li>Three | <a href='#' class='delete'>Delete</a></li>
<li>Four | <a href='#' class='delete'>Delete</a></li>
</ul>
jQuery:
jQuery(document).ready(function(){
jQuery('.delete').live('click', function(event) {
$(this).parent().fadeOut()
});
});
Check: http://jsfiddle.net/9ekyP/
EDIT:
You can remove your li after getting response in success function something like this:
jQuery(document).ready(function(){
jQuery('.delbutton').live('click', function(event) {
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
$(this).parent().parent().fadeOut();
}
});
});
});
There are several issues with your code...
element.attr("id") references undeclared element but this should probably be $(this).attr("id")
The <li> block has no class ".record" either
EDIT: You only fade your <li> but do not actually remove it from the DOM (don't know if this was deliberate though)
The <a>'s ID is not quoted (and not escaped either... as are the other strings you insert in PHP (EDIT) and the ID you use in your delete script - this is very dangerous as it allows cross-site scripting / XSS and SQL injection as TokIk already pointed out)
PHP:
echo '<li class="record">
<img class="avatar" src="images/'.htmlentities($picture).'" width="48" height="48" alt="avatar" />
<div class="tweetTxt">
<strong>'.htmlentities($username).'</strong> '.htmlentities($auto).'
<div class="date">'.htmlentities($rel).'</div>'.htmlentities($reply_info).'<div class="date"></div> <a class="delbutton" href="#" id="'.htmlentities($id).'"> Delete </a>
</div>
<div class="clear"></div>
</li>';
JavaScript:
$(document).ready(function() {
$(".delbutton").click(function(){
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!")) {
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
alert('success');
},
error: function(){
alert('error');
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
EDIT: Delete script (note the additional error check that $_POST['id'] exists and the pseudo-function for quoting the ID):
<?php
include("includes/connect.php");
if( isset($_POST['id']) ) {
$id = quote($_POST['id']);
$sql = "delete from {$prefix}notes where id='$id'";
mysql_query( $sql);
}
?>
I am assuming that '.records' is the container.
You can pass through your ID value to make <li> unique, result being:
<li id='record_12'>
//CONTENT
</li>
<li id='record_13'>
//CONTENT
</li>
And change your SUCCESS script to the following:
$(".delbutton").click(function(){
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
//Getting the unique LI and fading it out
$('#record_' + del_id).fadeOut();
}
});
Your code works fine well.I was trying to code a form that has multiple textbox, then after each textbox threre will be link called add which POST call the other php called addnew.php.
In addnew.php data will we added to database(postgres). But I am geting problem while getting the post variable itself.
this is my code for form (I will chage for multiple textbox once it works fine)
script:
<script type='text/javascript'>
$(window).load(function() {
jQuery(document).ready(function() {
jQuery('.add').live('click', function(event) {
var da = $('form#myform').serialize();
alert(da);
$.ajax({
type: "POST",
url: "addnew.php",
data:da,
success: function(data) {
if (data === "ok") {
$(this).parent().fadeOut();
$('#results').html(data);
}
else {
alert(data);
}
}
});
});
});
});
Form
<form name='myform' id='myform'>
<input name='da' type='text' id='da' value='none'>
<a href='#' class='add'>Add</a>
</form>
addnew.php code here
<? php
if( isset($_POST['da']) )
{
echo (da);
}
?>