i have recently started coding in PHP and im wondering how i can show a div defined in the adress bar (example: www.yourwebsite.com/index.php?divtoshow=home)
The div is hidden with css, display:none;
then i want it to display the home div
i have tried using jquery, but i cant seem to get the variable to be implamented into the script
I already have the following for when i click the home icon:
$(".chome").click(function(){
$("#home").show(500);
});
First, get the name from the query string:
<?php $divtoshow = $_GET["divtoshow"]; ?>
Second, add some JQuery to display the div on page load:
<script>
$(document).ready(function() {
$("div[id=<?php echo $divtoshow; ?>]").show();
});
</script>
Related
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.
I am trying to test the jQuery GET method, but what I am getting as result is completely insane. All I am trying to do is call a function from my controller with jQuery and then display the echoed value in a div within my view. Below is my code and finally a breakdown of the problem I am encountering.
Controller
public function generate_suggestions2() {
echo "James";
}
View views\suggestions_v.php
<body>
//This DIV is used a button to call the jQuery function
<div id="next_btn">
<p>Click here to display a name</p>
</div>
//In this div the value retrieved by the jQuery should be displayed
<div id="listB"></div>
//This is the function that calls the function within my controller
<script type="text/javascript">
$( "#next_btn" ).click(function() {
$.get("core/generate_suggestions2/",
function(data) {
$( "#listB" ).html(data);
});
});
</script> //For some reason I need to put the script at the end of the body. When it's in the head nothing happens when I click the button. Also something I do not understand.
</body>
Now the problem is that when I click the DIV next_btn it does NOT display the James in the DIV listB.
Instead it populates the DIV listB with my source code from my main view views\core_v.php
I have no idea how this is even remotely possible, so please if you have a clue or even better you know what I am doing wrong please tell me. I am trying to get this to work for the past three days without any success or progress :(
Try using this code in your view
<script type="text/javascript">
"$( "#next_btn" ).click(function() {
$.get("<?php echo site_url().'/core/generate_suggestions2';?>",
function(data) {
$( "#listB" ).html(data);
});
});"
</script>
Also delete the </script> tag just right before this block comment.
Regarding this comment you have:
//For some reason I need to put the script at the end of the body. When it's in the head nothing happens when I click the button. Also something I do not understand.
It is because the DOM is not yet fully loaded and Javascript executes its code when the browser has finished loading the DOM you are referring to. So you either have to put it after the DOM element you want to edit, like you do now or you could use $(document).ready(function(){
}
); .
Read more about it here
This line is pretty strange:
</script><script type="text/javascript">
Try to delete first closing tag 'script' on it.
I'm using slider and having it open up on a specific image when the page loads. That happens just fine, only when I go to select another image it stays visible as the other one also pops up.
Here is my current code for forcing it to appear.
<script>
$(document).ready(function(){
$("#793").show();
});
</script>
the page can be seen here, select another image at the bottom and you'll see what I mean.
http://www.shehitpausestudios.com/index.php/shop/polaroids/girls-and-dreams/last-summer/
maybe try something like this
$(".bjqs li div").click(function(){
$(".person_about").hide();
var image = $(this).attr("data-rel");
var div = image.replace('#','');
$(".person_about #"+div).show();
return false;
});
I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
I have 6 buttons(with tooltips) that are generated through PHP and they are all disabled except for the first button. The disabled buttons will only be enabled based on the record on the database.
By the way, I used jquery tooltip http://jquery.bassistance.de/tooltip/demo/
I enabled the tooltip for all elements with the title attribute
<script type="text/javascript">
$(document).ready(function() {
$('*').tooltip({
showBody: " - ",
});
});
</script>
It worked fine when the page first loads or when the page is refresh.
Now I have a function that check if the buttons status are changed from disabled to enabled. After that I fetch the result and put in a variable $buttons then print it on the div that holds the current buttons.
<script type="text/javascript">
document.getElementById("menus").innerHTML = <?php echo json_encode($buttons, JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
</script>
The problem is that the tooltip reverts back to the default tooltip.
I'm not sure if it's in the css or the javascript since I'm not an expert.
The problem is that you're adding content AFTER you've called the .tooltip(...) stuff.
try calling .tooltip on the content you add into the .innerHtml AFTER you've made the call to get the new content.