We Keep Coding

how to get value outside jquery click function

I have a on click function to get the id of a,and I want to alert it.
The following code is not working showing null, why? thanks
var projectId=null;
$('body').on('click', '#list a', function(){
projectId=this.id; //id should = 30
alert(projectId); //here display 30
});
alert(projectId); //here display null
what i really want to do is :
a.js I have sth like, when I click "a" it redirect to another page which need to render by my projectId:href='/projectDetail' this page call b.js
$.ajax({
type: "GET",
url: 'http://xxx',
dataType:'json',
contentType:"application/json",
success:function(data){
console.log(data);
var projectList="<ul style='list-style:none;'>"
for (var i = 0; i < data.data.length; i++) {
projectList += "<li><div id='listall'><a
id='"+data.data[i].projectId+"'
href='/projectDetail'>"+
"<img class='back' src='/img/Homepage_ProjectFrame.png'></li>"
}
var projectList="<ul>"
});
var projectId=null;
$(document).on('click', '#listall a', function (){
event.preventDefault();
projectId=this.id;
alert(projectId);
});
alert(projectId);
b.js I have:
$.ajax({
type: "GET",
url: 'http://xxx?projectId='+projectId
dataType:'json',
contentType:"application/json",
success:function(data){
console.log(data.data);
$(".photoprojectD").attr("src",data.data.projectPhotoUrl);
$(".dlocation p").html(data.data.countryName);
$(".dcategory p").html(data.data.categoryName);
});
So i need projectId from a.js to render dynamic information
Do you have any good ideas?
Thanks a lot for your guys helping

the second alert(projectId); outside the "click" event handler runs as soon as the page loads. Inevitably this is before your "click" handler can possibly be executed, because the user has likely not had time to click on it, and even if they had time, there's no guarantee that they will. Therefore the variable projectId is not populated when that code executes.
You can certainly use projectId outside your "click" event, but you have to wait until after at least one "click" event has happened before you can expect it to have a value.
There's also danger that your hyperlinks are causing the page to postback before any of this ever happens. Since you're using jQuery you can prevent this very easily:
$('body').on('click', '#list a', function(event) {
event.preventDefault(); //prevent default hyperlink redirect/reload behaviour
projectId=this.id; //id should = 30
alert(projectId); //here display 30
});
Lastly, ensure that this other place you want to use the value is not doing anything silly like declaring another "projectId" variable with narrower scope and then trying to use that. For example, this will not work as you wish:
var projectId = null;
$('body').on('click', '#list a', function(event) {
event.preventDefault(); //prevent default hyperlink redirect/reload behaviour
projectId=this.id; //id should = 30
alert(projectId); //here display 30
exampleFunc(); //call the function below
});
function exampleFunc() {
var projectId = null; //oops, another "projectId" with narrower scope (within this function) will take precedence here
alert(projectId); //will be null
});
Whereas this will:
var projectId = null;
$('body').on('click', '#list a', function(event) {
event.preventDefault(); //prevent default hyperlink redirect/reload behaviour
projectId=this.id; //id should = 30
alert(projectId); //here display 30
exampleFunc(); //call the function below
});
function exampleFunc() {
alert(projectId); //will be 30
}

Prevent a click from loading a website and load some other custom content instead?

I am working on a project where a user can click on a link to get some additional information about it. The website uses Bootstrap Framework if that is important., The extra information is stored in a file on the server. Here is the code that calls the function openModal:
$('a.modal-link').on('click', openModal);
This is the JavaScript code for this function:
function openModal() {
var link = $(this).attr("href");
var page = "url-of-current-page";
var text = $(this).text();
$.ajax({
type: "POST",
url: "path/to/getdata.php",
data: {
link: link,
page: page
},
success: function(content) {
$(".modal-body").html(content);
}
})
};
This is supposed to set the HTML of modal-body to the data I received back. But it loads up the actual link inside the modal after showing up my data briefly. How can I prevent that?
Let me know if I need to add more details before downvoting.

As you're clicking an anchor, you probably want to prevent it from redirecting, change the function to
function openModal(e) {
e.preventDefault();
var link = $(this).attr("href");
var page = "url-of-current-page";
var text = $(this).text();
$.ajax({
type: "POST",
url: "path/to/getdata.php",
data: {
link: link,
page: page
},
success: function(content) {
$(".modal-body").html(content);
}
});
}

Pulling in specific elements with Ajax

I am building a Wordpress site. I am using Ajax to pull in content from another page to fill an empty div when a particular element is clicked. Each element has a different URL so I made the Url a variable. I need Ajax to only pull in a particular element from this URL. Instead it keep pulling in the entire page. I've tried using various methods to select the specific element, but I've hit a wall and need a little help.
(function($) {
function find_page_number( element ) {
return parseInt( element.html() );
}
$('.member-info').on('click', function (event) {
event.preventDefault();
page = find_page_number( $(this).clone() );
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType:'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function( html ) {
$("#main").empty();
$('#main').append( html);
}
});
})
})(jQuery);

