Can't add Href to image in Javascript calls, inside Jquery Mobile - javascript

I am wondering how to add href link an image to next page in Javascript inside Jquery Mobile.
I am using the exact same code from my normal Jquery but it isnt working in my Jquery Mobile.
Wondering if it is possible to do so inside Jquery Mobile.
I am just trying load some dynamic images into Javascript via AJAX call, then add href to these images which it will click to the next html.
Thanks for your time!
<script>
$.ajax({
type: "GET",
url: "http://test.com/App/testpic.php",
dataType:'json',
success: function(data){
console.log(data);
$(document).ready(function() {
var $el = $('#list');
var listView = new infinity.ListView($el);
for (var i=0; i<50; i++) {
var listingid = data[i].listingid;
var image = "http://test/image/"+data[i].pic;
var myOtherUrl = "detail.html" + encodeURIComponent(listingid);
var $newContent = "<li id=indi href='"+myOtherUrl+"'><img src='"+image+"' width=100% ></img><li>" ;
listView.append($newContent);
var listItems = listView.find('.my-items');
for(var index = 0, length = listItems.length; index < length; index++) {
listItems[index].remove();
}
}
});
}
});
</script>

The li tag does not take an href attribute. You also need an a tag.
var $newContent = "<li id='indi'><a href='" + myOtherUrl + "'><img src='"
+ image + " width='100%'/></a></li>" ;
(Note that you also needed a closing </li>.)

Related

How to pass multiple variables from ajax to function in javascript?

How can I pass 2 variables from ajax to function ?
I can successfully pass 1 variable, but I don't know how to write the code to pass 2 variables. I'm stuck here:
<button id ="+data[i].id+" onclick='tahu("+data[i].id+","+data[i].nama+")'>Detail</button>
Here is my function
function tahu(x, y) {
window.alert(x);
window.alert(y);
}
Here is my full ajax code
function tampilkan() {
var data_table = "";
var head_table = "";
$.ajax({
url: "showkaryawan/da",
dataType: "json",
success: function(data) {
$('#oo').empty();
head_table +="<thead><tr class='bg-info'><th width='10%'>ID Karyawan</th><th width='30%'>Nama Karyawan</th><th width='15%'>Action</th></tr></thead>";
for (var i =0; i<data.length; i++) {
data_table +="<tr><td>"+data[i].id+"</td><td>"+data[i].nama+"</td><td>"+"<button id ="+data[i].id+","+data[i].nama+" onclick='tahu("+data[i].id+")'>Detail</button>"+"</td></tr>";
}
$('#oo').append(head_table);
$('#oo').append(data_table);
}
});
}
Ok, I've tried to solve your problem but without actually doing a json request so bear with me. Firstly, You are already using jquery for your ajax call so why not leverage jquery for your DOM manipulation as well? I have written your function to store the id and nama as attributes on the button element and instead of having an inline function call, I have written a click event handler in jquery to execute any time a button (with class detailButton) is clicked. This function will grab the data-id and data-name from the button itself and should display the information you want, specific to that button.
The final button element:
<button data-id ="id" data-name="nama" class="detailButton">Detail</button>
and the jquery:
//ajax request
function tampilkan() {
var data_table = "";
var head_table = "";
$.ajax({
url: "showkaryawan/da",
dataType: "json",
success: function(data) {
$('#oo').empty();
head_table +="<thead><tr class='bg-info'><th width='10%'>ID Karyawan</th><th width='30%'>Nama Karyawan</th><th width='15%'>Action</th></tr></thead>";
for (var i =0; i<data.length; i++) {
var id = data[i].id;
var nama = data[i].nama;
data_table +="<tr>";
data_table +="<td>"+id+"</td>";
data_table += "<td>"+nama+"</td>";
data_table += "<button data-id ="+id+" data-nama="+nama+" class="detailButton">Detail</button>";
data_table += "<td></td></tr>";
}
$('#oo').append(head_table);
$('#oo').append(data_table);
}
});
}
//click event handler
$('.detailButton').click(function() {
var id = $(this).data('id')
var nama = $(this).data('nama');
alert(id);
alert(name);
});
I took the liberty of expanding your data_table concatenation into multiple lines for ease of reading. Hope this is closer to your final solution.

Implement jQuery on dynamically created elements

