Sorry, I speak poor English!
I am new to Totaljs and I am having a problem:
Node v12.4.0
Total.js v3.2.4
BlogEngine v2.0.0
I want to put the content of an post in a modal window on the home page, that's the goal!
Here is my code for AJAX:
var links = document.querySelectorAll('a.tinymodal-modal');
for (var i = 0; links.length > i; i++) {
links[i].addEventListener("click", function(event){ // callback
"use strict";
event.preventDefault();
var element = this.getAttribute("href");
alert('AJAX HREF = ' + element);
$.ajax({
type: 'GET',
url: '/api/blogs/',
data: element,
success: function(data, textStatus,jqXHR){
console.info(data);
alert(JSON.stringify(data));
// Display Modal
The problem I get back all blog posts and not the selected post!
Do you have a way to solve this problem?
Thank you so much !!!
Related
I have this ajax inside my file.php (It hits the success callback):
<script type="text/javascript">
$('#selectSemestres').change(function(obj){
var anoSemestre = $(this).val();
$.ajax({
type: 'GET',
url: '{{ route('professor') }}',
data: {anoSemestre: anoSemestre},
success: function(data){
console.log(data);
}
});
})
</script>
Now on my Controller:
public function getProfessorList()
{
$professor = Professor::all();
$ano_semestre = isset($_GET['anoSemestre']) ? $_GET['anoSemestre'] : Horario::first()->distinct()->pluck('ano_semestre');
$semestres = Horario::distinct()->select('ano_semestre')->get()->toArray();
return View::make('professor', compact('professor', 'semestres', 'ano_semestre'));
}
What I want to do:
I have a LIST with professor and their disciplines. What I need to do is:
Whenever I change the value of that select box, I just remake the function with the new parameter.
I'm trying to use ajax to remake that list but nothing change, not even the URL with the professor.php?anoSemestre=xx.
Also, when I try to use the $_GET['anoSemestre'] the page doesnt show any change or any ECHO.
But If I go to Chrome spector>NEtwork and click the ajax I just made, it shows me the page with the data I sent.
Cant find out what I'm doing wrong.
UPDATE
I did what was suggested me, now I'm working with the data I get from the success callback:
<script type="text/javascript">
$('#selectSemestres').change(function(obj){
var anoSemestre = $(this).val();
$.ajax({
type: 'GET',
url: '{{ route('professor') }}',
data: {anoSemestre: anoSemestre},
success: function(data){
var lista = $(data).find('#list-professores'); //Get only the new professor list and thier disciplines
$('#list-professores').remove(); //Remove old list
$('#professores').append(lista); //Append the new list where the old list was before.
}
});
})
</script>
The return of var lista = $(data).find('#list-professores'); is:
Accordion Effect
#list-professores li input[name='item']:checked ~ .prof-disciplinas {
height: auto;
display:block;
min-height:40px;
max-height:400px;
}
This list is an Accordion Menu (using a checkbox and changing it with js&css), so everytime I click on a professor < li>, it's suppose to open and show a sublist (disciplines of that professor I clicked). But it's not opening anymore and no errors on the console. No idea why.
The issue here is what you are returning in your controller and how you do it, you don´t need to redirect or refresh the entire page. This could be achived using a single blade partial for the piece of code you may want/need to update over ajax. Assuming you have an exlusive view for that info, you could solve this with something like this:
in your view:
<div class="tableInfo">
<!--Here goes all data you may want to refresh/rebuild-->
</div>
In your javascript:
<script type="text/javascript">
$('#selectSemestres').change(function(obj){
var anoSemestre = $(this).val();
$.ajax({
type: 'GET',
url: '{{ route('professor') }}',
data: {anoSemestre: anoSemestre},
success: function(){
$('.tableInfo').html(data); //---------> look at here!
}
});
})
</script>
in your controller:
public function getProfessorList()
{
$professor = Professor::all();
$ano_semestre = isset($_GET['anoSemestre']) ? $_GET['anoSemestre'] : Horario::first()->distinct()->pluck('ano_semestre');
$semestres = Horario::distinct()->select('ano_semestre')->get()->toArray();
if (Request::ajax()) {
return response()->json(view('YourExclusiveDataPartialViewHere', ['with' => $SomeDataHereIfNeeded])->render()); //---------> This is the single partial which contains the updated info!
}else{
return View::make('professor', compact('professor', 'semestres', 'ano_semestre'));//---------> This view should include the partial for the initial state! (first load of the page);
}
}
I have a page that has a few divs connected in a flowchart via JS-Graph.It. When you click one of the divs, I want it to 1) generate text in a special div 2) generate a popup via click functions attached to the two classes "block" and "channel" in each div. This works when the page is static.
When I add ajax so on click of a button and add more divs, only one of the two classes appears in the HTML source. "Channel" is no longer visible and the function to generate a pop-up on click of a channel class div does not work anymore...
AJAX call:
$("#trace").bind('click', $.proxy(function(event) {
var button2 = $('#combo').val();
if(button2 == 'default') {
var trans = 'Default View';
}
if(button2 == 'abc') {
var trans = 'abc';
}
$.ajax({ // ajax call starts
url: 'serverside.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
JSGraphIt.delCanvas('mainCanvas');
$('.test').html('<h1>' + trans + '</h1>'); // Clear #content div
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
JSGraphIt.initPageObjects();
}
});
return false; // keeps the page from not refreshing
}, this));
DIV class: (works in index.php but not transactions.php)
// Boxes
while($row = sqlsrv_fetch_array($result))
{
echo '<div id="'.$row['id'].'_block" class="block channel" style="background:';
Functions:
$(document).on('click', '.block', $.proxy(function(event) {
var input = $(event.target).attr('id');
var lines = input.split('_');
var button = lines[0];
$.ajax({
url: 'srv.php',
data: 'button=' + button,
dataType: 'json',
success: function(data)
{
$('#content').html('');
$('#content').append(data);
}
});
return false;
}, this)); // End Application Details
$(".channel").click(function () {
alert('channel');
});
Something about registering with pages, I'm not sure exactly how it works. The fix should be to change your channel click function to be the same as your first and use the .on('click') option.
found some related reading material. https://learn.jquery.com/events/event-delegation/
var url = "http://pinterestapi.co.uk/" + pinterestUsername + "/pins";
$.ajax({
dataType: "jsonp",
url: url,
success: function (data) {
alert(data)
}
});
firebug "invalid character" error shows
dataType:"json" is not working
Try .getJSON().
var url = "http://pinterestapi.co.uk/"+pinterestUsername+"/pins";
$.getJSON(url, function(data) {
alert(data);
});
Ok, lets try something different...
Assuming you are the user "jwmoz".
var user = "jwmoz";
var url = "http://pinterestapi.co.uk/"+user+"/pins";
$.get(url,
function(data) {
alert(data)
}, "jsonp");
Check out this page jQuery AJAX cross domain, this should give you a rough idea and several userful links to solve your problem.
Ps- sorry for misunderstanding your question first time around! Best of luck!!
Dom
I load a vieschs views_embed_vesch using Ajax.
This views included Ajax PAGER. It does not work.
Drupal.attachBehaviors does not work too.
I think in Drupal.settings need added data from views.
(function($){
Drupal.behaviors.ajax_views = {
attach: function (context, settings) {
//alert('dddd');
$('a.views-link').click(function(){
// alert('sfsdfsd')
var relArr = $(this).attr('rel').split(' ');
$.ajax({
type: "POST",
url: Drupal.settings.basePath + 'ajax-views/'+relArr[0]+'/'+relArr[1],
dataType: 'json',
success: function (datad){
alert(datad.seet.views);
// Drupal.settings.views = datad.seet.views ;
$('div#block-system-main > div.content').append(datad.view);
},
});
return false;
});
}
};
})(jQuery);
Try this module to load content via ajax. It will automatically attach behaviour with the ajax loaded content.
https://drupal.org/project/ajax_links_api
Currently I'm trying to make an ajax entry delete function, when I click on delete the entry is being deleted correctly. When I click on delete, the whole row should disappear, instead of only the td where the delete url is placed (that's happening now, the script can't stand closing tags or something).
This is the code
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "core/actions/delete.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
},
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});
}
});
return false;
});
});
and the last td of the tr
<td>X</td>
I think the javascript should be changed a little, but don't know what/where.
Do you know how to? Or do can you point me to the best ajax delete entry tutorial? (tried several..)
var parent = $(this).parent();
In the context where you wrote the line above "this" refers to the <td> which is why it disappears. You could change to $(this).parents('tr:first');
http://jsfiddle.net/Ed3mW/