You can filter the answer with jQuery:
$('#main').append( $(html).find('#main').html() );

Load AJAX content in modal and change URL

My current setup is on click a modal popups with data from the ajax action which has been passed an id, I want the URL to change on click.
But I also want it so that if you directly accessed the URL it would load say index with the modal preloaded.
Very much like https://www.myunidays.com/perks/view/shoeaholics/online it loads the URL with the content in a model then if you click/close the modal the URL changes to the index page.
I have seen related questions about changing URL on click but couldn't find anything to do with accessing URL directly (is their a rule I can add to my .htaccess).
(Any code/direction is appreciated)

Create a partial view (so that layout isnt rendered twice) and add the action to controller
public function actionViewmodal($id)
{
return $this->renderPartial('_view', array('model' => $this->findModel($id)));
}
Then within my index I did the following
$(document).ready(function() {
$('a').click(function() {
pageurl = $(this).attr('href');
var Id = jQuery(this).attr('id');
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : 'http://localhost:8888/directory/viewmodal?id='+Id,
success: function(response) {
if(response) {
$('.modal_some_wrapper').html(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
});
Could someone example how myunidays website works with modal and URL change?

jQuery: Simple menu

I'm trying to learn jQuery by implementing a simple menu. I've got <div> elements that act as buttons and have links in them. I'm trying to add onclick events to the divs that navigate the browser to the link's address in the div. This is basically my pseudo-code. What would the real code be? How can I improve this? Any feedback appreciated!
// Iterate over each menu button
$('.masterHeaderMenuButton').each(function () {
// Get the link in each button and set the button's onclick to
// redirect to the link's address
var url = $('a', this).attr('href');
this.click(function () {
window.location.href = url;
});
// If the user is on the page for the current button, hilight it
if (window.location.href === url) {
$('a', this).addClass("masterHeaderMenuButtonSelected");
}
});

Try this untested example:
$('.masterHeaderMenuButton a').each(function () {
// Get the link in each button and set the button's onclick to
// redirect to the link's address
var _this = this; // save this ref for click handler.
$( this ).parent().click(function () {
window.location.href = $(_this).attr('href');
});
// If the user is on the page for the current button, highlight it
if (window.location.href === url) {
$(this).addClass("masterHeaderMenuButtonSelected");
}
});

I don't actually use jQuery for such a simplistic task, especially if it involves page redirection. So unless you're looking to do some AJAX-style page loading, stick with standard HTML.
For that task, I use this sweet combo:
$('#nav_links li').live('click', function() {
var ajax_link = $(this).attr('rel');
loadLink(ajax_link);
});
function loadLink(link){
$('#content_window').css('position','relative');
$('#content_window').animate({
'left': '20px',
'opacity': '0'
}, 500, "swing", function() {
$.ajax({
url: '../sections/' + link,
dataType: 'html',
success: function(html) {
$('#content_window').html(html);
}
});
});
}
Awesome, right?
Here's the HTML:
<ul id="nav_links">
<li rel="setting-up.html"><span class="green">|</span>setting up<br></li>
<li rel="features.html"><span class="purple">|</span>features<br></li>
<li rel="more-uses.html"><span class="blue">|</span>more uses<br></li>
<li rel="troubleshooting.html"><span class="yellow">|</span>troubleshooting</li>
</ul>
Have a fun.