I'm trying to integrate two jQuery scripts into one but because the elements of the first part are created dynamically using jQuery I can't get the second part of the project working.
The project:
1.Instagram pictures are parsed as JSON into li elements.
Here's a portion of the code:
<ul id="elasticstack" class="elasticstack">
</ul>
<script>
$("#elasticstack").append("<li><div class='peri-pic'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /><span class='name'>"+ data.data[i].caption.from.username +"</span> <span class='likes'><span class='glyphicon glyphicon-heart'></span><p>"+data.data[i].likes.count +"</p></span></div></li>"
);
</script>
Source: LINK
2.This works fine but when I try to add the slider none of the functions work. Even if I wrap the callout function in a $( document ).ready(function() { });
Here's the call out code:
<script>
new ElastiStack( document.getElementById( 'elasticstack' ) );
</script>
Source: LINK
Here's the JS Fiddle with all my code: LINK
Where am I going wrong?
You're looking for this. After the initial loadImages(start_url) call, you should be able to call loadImages(next_url) to load and display more. new ElastiStack had to be called after the images had been appended.
var access_token = "18360510.5b9e1e6.de870cc4d5344ffeaae178542029e98b",
user_id = "18360510", //userid
start_url = "https://api.instagram.com/v1/users/"+user_id+"/media/recent/?access_token="+access_token,
next_url;
function loadImages(url){
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: url,
success: function(data){
displayImages(data);
next_url = data.pagination.next_url;
}
})
}
function displayImages(images){
for(var i = 0; i < 20; i++){
if(images.data[i]){
$("#elasticstack").append("<li><img class='instagram-image' src='" + images.data[i].images.low_resolution.url + "'></li>");
}
}
// Call it after the images have been appended
new ElastiStack(document.getElementById('elasticstack'));
}
$(document).ready(function(){
loadImages(start_url);
});
Try to initialize the ElastiStack after data (HTML elements) has been appended into the DOM in your ajax, for example:
for (var i = 0; i < count; i++) {
// ...
$("#elasticstack").append(...);
}
new ElastiStack(...);
It should work.
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: url ,
success: function(data) {
next_url = data.pagination.next_url;
//count = data.data.length;
//three rows of four
count = 20;
//uncommment to see da codez
//console.log("count: " + count );
//console.log("next_url: " + next_url );
//console.log("data: " + JSON.stringify(data) );
for (var i = 0; i < count; i++) {
if (typeof data.data[i] !== 'undefined' ) {
//console.log("id: " + data.data[i].id);
$("#elasticstack").append("<li><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></li>"
);
}
}
new ElastiStack(document.getElementById('elasticstack'));
}
});
You have to move your new ElastiStack(document.getElementById('elasticstack')); inside the ajax success event. You don't have to change anything else in your. I also updated your JSFiddle.

Using swipe.js with $.ajax() content

