function confirmDelete(ruta, id){
alert(ruta +","+ id);
document.getElementById('confirmDeleteModal').innerHTML = '<div class="modal-dialog max-w-2xl">'
+ '<div class="modal-content mx-auto">'
+ '<div class="modal-header">'
+ '<button type="button" class="close la la-times" data-dismiss="modal"></button>'
+ '</div>'
+ '<div class="modal-body">'
+ '<h2>¿Está seguro que desea eliminar el registro?</h2>'
+ '</div>'
+ '<div class="modal-footer">'
+ '<div class="flex flex-wrap gap-2">'
+ '<a href="{{route('+ ruta +', '+ id +'}}"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'
+ '<button type="button" data-dismiss="modal"'
+ 'class="btn btn_outlined btn_secondary uppercase">Cancelar</button>'
+ '</div>'
+ '</div>'
+ '</div>'
+'</div>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')" class="btn btn-icon btn_outlined btn_secondary">
eliminar
</a>
<div id="createModal" class="modal" data-animations="fadeInDown, fadeOutUp">
</div>
I have an anchor that executes a function to remove
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')"
class="btn btn-icon btn_outlined btn_secondary">
<span class="la la-trash"></span>
</a>
This function adds the content to a modal
The function needs 2 parameters the route and the id to delete
function confirmDelete(ruta, id){
alert(ruta +","+ id);
}
The problem is that it doesn't add the content to the div of the modal and I don't know how to use the "{{route('+ route +', '+ id +'}}" in js
If I'm not mistaken, what you want is to use a Laravel function (route) but passing the values through javascript, however that is not possible. First the laravel code is executed on the server and the generated result (html and JS) is sent to the client, so you can't call laravel functions directly from javascript.
One way to solve this would be to create your route string using javascript from the received data, without using Laravel code.
+ '<a href="http:/example.com/'+ ruta +'/'+ id +'"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'
Related
for(var key in result)
{
var html = '';
html += '<li class="item item_chat">' +
'<div class="product-img">' +
'<img src="' + base_url + '/assets/img/noimage.png" alt="Product
Image" class="img-size-50">' +
'</div>' +
'<div class="product-info">' +
'<a href="javascript:void(0)" onclick="viewGroupBody(this,' +
result[key].id + ',' + result[key].name + ');" class="product-
title">' + result[key].name +
'<span class="badge badge-danger float-right"> Group </span></a>' +
'<span class="product-description"> Message </span>' +
'</div>' +
'</li>';
$('#messageListDashGroups').append(html);
}
I am getting error on this line in onclick function
'<a href="javascript:void(0)" onclick="viewGroupBody(this,' +
result[key].id + ',' + result[key].name + ');" class="product-
title">' + result[key].name +
Before i use two arguments
onclick="viewCusBody(this,' + id + ')"
But now i add an extra argument so i am having issue
You can try with Template literals.
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
Demo:
var base_url = "test.com";
var result_id = "some_id";
var result_name = "jhon";
var html = `<li class="item item_chat">
<div class="product-img">
<img src="${base_url}/assets/img/noimage.png" alt="Product
Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" onclick="viewGroupBody(this,'${result_id}','${result_name}');" class="product- title">${result_name}
<span class="badge badge-danger float-right"> Group </span></a>
<span class="product-description"> Message </span>
</div>
</li>`;
$('#messageListDashGroups').append(html);
function viewGroupBody(el, id, name){
console.log(id)
console.log(name);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageListDashGroups"></div>
For IE: Try the traditional way by changing
onclick="viewGroupBody(this,' + result[key].id + ',' + result[key].name + ');"
To
onclick=viewGroupBody(this,"'+result['key'].id+'","'+result['key'].name+'")
var base_url = "test.com";
var result = {key:{id: "some_id", name:"john"}};
var html = '';
html += '<li class="item item_chat">' +
'<div class="product-img">' +
'<img src="' + base_url + '/assets/img/noimage.png" alt="Product Image" class="img-size-50">' +
'</div>' +
'<div class="product-info">' +
'<a href="javascript:void(0)" onclick=viewGroupBody(this,"'+result['key'].id+'","'+result['key'].name+'"); class="product- title">'+
'<span class="badge badge-danger float-right"> Group </span></a>' +
'<span class="product-description"> Message </span>' +
'</div>' +
'</li>';
$('#messageListDashGroups').append(html);
function viewGroupBody(el, id, name){
console.log(id)
console.log(name);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageListDashGroups"></div>
I have code that's dynamically creating a 3 column image grid from a mySQL database using a JSON array and jQuery .append. How would I pass the database $row ID (array index) of each image in the <div> created by the .append using an href to a modal? I'm calling/building the modal with an AJAX statement.
The line below is from the full $.getJSON statement further down. I believe I can pass the ID in the href but I'm not sure where or how?
// These lines generate the clickable grid images
<a href="equipment.php?id=' + data.Surfboards[row].Surfboard.id + '">
<img class="photog-headshot" src="images/' + data.Surfboards[row].Surfboard.imageName + '" alt="' + data.Surfboards[row].Surfboard.imageName + '">
JSON Parser - builds the image grid:
//gets the JSON from surfboards.php
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption><p>Board Name: '
+ data.Surfboards[row].Surfboard.boardName
+ '<br>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
Modal for Images:
<!-- Ajax Database Modal Start -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Surfboard Details</h4>
</div>
<div class="modal-body" id="surfboard_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Link to page with working table example and blank modal on image click: Nalu.live/equipment
Link to github repo
Please let me know if any additional information is needed.
Please consider that I'm still a student and very new to web development.
Thanks for any help.
I solved this with the help of a classmate. Working code is in the GitHub repo at the link below. Please note, the code that builds the image grid from JSON database data is posted below and can also be found in scripts/surfboard.js
I'm happy to answer questions (if I can) or walk anyone though the code if needed.
Nalu Github Repo
//// From Dylan W. on Discord - Replace in the surfboard.js
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="equip-content">' + '<div class="photog-group custom-modal clearfix" data-title="'+ data.Surfboards[row].Surfboard.boardName +'" data-image="images/'
+ data.Surfboards[row].Surfboard.imageName +'" data-description="'+
data.Surfboards[row].Surfboard.caDescription +'"><figure><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a data-target="#surfboardModal" data-toggle="modal"><div class="equip-content-overlay"></div><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption class="fadeIn-bottom"><h1>'
+ data.Surfboards[row].Surfboard.boardName + '</h1>'
+ '<hr>'
+ '<p>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
});
I'm trying to fade out and fade in a card element. My html looks like this:
<form class=" mt-4 mw-800 center-block animated fadeInUp">
<div class="row">
<div class="col-lg-12 content">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">{{ $random_idea->title }}</h3>
</div>
<div class="card-body">
{{ $random_idea->description }}
</div>
</div>
</div>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button id="idea" type="button" class="btn btn-raised btn-primary btn-block">
Geef mij een ander idee</button>
</form>
My jQuery code looks like this:
$( "#idea" ).click(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
});
$.ajax({
type: "POST",
url: "/idea",
success: function(response) {
$(".card").fadeOut();
$('<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description +
'</div>' +
'</div>').appendTo('.content').fadeIn();
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
The card div is fading out and fading in. But there is a delay, it's not shown good.
My lay-out looks like this:
When you click on the button the card fades out and another card fades in. But it's not smooth. Do you have any ideas to help me?
jQuery fadeIn() and fadeOut() are asynchronous. So, the new and old elements are fading in/out together. But, those methods gets a callback will call after the animation. So, you can rewrite your success function as follows:
$(".card").fadeOut(function() {
$(this).remove();
$('<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description + '</div>' +
'</div>').appendTo('.content').fadeIn();
});
Try using this
var html = '<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description +
'</div>' +
'</div>';
$(html).hide().appendTo(".content").fadeIn(300);
The reason its not going smooth is because you didnt give a speed within your fadeout/fadein function.
If you read the docs on https://www.w3schools.com/jquery/eff_fadeout.asp you notice the syntax accepts a speed $(selector).fadeOut(speed,easing,callback)
Wenn you fill in the speed of your fadein() and your fadeout() it should go smooth.
In my project my UI developer has hard coded piece of html code in js. I want to keep this code in the jsp, Because i need to use spring message tags to get the file rendered in any language selected by the user.
render: function () {
$("#pageloading").show();
this.$el.html(
**'<div class="row" id="test_page">' +
'<div class="col-xs-12">' +
'<div class="panel">' +
'<div class="panel-heading">' +
'<div class="row">' +
'<div class="col-xs-4">' +
'SECTION <span id="section"> A </span>' +
'</div>' +
'<div class="col-xs-4">' +
'QUESTIONS : <span id="quesNo"> </span>' +
'</div>' +
'<div class="col-xs-4">' +
'Time Remaining : <span id="timer"></span>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<div class="panel-group" id="test_questions"></div>' +
'</div>' +
'</div>' +
'<!-- /.row (nested) -->' +
'</div>' +
'<!-- /.panel-body -->' +
'<div class="panel-footer">' +
'<div class="row">' +
'<div class="col-xs-3 pull-right">' +
'<button id="back_section" type="reset" class="btn btn-default">PREVIOUS</button>' +
'<button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">NEXT</button>' +
'<button id="submit_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">Submit</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<!-- /.panel -->' +
'</div>' +
'<!-- /.col-xs-12 -->' +
'</div>' +
'<div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' +
'<div class="modal-dialog" style="width: 80%;">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h4>Instructions <div class="btn goToLastPage"><i class="fa fa-reply-all"></i> Back</div></h4>'+
'</div>' +
'<div class="modal-body">' +
'<div class="panel-body" style="text-align: justify; padding:0 100px">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to you (participant).</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is <= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' amruta.p#exidelife.in '+' in case of any clarifications.</h5>'+
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<div class="startTopicTest btn btn-default"> Test Start </div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'**
);
Backbone.ajax({
dataType: "json",
url: "topictestquestion",
data: "",
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader(header, token);
},
I want to put this HTML code in a jsp file and this js file should call my jsp file that i am suppose to create.
mockTestBegin: function() {
$("#pageloading").show();
this.$el.html(
'<div class="row" id="test_page">' +
'<div class="col-xs-12">' +
'<div class="panel">' +
'<div class="panel-heading">' +
'<div class="row">' +
'<div class="col-xs-4">' +
'SECTION <span id="section"> A </span>' +
'</div>' +
'<div class="col-xs-4">' +
'QUESTIONS : <span id="quesNo"></span>' +
'</div>' +
'<div class="col-xs-4">' +
'Time Remaining : <span id="timer"></span>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<div class="panel-group" id="test_questions"></div>' +
'</div>' +
'</div>' +
'<!-- /.row (nested) -->' +
'</div>' +
'<!-- /.panel-body -->' +
'<div class="panel-footer">' +
'<div class="row">' +
'<button id="mok_submit" type="submit" class="btn btn-danger pull-right" style="margin-right: 3%;">EXIT</button>' +
'<button id="preview_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">PREVIEW</button>' +
'<div class="col-xs-3 pull-right">' +
'<button id="back_section" type="reset" class="btn btn-default">PREVIOUS</button>' +
'<button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">NEXT</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<!-- /.panel -->' +
'</div>' +
'<!-- /.col-xs-12 -->' +
'</div>' +
'<div class="modal fade" id="preview-mock" tabindex="-1" role="dialog" aria-labelledby="preview-mock" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' +
'<div class="modal-dialog" style="width: 80%;">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h1 class="page-header"> Questions Numbers </h1>'+
'</div>' +
'<div class="modal-body">' +
'<div class="panel-body" style="text-align: justify; padding:0 100px">' +
'<div class="row">' +
'<div class="col-xs-12" id="preview-quession">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button id="mok_submit" type="submit" class="btn btn-default">Submit</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' +
'<div class="modal-dialog" style="width: 80%;">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h4>Instructions <div class="btn goToLastPage"><i class="fa fa-reply-all"></i> Back</div></h4>'+
'</div>' +
'<div class="modal-body">' +
'<div class="panel-body" style="text-align: justify; padding:0 100px">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to you (participant).</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is <= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' amruta.p#exidelife.in '+' in case of any clarifications.</h5>'+
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<div class="startMockTest btn btn-default"> Test Start </div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
Backbone.ajax({
dataType: "json",
url: "mok-testquestion",
data: "",
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader(header, token);
},
Same goes here as well, Everywhere my UI developer has hard coded the html code. I need to put all this in a jsp template so i can make use of spring features and that jsp file need to be called at the same place where this HTML code is been residing.
I am a beginner in UI please do help me. I am struggle with this issue from past one week browsing all the possible source and also learning basics of javascript, but now i dont have much time need to deliver it soon. please help
thanks in advance.
There are many ways you can invoke JSP page from JavaScript.
1) Opening the JSP page in a separate popup window:
window.open("MyPage.jsp?param1=value1¶m2=value2","pageName","height=400,width=400");
2) Form submission:
document.forms[0].action = "MyPage.jsp";
document.forms[0].method = "post"; // "get"
document.forms[0].submit();
3) Using jquery (AJAX):
$.post("MyPage.jsp", { param1: "Abc", param2: "xyz" },
function(data){
alert("Data Loaded: " + data);
});
I'm working on a dynamically changing web app. I'm using javascript and jQuery to populate DIV's with <li>'s and <a>'s. For example, I start with one menu dynamically built with javascript. From that menu, depending on item selected, another javascript function gets called to dynamically populate the corresponding DIV. The problem coming when I keep dynamically building submenu's and JQTouch doesn't switch to the next page.
In the following code, the alert('what') displays on an iPhone but never switches to the ePresentationDetails DIV. I have tried forcing it with jQT.goTo(); but that usually causes more issues and doesn't fix the problem.
Basic html code:
<div id="home">
<div class="toolbar">
<a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
<h1>AllaccessMD</h1>
</div>
<div id="logout" style="display:none;">
<div id="confirmBox">
Are you sure?
<a class="logoutButton" href="javascript: void(0);" onClick="logOut();">Logout</a>
<a class="cancelButton" href="javascript: void(0);" onClick="$('#logout').hide();">Cancel</a>
</div>
</div>
<h1>Home</h1>
<ul class="edgetoedge" id="ulHome"></ul>
</div>
<div id="ePresentations">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
<div id="ePresentationDetails">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationDetailsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
Javascript file:
function setupHome(){
if(localStorage.role == "Specialist"){
var homeUL = '<li class="arrow"><a id="aEP" rel="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
+ '<li class="arrow"><a id="aN" rel="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
+ '<li class="arrow"><a id="aE" rel="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
+ '<li class="arrow"><a id="aMP" rel="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="s,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
} else {
var homeUL = '<li class="arrow"><a id="aMP" rel="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
}
$('#ePresentations').bind('pageAnimationStart', function (e){setupEPresentations(getID($('#aEP').attr('rel')).id);});
}
function setupEPresentations(sID){
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DR.DATA[0][1] + ' E-Presentation\'s</h1>';
if(epObject.EP.DATA.length == 0){
html += '<div><p>There are currently no E-Presentation\'s for this doctor.</p></div>';
} else {
html += '<ul class="edgetoedge">';
for(var i in epObject.EP.DATA){
html += '<li class="arrow"><a id="' + epObject.EP.DATA[i][0] + '" href="#ePresentationDetails">' + epObject.EP.DATA[i][1] + '</a></li>';
}
html += '</ul>';
}
$('#ePresentationsData').html(html);
$('#ePresentationsData li a').click(function(e) {alert('what');setupEPresentationDetails(this.id);});
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getAllEPsID&sID=" + sID,true);
xmlhttp.send();
}
function setupEPresentationDetails(id){
/*xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DATA[0][0] + ' E-Presentation</h1>';
html += '<p>';
//html += '<br />' + epObject.DATA[0][2].format("mmmm dd, yyyy");
html += '<br /><strong>Rating:</strong> ' + Math.ceil(epObject.DATA[0][4]) + ' / 5 (' + epObject.DATA[0][5] + ' votes cast)';
html += '<br /><br /><a rel="external" href="http://www.youtube.com/v/' + epObject.DATA[0][3] + '">Click here to view E-Presentation</a>';
html += '</p>';
$('#ePresentationDetailsData').html(html);
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getEP&id=" + id,true);
xmlhttp.send();*/
$('#ePresentationDetailsData').html('I dont get called?');
}
What am I doing wrong? Maybe there is a better way to do this?
Thanks!!
What version of JQT are you using?
Are you wrapping your entire app in the <div id="jqt"></div> ?
Have you looked at it using Safari developer mode to see what the list HREFs actually are when they are rendered?
I would look at the rendered HREF for these:
<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>
Make sure the html is what it should be. The rel= or your quotes not being escaped might be throwing it off. But I don't see anything obvious that you are doing wrong.
Do you have a link you can send me so I can debug it in action?