Develop Reference

How to get the attribute id from JQuery AJAX generated HTML data? JavaScript

Is it possible to get the attribute id from JQuery AJAX generated HTML data?
I have these in my index.php
<script>
$(document).ready(function () {
function viewRooms()
{
$.ajax({
url:"rooms.php",
method:"POST",
success:function(data){
$('#rooms').html(data);
}
});
}
viewRooms();
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
});
</script>
<div id="rooms"></div>
and inside rooms.php
<input type="text" id="room_number" />
<input type="text" id="room_type" />
<button id="save" > </button>
The function save button doesn't work from index.php. also with the id attributed to it.
Please help me if it is possible to do that? Thank's a lot.

Wrap save click handler call in a function something like this.
function saveClick() {
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
}
and call this function in ajax success.

Ajax isn't working

i'm trying to do a request with ajax and isn't working. The controllers have the correct code, cause if i do it with ajax they are working good.
The views is this:
$(document).ready(function(){
listProject();
$("#buttoncreate").click(function(e)){
e.listUploadProject();
});
});
var listProject = function()
{
$.ajax({
type:'get',
url:'{{ url('admin/project/listall') }}',
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
var listUploadProject = function()
{
$.ajax({
type:'get',
url:'{{ url('admin/project/create') }}',
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-10">
<h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">PROYECTOS</h3>
</div>
<div class="col-md-2" style="padding:20px;">
<button type="button" id="buttoncreate" class="btn btn-danger">Crear Proyecto</button>
</div>
<div class="col-md-12" id="ajaxwindow">
</div>
If i only have:
$(document).ready(function(){
listProject();
});
Is working good.
Where's the problem? thanks!.
EDIT:
$(document).ready(function(){
listProject();
$("#buttoncreate").click(function(e){
e.preventDefault();
e.listUploadProject();
});
});
var listProject = function()
{
$.ajax({
type:'get',
url:"{{ url('admin/project/listall') }}",
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
var listUploadProject = function()
{
$.ajax({
type:'get',
url:"{{ url('admin/project/create') }}",
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
When i click to the button and he try to do the function give me this error:
Uncaught TypeError: e.listUploadProject is not a function
at HTMLButtonElement.<anonymous> (projects:217)
at HTMLButtonElement.dispatch (jquery.js:4737)
at HTMLButtonElement.elemData.handle (jquery.js:4549)
Maybe something wrong with the call to listUploadProject? thanks!

It's because you prematurely close your quotes. Escape them using backslash (\)
like this:
url: '{{url(\'admin/project/create\')}}'
or you can mix up the quotes:
url: "{{url('admin/project/create')}}"
update 1
To answer that last error:
change function to
$("#buttoncreate").click(function()
{
listUploadProject();
});
this will run the function on click.

Instead of below code:
$("#buttoncreate").click(function(e)){
e.listUploadProject();
});
Try this one:
$("#buttoncreate").click(function(e)){
e.preventDefault();
listUploadProject();
});
There must be some error in the console on click.

How to get title using ajax?

I'm using ajax functionality and trying to get title using ajax but not working. Here is a example
$('#ajaxlink').click(function(e) {
var $this = this.href;
$.ajax({
url: $this,
dataType: 'html',
success: function(html) {
var div = $('title', $(html));
$('#gettitle').text($title);
console.log(html);
}
});
e.preventDefault();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="ajaxlink" href="https://jsfiddle.net/">Click</a>
<div id="gettitle">
</div>

Your request is failing because of CORS protection. You can't easily request html from other domains and parse the results, unless they have enabled CORS explicitly.
To make it work for same domain, try this
$('#gettitle').text($(html).filter('title').text());

I saw some problems in your code,
Please try this version of your code
$('#ajaxlink').click(function(e) {
var urlPath = $(e.currentTarget).prop('href'); // must be a valid url
$.ajax({
url: urlPath,
dataType: 'html',
success: function(html) {
$('#gettitle').text(html);
console.log(html);
}
});
e.preventDefault();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="ajaxlink" href="https://jsfiddle.net/">Click</a>
<div id="gettitle">
</div>

You can use JSONP:
function logResults(json){
console.log(json);
}
$(document).ready(function(){
$.ajax({
url: "https://api.github.com/users/jeresig",
dataType: "jsonp",
jsonpCallback: "logResults"
});
});
or
function jsonCallback(json){
console.log(json);
}
$(document).ready(function(){
$.ajax({
url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
dataType: "jsonp"
});
});

Problems with ajax development

I apologize in advance for my bad English.
I have site in development http://plast-pak.esy.es/ on html-coding
With Ajax i called html page into my front page and slider is SlideUp.
<button onclick="clickAlert();" class="clickDown">?????????</button>
<script>
function clickAlert() {
$(this).click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
}
</script>
Was callback page with information. It have her own button, witch have to close this page and return front page.
<button onclick="clickAbort();" class="clickUp">????????? ?? ???????</button>
<script>
function clickAbort() {
$(this).click(function(){
$('.front-page > #main_wrap').slideDown(3000);
$('.front-page > #menuBar').slideDown(3000);
$('#projectInformation .full-node').remove();
});
}
</script>
In the end, everything works, how it works. All horrible and very incorrect. Please help me to understand why it all works so. Thanks in advance.

Remove
$(this).click(function(){
from clickAlert and clickAbort. They are already click handlers.
Other than that, you will have to be more specific about "horrible and very incorrect".

$(this).click() is used to setup a handler for the click event of the button, and you're already doing that by setting the onclick attribute in your markup.
The usual way to do this is by giving an id to the button, so that you can set events in the javascript code:
<button id="alert" class="clickDown">Подробнее</button>
<script type="text/javascript">
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
</script>

Thanks everybody for your advices. The problem was solved as follows:
<button id="alert" onclick="clickAlert();" class="clickDown">Подробнее</button>
function clickAlert() {
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
...
}
});
...
}
for whatever reason, Slider not given use following code
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
Only click event in button is working. Thanks again for your advice

How to replace .live() method with .on() method

Hei.. I have a function to load more news. Since jquery-1.9.1.min.js this function was working alright, but now I have to replace it with .on() method and I still can't get it work.
Here is the code:
// Load more news feed
$(function(){
var page = 1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true",
dataType:'json',
success: function(data){
$("#the_news_feed").html(data.news_feed);
if(page <= data.total_pages){
$("#the_news_feed").after('<button id="load_more_feed" class="btn btn-primary btn-large" style="width: 100%;margin-top:10px">Load More</button>');
}
}
});
$("#load_more_feed").live("click", function(){
var next = page+=1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true&page_num="+next,
dataType: "json",
success: function(data){
$("#the_news_feed").append(data.news_feed);
if(next == data.total_pages){
$("#load_more_feed").remove();
} else {
$("#load_more_feed").html("Load More");
}
},
beforeSend: function(){
$("#load_more_feed").html("Loading...");
}
});
});
});
I tryed to replace:
$("#load_more_feed").live("click", function()
with
$("#the_news_feed").on("click", "load_more_feed", function()
but I still can't get it work. What am I doing wrong? Thank you!
I display this function with id="news_feed" so here was the problem
<div class="tab-pane fade" id="news_feed">
<div id="the_news_feed"></div>
</div>
Final solution is $("#news_feed").on("click", "load_more_feed", function()
Thank you guys!

Actually, you're missing the # in the id selector.
$("#the_news_feed").on("click", "load_more_feed", function()
must be
$("#the_news_feed").on("click", "#load_more_feed", function()
assuming #the_news_feed is the parent of #load_more_feed.
EDIT :
From your code, you're appending this #loadmore button after #the_news_feed, so this obviously will not work. Try changing it to this :
$(document).on("click", "#load_more_feed", function()
This will bind the click to the document, which will always exist. Alternatively, you could bind it to #load_more_feed closest static parent, like an element which exists when you load your page and not dynamically created.