I want to load some PHP page to div tags with this, but this code does not work;
<span>Dahili Branşlar</span>
<a href="#" id="cerrahi" ><span>Cerrahi Branşlar</span></a></li>
<script>
var yuklenecek = document.getElementById(id);
$("#"+yuklenecek).on("click", function(){
$("#orta_load").load(yuklenecek+".php");
});
</script>
<div id="orta_load">
when ı click to buton that which ı choose : should load dahili.php or cerrahi.php page in here
</div>
You need this:
$(".loaddiv").click(function() {
var url = $(this).attr("id") + ".php";
$("#orta_load").load(url);
console.log("loading " + url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Dahili Branşlar</span>
<span>Cerrahi Branşlar</span>
<div id="orta_load">
when ı click to buton that which ı choose : should load dahili.php or cerrahi.php page in here
</div>
Note how the jQuery function assigns the click handler to each <a>, then uses its id to determine the php document.
Related
How can i bind the url result from the jquery to the href ? as you can see on the html below. Thank you.
JQUERY CODE
<script>
$(document).ready(function(){
$("#btnSearch").click(function(){
var yearArray = [];
$("input:checkbox[name=Year]:checked").each(function(){
yearArray.push($(this).val());
});
var makeArray = [];
$("input:checkbox[name=Make]:checked").each(function(){
makeArray.push($(this).val());
});
var url="http://example.com/results?Year="+yearArray.join()+"&Model="+makeArray.join();
alert(url);
});
});
</script>
HTML
<a href="/searchnew/{{ url }}"><button id="btnSearch" class="btn btn-cta margin-bottom-1x search-button cssBase"
type="button""
style="width: 262.5px;">Search</button></a>
You can simpy add href attribute after creating link. What i mean by this is
if your href tag is look like this
<a href="#" id="myurl">
$("#myurl").prop("href",url);
This will simply render your html like this
<a href="http://example.com/results?Year="......(your dynamic values here)">
You don't have to add tag on to button click. Instead, on click of button, within the function after you have prepared url, call
location.href = "searchnew/" + url;
In case you have the base url for the app, you can prepend as well to have the complete url with you.
Use id attribute for your a tag like this-
<a href="....." id="myLink" > ... </a>
And at the end of your jQuery code add the following:
var a = $('#myLink');
var href = a.attr('href');
a.attr('href', href + url);
Here's the Script.
javascript
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
$('#website-design').attr('checked',true);
window.location.href = "/contact";
}
}
}
I want to check my checkboxes when I click the button with an id=website-design-check.
Here is my HTML.
first.html
<a href="/contact" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
Here's the second HTML file where checkbox is.
second.html
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
Now how can I achieve what I want base on the description given above. Can anyone help me out guys please. I'm stuck here for an hour. I can't get any reference about getting a checkbox state from another page.
To do this, you can modify your button link and add in additional parameters that you can then process on the next page.
The code for the different pages would be like:
Edit: I changed it to jQuery, it should work now.
Script
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
window.location.href = "second.html?chk=1";
}
}
second page
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script type="text/javascript">
var url = window.location.href.split("?");
if(url[1].toLowerCase().includes("chk=1")){
$('#website-design').attr('checked',true);
}
</script>
since your checkbox is in another html page, so it's totally normal that you can't get access to it from your first html page!
what I can offer u is using the localstorage to keep the id and then use it in your second page to check if it's the ID that u want or not.
so change your function to this :
function linkPageContact(clicked_id){
localStorage.setItem("chkId", "clicked_id");
window.location.href = "/contact";
}
then in your second page in page load event do this :
$(document).ready(function() {
var chkid = localStorage.getItem("chkId");
if(chkid === 'website-design-check'){
$('#website-design').attr('checked',true);
});
You can't handle to other sites via JavaScript or jQuery directly. But there's another way. You can use the GET method to achive this.
First you need to add to the link an attribute like this in your first.html:
/contact?checkbox=true
You can change the link as you want with JavaScript.
Now it will refer to the same page but it can be now different. After that you can receive the parameter with this function on the second.html.
function findGetParameter(parameterName) {
var result = null,
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
}
return result;
}
I got it from this post thanks to Bakudan.
EDIT:
So here is an short theory.
When the user clicks the button on the first page, then you change the link from /contact to /contact?checkbox=true. When the user get forwarded to second.html then you change the checkbox depending on the value, which you got from the function findGetParameter('checkbox').
As all have mentioned you need to use session/query string to pass any variable/values to another page.
One click of the first button [first page] add query string parameter - http://example.com?chkboxClicked=true
<a href="secondpage.html?chkboxClicked=true>
<button>test button</button>
</a>
In the second page- check for the query string value, if present make the checkbox property to true.
In second page-
$(document).ready(function(){
if(window.location.href.contains('chkboxClicked=true')
{
$('#idOfCheckbox').prop('checked','checked');
}
})
Add it and try, it will work.
Communicating from one html file to another html file
You can solve these issue in different approaches
using localStorage
using the query parameters
Database or session to hold the data.
In your case if your application is not supporting IE lower versions localStorage will be the simple and best solution.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<a href="contact.html" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
<script>
function linkPageContact(clicked_id) {
localStorage.setItem("chkId", clicked_id);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script>
$(document).ready(function () {
var chkid = localStorage.getItem("chkId");
if (chkid === 'website-design-check') {
$('#website-design').attr('checked', true);
}
});
</script>
</body>
</html>
I want to access php id on the same page for this i want something like this:
<a onclick='showDialog_update()' href='follow_event.php?id=$customer->id'\">
but i want to show popup and not want the page to get refresh so i can show my result on my popup on the same page.
i already tried this jquery code but its not working for me
<a href="javascirpt:void(0)" rel='$customer->id' class="showpopup">
$(".showpopup").click(function(ev)
{
var getid = $(this).attr('rel');
alert(getid);
ev.preventDefault();
}
Please try this code.
You must echo the php variable into the a tag
asdf
<!-- jQuery cdn source, can be skipped -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$(
$(".showpopup").click(function(ev)
{
var getid = $(this).attr('rel');
alert(getid);
ev.preventDefault();
})
);
</script>
I am facing with some glitches regarding the ajax load
OK, so the query is lets say I have page a (picture attached)
the ajax loads the div into the "RESULT" div on clicking the specific id's
here is the ajax script & the html i have come so far. this loads perfectly on the Result div on the page a itself.
<a href="#" id="one" /><br>
<a href="#" id="two" /><br>
<a href="#" id="three" /><br>
<div id="result" class="functions"></div>
$.ajaxSetup({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
var loadUrl = "content.php";
$("#one").click(function () {
$("#result").html(ajax_load).load(loadUrl);
});
var load2Url = "content1.php";
$("#two").click(function () {
$("#result").html(ajax_load).load(loadUrl);
});
var load3Url = "content2.php";
$("#three").click(function () {
$("#result").html(ajax_load).load(load2Url);
});
thing is i need to load the same contents on the result div on page b from another page using the same id calls, lets say page b.
the concept is, on page b, the id is clicked, it LOADS page a first & loads the content on "RESULT" div. both pages are on the same server
Would really appreciate any assistance. thank you.
One way to handle it will be to pass the dynamic item as a request parameter like in page b use the url /pagea.html?section=one etc
Then on page load
$(function(){
var location = window.location.href;
var page = location.substring(location.indexOf('=') + 1);
$('#' + page).trigger('click');
})
You got your loadUrl's in the wrong pace they should be inside of the function otherwise it's value is the last value it was set to which is content2.php
jsFiddle Demo
$.ajaxSetup({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$("#one").click(function () {
var loadUrl = "content.php";
$("#result").html(ajax_load).load(loadUrl);
});
$("#two").click(function () {
var loadUrl = "content1.php";
$("#result").html(ajax_load).load(loadUrl);
});
$("#three").click(function () {
var loadUrl = "content2.php";
$("#result").html(ajax_load).load(loadUrl);
});
I have this page, the first button is working good.
I want when press the second button to give me the link that is in the href, i tried like this , but i got the whole page , not just the value of the link , why please?
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://localhost/test/asdfasdf.php";
$("#button").on("click", function() {
$('body').load( url );
});
$("#button2").on('click',function(){
$('body').load( url +"#link" );
});
});
</script>
</head>
<body>
<input type="button" id="button" value="load" />
<input type="button" id="button2" value="search for a tag" />
</body>
</html>
I think you want a space:
$('body').load(url + " #link");
http://api.jquery.com/load/#loading-page-fragments
All you seem to want is the href of the a#link element at that URL. So instead of loading it into the <body>, just make the AJAX request, and look through the result:
$.ajax({
type: "GET",
url: "http://localhost/test/asdfasdf.php",
dataType: "html"
}).done(function (data) {
var the_link = $(data).find("#link");
alert(the_link.attr("href"));
});
And to put the href in the <body>, add this line in the .done() method:
$("body").html(the_link.attr("href"));
// or
$("body").append(the_link.attr("href"));
But if you actually want to load the a#link element into <body>, do what you had before, but then look for the a#link element and get its attribute:
$('body').load(url + " #link", function () {
var the_link = $("#link");
alert(the_link.attr("href"));
});
EDIT
You're trying to capture the href of the <a> on a different page. A try:
$.get(url+' #link', function(data) {
var $link = $(data).find('a').attr('href');
alert($link);
});
That is my very best guess, but its a shot in the dark.
Currently your code evaluates to .load('http://localhost/test/asdfasdf.php#link'), where #link is a useless fragment. You need a space to engender jQuery's special behavior of automatic DOM parsing and element loading.
$("body").load(url + " #link");
EDIT: to get the actual link value:
$.get(url).done(function (html) {
console.log($(html).find('#link').attr('href'));
});
You can also append to body inside of the .done callback.