JQUERY Ajax When I Click A Href - javascript

I am new to JavaScript, Jquery and Ajax. This is what I am trying to do:
When I click on Pro-Hashtagh, I want to display a word in Show-Id.
This Pro-Hashtagh HTML code:
<li>
Pro Hashtagh
</li>
Show-Id HTML code:
<div class="body" id="Show-Id">
</div>
Ajax Code:
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>
But when I click, nothing happens

I just created a fiddle with your code and everything seams to be fine.
https://jsfiddle.net/eh2xbxpe/
Of course you have to add Jquery to your project, that'S the only error I see.
Beside, you don't call any AJAX request in your code, you are just adding a please wait. If you are trying to reach an external ressources via AJAX, it is not the case here.
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<li>
Pro Hashtagh
</li>
<div class="body" id="Show-Id">
</div>

I guess you're working on a local environment.
Something happens when you click on the link but the page reloads way to fast for you to see anything. You need to update your onclick event so it prevent the link default behavior.
$('#Pro-Hashtagh').click(function(event){
event.preventDefault();
$("#Show-Id").html(waiting);
});

try
Pro Hashtagh
and create check function in javascript

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div class="body" id="Show-Id">
</div>
<li>
Pro Hashtagh
</li>
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait> .
..</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>

Related

Wordpress Nav / Menu onClick event solution

Okay, I have a problem:
I have this code that creates a button, but I need that same onClick event in my wordpress menu www.slingerbistro.dk (the top right corner - booking button).
I've read, that it requires to put in some coding in the header.
The booking code I've received is like this:
<!-- DinnerBooking Booking Box Start -->
<script type="text/javascript" src="http://js.i.dinnerbooking.eu/onlinebooking.js"></script>
<a onclick="return openDBWindow(this.href);" href="http://slingerbistro.b.dinnerbooking.com/onlinebooking/997/2" id="wd_booking_btn" title="Se ledig tid og book bord" class="btn_blue"><span>Se ledig tid og book bord</span></a>
<!-- DinnerBooking Booking Box End -->
And what I've done is trying to get that into my header.php in the theme. So far I've come up with this:
<script type="text/javascript" src="http://js.i.dinnerbooking.eu/onlinebooking.js">
jQuery(document).ready(function($) {
$("#menu-item-top-level-10").on("click", function(e){
e.preventDefault();
// dinnerbooking code here
return openDBWindow (this.href == "http://slingerbistro.b.dinnerbooking.com/onlinebooking/997/2")
});
}); </script>
Does anybody have the skills to look at my sorry excuse for a code and correct it? I'm not a programmer (obviously) and could really need your help.
The booking button has "#menu-item-top-level-9" so basically the code I'm trying to write should give the same effect with the drop-down-widget as the sample widget I posted on top.
Thank you <3
Try to replace your code to this:
<script type="text/javascript" src="http://js.i.dinnerbooking.eu/onlinebooking.js">
jQuery(document).ready(function ($) {
$("#menu-item-362").on("click", function (e) {
e.preventDefault();
// dinnerbooking code here
return openDBWindow ($(this).attr('href'));
});
});
</script>
First, there is no element with id: menu-item-top-level-10
Second, you do not want to change the href. You want to read it.

How to use JS in Framework7?

I create an application with framework7. Now I try to execute a javascript in my page-content, but it doesn't execute.
<div class="pages">
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
<script type="text/javascript">
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>
</div>
How can I run this javascript code ?
UPDATE
The page is loaded from an other HTML-Page.
Use Callbacks (onPageInit) to execute code
I had never heard of Framework7 before this, but after taking a look at the docs, I don't believe you are going to be able to use Javascript this way.
It would appear that for JS events, you have to scope the event inside a Framework7 constructor:
var myApp = new Framework7();
var $$ = Dom7;
$$('.alert-text').on('click', function () {
myApp.alert('Here goes alert text');
});
Of course the above example is taken directly from the F7 documentation, and is dependent on a click event, but you may be able to try out the alert event as a method of myApp and see if that works for you.
var myApp = new Framework7();
//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});
// Option 2. Using live 'page:init' event handlers for each page (not recommended)
$$(document).on('page:init', '.page[data-page="dashboard"]', function (e) {
console.log('dashboard loaded with page:init');
createGraph();
});
Above worked me well.. although following didnt work.
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});
If you written any javascript code inside index.html file, Put that code in
<head>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</head> like this, which is defined in index.html file
Or ,if you want write JS code for some particular html file ,
Do like this
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
</div>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>

Stop some links (href containing certain string) from working

I'm attempting to stop some links on my site from working.
Here is my code:
Links:
<a href='http://mysite.home.com'>Home</a><br>
<a href='http://mysite.home.com/nextpage'>Next Page</a><br>
<a href='http://mysite.string.home.com'>Home 2</a><br>
<a href='http://mysite.string.home.com/otherpage'>Other Page</a>
Jquery:
<script>
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
</script>
The goal is to stop the last two links (with href containing '.string.') from working and instead display the alert. However, this code isn't working and the links still work. What am I doing wrong?
The strange thing is the code works fine here: http://jsfiddle.net/TzUN3/364/
but not on my site. I have the script and links both in the <body> of my page, script after the links. Is this correct?
Thanks.
Forgot to add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
to my page. Feel like an idiot.
Thank you all.
$(function() {
// Jquery is ready
// *= is contains
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
});

Dynamically alter URL

Please how can I change the feed URL in this script with link(href)
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews');
});
</script>
<div id="test"> </div>
See example here http://www.zazar.net/developers/jquery/zrssfeed/example.html
The test Div displays the content of the rss feed
I just want to be able to alter the rssfeed(url) by clicking links with diffrent rssfeed url
<a onclick ="rssfeed('http://feeds.cnn.com/News');"></a>
note sure how you'd want the link to load it, but I'm assuming on click so this is what I would do..
<script type="text/javascript">
$(document).ready(function () {
$('.rss').click(function(){
$('#test').rssfeed($(this).attr('href'));
})
});
</script>
<a class="rss" href="http://feeds.reuters.com/reuters/oddlyEnoughNews">load rss</a>
<div id="test"> </div>
As it is shown here: http://www.zazar.net/developers/jquery/zrssfeed/example_menu.html
One can simply change the feed by calling .rssfeed again.

Changing a lightbox into an Ajax call

I am trying to rewrite this link so instead of linking to a light box, it makes an ajax call and updates the contents of <div class = "add-rule>. Here is the link
<div class="add-rule>"Add a rule</div>
I am new to Javascript and Ajax, so any help would be much appreciated.
The code should look some like this (couldn't check this out but I am not far away)
For more info have a look at jquery's ajax api
and you might be interested in the load function.
This is my code, let me know if it fits or not
<div class="add-rule">
<span id="addRuleError"></span>
<a href="javascript:void(0)" onclick="loadContent()" class="lightwindow"
params="lightwindow_type=external,lightwindow_height=100,lightwindow_width=300">Add a rule</a>
</div>
<script type="text/javascript">
function loadContent()
{
$("#addRuleError").text("");
$.ajax({
url:"saffron_main/add_rule",
data:{type:"tid", mid:0, cid:1, "m-name": "valid"},
success:function(result){$(this).parent().html(result)},
error:function(result){$("#addRuleError").html(result.responseText)}
})
}
</script>

Categories