dynamically changing href address based on the response from the server - javascript

i am currently trying to create pagination feature. I am using bootstrap for css and jQuery.
There are total of 8 divs that contains a tags.
in my html file, i wrote
<div id="articleArea" class="row">
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
<div class="col-md-4 postTitle">
post title
</div>
</div>
what I want to do is replacing each href in a tags, based on the response from my ajax call. I will just post success part of .ajax since other parts are completely functional and irrelevant to my question. my ajax call is returned in json format and var result is an array that contains 8 different hrefs that need to be assigned to each a tags in postTitle divs.
success: function(data){
var result = data["result"];
for(i=0; i < result.length; i++{
postTitle = result[i];
$(".postTitle.a").html(postTitle);
}
},
If i execute this code, a href are shown briefly but it disappears within a second. How can I fix this? and if there is better way to implement this feature, please do comment! Would love to be hear any feedbacks.

You need to run iteration over a tags instead of running iteration over results
$(".postTitle a").each(function(i) {
postTitle = result[i];
$(this).attr("href",postTitle);
});
This would run over each href tag and replace the values accordingly
EDIT: it should be .postTitle a

Your selector would select all of the elements
$(".postTitle.a")
You should select each tag and set its href, in addition it is missing a space:
$(".postTitle a").each(function(index, value){
$(value).attr('href', result[index]);
});

$(document).ready(function() {
$('#pdf').change(function() {
var newurl = $('#pdf').val();
$('a.target').attr('href', newurl);
});
});

Related

Working JQuery Script not working after ajax post response

I'd really appreciate any help!
I have a working jquery script. When a div is clicked, it updates the css class to active and executes a working ajax response.
I also have a filter functionality that works too. When a checkbox is ticked it calls a new list of div's from mysql with all the same class properties. However, when any of these new div's are clicked the ajax response doesn't work. If anyone could help I would be incredibly grateful!
HTML:
<div id="result" class="results">
<div class="w-embed"><img src="images/loader.gif" id="loader" width="" "200px"="" style="display:none;">
<?php
$sql="SELECT * FROM `posts`";
$result=$con->query($sql);
while($row=$result->fetch_assoc()){
?>
<div class="c-card" data-id="<?=$row['id'];?>">
<h1 class="s-h2">
<?=$row['title'];?>
</h1>
<!-- <div class="s-para m-light m-small"><?=$row['description'];?></div> -->
<div class="c-stats">
<div class="s-stat">Pay:
<?=$row['pay'];?>
</div>
<div class="s-stat">Deadline:
<?=$row['deadline'];?>
</div>
<div class="s-stat">Location:
<?=$row['location'];?>
</div>
<div class="s-stat">Cat:
<?=$row['category'];?>
</div>
</div>
<p class="s-para">
<?=$row['description'];?>
</p>
Find Out More
</div>
<?php }?>
</div>
</div>
Javascript:
<script>
$('.c-card').on('click', function(event){
event.preventDefault();
$('.c-card').removeClass('active'); //Removes class to all
$(this).toggleClass('active'); //Applies class
var action = 'data';
var dataId = $(this).data("id");
$.ajax({
type:"POST",
url:"ajax/selected.php",
data:{action:action,id:dataId},
success: function(response){
$("#jobber").html(response);
$("#changeme").text("altered");
}
});
});
</script>
This is the outputted response from the filters:
'<div class="c-card" data-id="'.$row['id'].'">
<h1 class="s-h2">'.$row['title'].'</h1>
<div class="c-stats">
<div class="s-stat">Pay:'.$row['pay'].'</div>
<div class="s-stat">Deadline:'.$row['deadline'].'</div>
<div class="s-stat">Location: '.$row['location'].';</div>
<div class="s-stat">Cat: '.$row['category'].'</div>
</div>
<p class="s-para">'.$row['description'].'</p>
Find Out More
</div>';
So my question is how do i make the new divs (called from the filter) to continue to be triggered and change class + execute the ajax query.
Thanks so much in advance!
I have been thought your actual problem was the ajax response is getting null.
<div class="c-card" data-id="<?=$row['id'];?>">
You are using the data-id attribute in the HTML section. But the script handles the id attribute using for getting the id. So the id is getting null for ajax call, Please use the below code or change the data-id attribute to id in the HTML section as you like.
var action = 'data';
var dataId = $(this).data("data-id");
"id" and "data-id" are different attributes for HTML. Please use same attributes in HTML and script
maybe because there is no html(div|| p || span ||...) element that have id of id="jobber"

Data repopulate using jquery, javascript

I have a div like below in HTML page:
When I click on any div I am saving the span text in DB and when again come back to the same page I am getting the response as saved text. on the basis of the text I need repopulate the clicked view.
I am adding all the code I have used, not able to populate the data.
<div class="panel-body">
<div class='score score-exel'>
<div class='arrow'></div><span class='scoreText'> 750-850 Excellent</span>
</div>
<div class='score score-good'>
<div class='arrow'></div><span class='scoreText'> 700-749 Good</span>
</div>
<div class='score score-ok'>
<div class='arrow'></div><span class='scoreText'> 650-699 OK</span>
</div>
<div class='score score-fair'>
<div class='arrow'></div><span class='scoreText'> 600-649 Fair</span>
</div>
<div class='score score-poor'>
<div class='arrow'></div><span class='scoreText'> 300-599 Poor</span>
</div>
<div class='btnHold'>
<button class='btn btn-success idkBtn'>I Don't Know</button>
<button class='btn btn-success submitBtn'>Submit</button>
</div>
</div>
In the below code for variable I am adding the selected value when the user clicks the div.
$('.score').bind('click', function(){
$('.arrow').hide();
$(this).find('.arrow').fadeIn();
userCreditScore = $(this).find('span').text().toString();
});
In below code I am getting response and trying to repopulate the data but not possible.
function fillData(){
var response = nav.scorm.getResponse('CREDIT_SCORE');
if(response != ''){
var jsonData = jQuery.parseJSON(response);
*** used many codes like below but not useful
//$('.score').find('span.scoreText:contains('+jsonData.CREDIT_SCORE+')').parent().css('display', 'block');
//$('.score').find('span.scoreText:contains('+jsonData.CREDIT_SCORE+')').parent().click();
}
I assume that you're missing the callback in your nav.scorm.getResponse method - if it's a AJAX call. Check the commented code you have:
//here we do the request
var response = nav.scorm.getResponse('CREDIT_SCORE');
//this line and is executed immediately, while 'response' var is still undefined
if(response != ''){
So depending on code you have in nav.scorm.getResponse you might have smth like
nav.scorm.getResponse('CREDIT_SCORE', function(response){
if(response != ''){
//put it to DOM
console.log(response);
}
});
UPD
The problem was with the spaces in your scores texts,
' 600-649 Fair' won't work, while '600-649 Fair' will do.
Check this fiddle - https://jsfiddle.net/shershen08/v3gxy8rL/

Javascript Selecting child element not working

i m working on adding a FB share button to all my posts.
so i wanted to use the sharer.php? method with all the parameter retrieved from the post.
So my blog structure
<div id='postwrapper'>
<div id='title'>
hello</a>
</div>
<div id='da'>
<span>Posted on </span>
<span class='divider'></span>
<span>By</span>
</div>
<div class='post_content'>$row['post'] gud day</div>
<div id='post_footer'>
<a href=viewpost.php>Continue reading</a>
<a href='#' onClick='fbshare(this)'>Insert text or an image here.</a>
</div>
</div>
My javascript for fbshare function (not complete).
function fbshare(fb) {
var p1 = fb.parentNode;
var p2 = p1.parentNode;
var title = p2.getElementById("title").innerHTML;
alert(title);
}
Everytime i try this it says undefined is not a function
getElementById is a function of the document. Assuming you have more than one post on the page (ids must by unique), try using a class instead:
<div class='title'>
And using getElementsByClassName:
var title = p2.getElementsByClassName("title")[0].innerHTML;
http://jsfiddle.net/AJ9uj/

Pulling Instagram feed into a nested Div using ID

I have a div that's nested in two other divs but isn't pulling in the Instagram feed via the ID, although when I take the div out and have it on it's own it displays.
How can I change the code either in the js file or the HTML for get it to display when its nested
Here's the related part of the JS file...
$(function() {
var cmdURL, embedImage, onPhotoLoaded, param, tag_name, userid,
param = {
access_token: '******************', // feel free to change it with your own access token
count: 10 // the total number of images
},
tag = 'Gezza', // your user id. you can find this one out by looking into one of your pictures uri
tag_name = '#photowall',
cmdURL = 'https://api.instagram.com/v1/tags/' + tag + '/media/recent?callback=?';
And here's the HTML
<div class="col-md-4 col-sm-4 home3block">
<div class="block">
<img src="assets/images/instagram-logo.gif">
<!-- START PHOTOWALL -->
<div id="photowall">
</div>
<!-- CLOSE PHOTOWALL -->
</div>
</div>
I need the #photowall to be inside both col-md-6 and block divs

Move around dynamic divs in blog post listings

I am working with a blog and want to move the category above the title on each post listing. when I use the following code I get 50 clones of the first category. I think I need to be using the index parameter of .each() but I'm not sure. Here's my code:
jQuery(document).ready(function(){
jQuery(".blog-category").each(function(){
jQuery(this).insertBefore( jQuery(".blog-head") ) ;
});
});
Essentially I'm trying to insert the
.blog-category
before the
.blog-head
on each post.
HTML
<div id="entry-2839">
<div class="blog-post-in">
<div class="blog-head">content</div>
<div class="blog-side">
<div class="blog-category">more content</div>
</div>
</div>
</div>
This should do the trick:
var e = jQuery(this);
e.closest(".blog-post-in").prepend(e);

Categories