I am using Brad Birdsall's Swipe.js plugin as a touch friendly, library agnostic plugin for a slider in my current mobile project. When I populate the slider on page load, everything works great. However if I try and populate the slider with $.ajax() on click, the slider will receive all of the slides, but is not responsive to touch events, or any of the methods associated with the slider.
The general slider HTML structure looks like this:
<div id="slider" class="swipe">
<ul>
<li style='display:block;'>
<img src="/someImageUrl.jpg" />
</li>
<li style='display:none;'>
<img src="/someImageUrl.jpg" />
</li>
</ul>
</div><!-- .swipe -->
<nav>
PREV
NEXT
</nav>
I am using an $.ajax() response to populate the <li><img src="..." /></li> on a click event handler in my doc.
Here's my JS:
$.ajax({
url: "process.inc.php?vehicleId=" + vehicleId,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var swipeSlides = "";
for (i = 0 ; i < data.length; i++) {
var photoUrl = data[i].photoUrl;
var photoArray = photoUrl.split("|");
if (photoArray.length <= 1) {
list += "<img src="+photoArray[i]+" />"
} else {
for (i = 0; i < photoArray.length; i++) {
swipeSlides += "<li><img src='"+photoArray[i]+"' /></li>"
}
var prevNext = "<nav>PREVNEXT</nav>"
var sliderElement = $(self).parent().find("#data #slider ul");
sliderElement.find("li, nav").remove();
sliderElement.append(swipeSlides, prevNext);
$.getScript('../assets/js/swipe.js');
var slider = new Swipe(
document.getElementById('slider')
);
};
};
} // end success function
}); // end AJAX
This will sucessfully populate my page with all of the necessary content, but when I click one of the previous or next puttons, I get this error in my console:
Uncaught TypeError: Object #<HTMLCollection> has no method 'next'
Which tells me that my script is not being loaded into the page appropriately, or, my slider is not being instantiated at the proper time.
I have tried executing my code inside of the $.getScript() method like this:
$.getScript('../assets/js/swipe.js', function(data, textStatus, jqxhr) {
for (i = 0; i < photoArray.length; i++) {
swipeSlides += "<li><img src='"+photoArray[i]+"' /></li>"
}
var prevNext = "<nav>PREVNEXT</nav>"
var sliderElement = $(self).parent().find("#data #slider ul");
sliderElement.find("li, nav").remove();
sliderElement.append(swipeSlides, prevNext);
var slider = new Swipe(
document.getElementById('slider')
);
});
Or even just using a good old fashioned <script src="/assets/js/swipe.js"></script> before my jQuery script executes, and I keep getting the same exact error.
If anyone has any suggestions I will be forever grateful.
I figured out the problem.
In order to make the instantiation of the Swipe element recognized, I needed to use $.globalEval() inside of the $.getScript() function.
Heres my working code:
$.ajax({
url: "process.inc.php?vehicleId=" + vehicleId,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var list = "";
for (i = 0 ; i < data.length; i++) {
var photoUrl = data[i].photoUrl;
var photoArray = photoUrl.split("|");
if (photoArray.length === 1) {
list += "<img class='noPhoto' src="+photoArray[i]+" />";
var parent = $(self).parent().find("#data");
parent.find("table, .noPhoto").remove();
parent.append(list);
} else {
list += "<div id=\"slider\" class=\"swipe\"><ul>";
for (i = 0; i < photoArray.length; i++) {
list += "<li><img src='"+photoArray[i]+"' /></li>"
}
list += "</ul><nav>PREVNEXT</nav></div>";
var parent = $(self).parent().find("#data");
parent.find("table, div").remove();
parent.append(list);
$.getScript("../assets/js/swipe.js", function(data, textStatus, jqxhr) {
$.globalEval("var slider = new Swipe(document.getElementById('slider'));")
});
};
};
} // end success function
}); // end AJAX
Hopefully this helps someone else down the road.
Why use getScript in the first place? Append it to your other javascript files as (before your javascript file), then new Swipe() should work.
Also, if you want to call functions of your Swipe object later, you should declare the var outside your ajax function. Example:
var mySwipe;
document.ready(function(){
//...
});
function pullFromAjaxFunction() {
//... do some more stuff
mySwipe = new Swipe(...)
}

How to get the value value of a button clicked Javascript or Jquery

I'll try to be as straight to the point as I can. Basically I using jquery and ajax to call a php script and display members from the database. Next to each members name there is a delete button. I want to make it so when you click the delete button, it deletes that user. And that user only. The trouble I am having is trying to click the value of from one delete button only. I'll post my code below. I have tried alot of things, and right now as you can see I am trying to change the hash value in the url to that member and then grap the value from the url. That is not working, the value never changes in the URL. So my question is how would I get the value of the member clicked.
<script type="text/javascript">
$(document).delegate("#user_manage", "pagecreate", function () {
$.mobile.showPageLoadingMsg()
var friends = new Array();
$.ajaxSetup({
cache: false
})
$.ajax({
url: 'http://example.com/test/www/user_lookup.php',
data: "",
dataType: 'json',
success: function (data) {
$.mobile.hidePageLoadingMsg();
var $member_friends = $('#user_list');
$member_friends.empty();
for (var i = 0, len = data.length; i < len; i++) {
$member_friends.append("<div class='user_container'><table><tr><td style='width:290px;font-size:15px;'>" + data[i].username + "</td><td style='width:290px;font-size:15px;'>" + data[i].email + "</td><td style='width:250px;font-size:15px;'>" + data[i].active + "</td><td><a href='#" + data[i].username + "' class='user_delete' data-role='none' onclick='showOptions();'>Options</a></td></tr><tr class='options_panel' style='display:none'><td><a href='#" + data[i].username + "' class='user_delete' data-role='none' onclick='showId();'>Delete</a> </td></tr></table></div>");
}
}
});
});
</script>
<script>
function showId() {
var url = document.URL;
var id = url.substring(url.lastIndexOf('#') + 1);
alert(id);
alert(url);
}
</script>
IDEAS:
1st: I think it would be easier to concatenate an string an later append it to the DOM element. It's faster.
2nd: on your button you can add an extra attribute with the user id of the database or something and send it on the ajax call. When getting the attribute from the button click, use
$(this).attr('data-id-user');
Why don't you construct the data in the PHP script? then you can put the index (unique variable in the database for each row) in the button onclick event. So the delete button would be:
<button onclick = "delete('indexnumber')">Delete</button>
then you can use that variable to send to another PHP script to remove it from the database.
$('body').on('click', 'a.user_delete', function() {
var url = document.URL;
var id = url.substring(url.lastIndexOf('#') + 1);
alert(id);
alert(url);
});
<?php echo $username ?>
Like wise if you pull down users over json you can encode this attribute like so when you create your markup in the callback function:
'<a href="#'+data[i].username+'" data-user-id="'+ data[i].username + '" class="user_delete" data-role="none" >Options</a>'
So given what you are already doing the whole scenerio should look something like:
$(document).delegate("#user_manage", "pagecreate", function () {
$.mobile.showPageLoadingMsg();
var friends = new Array(),
$member_friends = $('#user_list'),
// lets jsut make the mark up a string template that we can call replace on
// extra lines and concatenation added for readability
deleteUser = function (e) {
var $this = $(this),
userId = $this.attr('data-id-user'),
href = $this.attr('href'),
deleteUrl = '/delete_user.php';
alert(userId);
alert(href);
// your actual clientside code to delete might look like this assuming
// the serverside logic for a delete is in /delete_user.php
$.post(deleteUrl, {username: userId}, function(){
alert('User deleted successfully!');
});
},
showOptions = function (e) {
$(this).closest('tr.options_panel').show();
},
userTmpl = '<div id="__USERNAME__" class="user_container">'
+ '<table>'
+ '<tr>'
+ '<td style="width:290px;font-size:15px;">__USERNAME__</td>'
+ '<td style="width:290px;font-size:15px;">__EMAIL__</td>'
+ '<td style="width:250px;font-size:15px;">__ACTIVE__</td>'
+ '<td>Options</td>'
+ '</tr>'
+ '<tr class="options_panel" style="display:none">'
+ '<td>Delete</td>'
+ '</tr>'
+ <'/table>'
+ '</div>';
$.ajaxSetup({
cache: false
})
$(document).delegate('#user_manage #user_container user_options', 'click.userlookup', showOptions)
.delegate('#user_manage #user_container user_delete', 'click.userlookup', deleteUser);
$.ajax({
url: 'http://example.com/test/www/user_lookup.php',
data: "",
dataType: 'json',
success: function (data) {
$.mobile.hidePageLoadingMsg();
var markup;
$member_friends.empty();
for (var i = 0, len = data.length; i < len; i++) {
markup = userTmpl.replace('__USERNAME__', data[i].username)
.replace('__ACTIVE__', data[i].active)
.replace('__EMAIL__', data[i].email);
$member_friends.append(markup);
}
}
});
});
Here's a really simple change you could make:
Replace this part:
onclick='showId();'>Delete</a>
With this:
onclick='showId("+data[i].id+");'>Delete</a>
And here's the new showId function:
function showId(id) {
alert(id);
}

Removing HTML code from a javaScript array?

Hi I have the following code in a javaScript file called songs:
var marchMD = new Array();
marchMD[0] = ["Save the Best for Last - Vanessa Williams"];
marchMD[1] = ["Informer - Snow"];
marchMD[2] = ["The Sign - Ace of Base"];
for (var i=0;i<marchMD.length; i++) {
songList = songList + '<p>' + marchMD[i] + '</p>';
}
$('#songs').html(songList);
Once this has been loaded, the follow javaScript in the file youtube reacts with the code above:
$(document).ready(function() {
$('#songs p').click(function(e) {
var $el = $(e.currentTarget);
var search = $el.html();
//alert(search);
//return;
var keyword = encodeURIComponent(search);
var yt_url = 'http://gdata.youtube.com/feeds/api/videos?q=' + keyword + '&format=5&max-results=1&v=2&alt=jsonc';
$.ajax({
type:"GET",
url: yt_url,
dataType: "jsonp",
success: function(response) {
if(response.data.items) {
$.each(response.data.items, function(i, data) {
var video_id = data.id;
var video_frame = "<iframe width='420' height='315' src='http://www.youtube.com/embed/" + video_id + "' frameborder='0' type='text/html'></iframe>";
$("#ytVid").html(video_frame);
});
} else {
$("#ytVid").hmtl("<div id='no'> No Video</div>");
}
}
});
});
});
The alert that I have in the code above was a test to see if it would return anything and it doesn't. However, if I remove the href html tag from the code this works. The reason I have it is so when someone clicks one of the songs, it takes them to the top of the page to view that song in youtube.
Thanks
If you know that the element that contains your link will only ever contain your link, you could use text() to strip out the HTML formatting, like this:
var search = $el.text();
When you have the <a> in there, var search = $el.html(); includes the tag as well, not just the text. Try this:
$('#songs p').click(function(e) {
var search = $(this).find('a').html();

Categories

Resources