I have problem here, please help about this.
Let's say i have 2 page. 1st Page index.php and 2nd page is data.php
In index.php i have div and not have any text inside this div. Here my index.php script
<div id="confirm"></div>
<img border="0" src="choose.png" width="90" height="90" id="choose">
and second page i have image at data.php and when i click image at data.php page and class value will show inside at index.php page.
data.php
<img border="0" src="choose.png" width="90" height="90" id="choose" class="ThisItem">
And here my js script.
$(document).ready(function() {
$('#test').hide();
$("#cChooseImg").click(function() {
$("#test").html(' Change Item.');
alert('Click OK');
});
});
The point is, in data.php i have one image and when click i want image class will show inside div at index.php. How i should change in js script? because this section $("#test").html(' Change Item.'); i don't know what should i write down.
Maybe you can help me?
Regards And Many..many thanks
in modern browser you can use data storage
here : http://api.jquery.com/category/miscellaneous/data-storage/
but if i have to do this i will turn into server side
something like chat scripts
after first click you send data to server and in second file you will get data from server with an interval and after get the click signal it will change the class!...
Related
I am trying to implement session one on 1 page (get.php?id=1) (that page should be included in index to display image) which has image inside that file with text "get file" as example. I need after user click on that image or link page should be refreshed and content should be displayed (video as example) on index.php without that get.php page, only content
i have tried to add session on page 1 and get session on the index page but i need the function when user only click on the image. I couldnt find any code which can help me do this
I will try to explain like this I am on index.php > session is not set so get.php?id=3 is displayed (that file includes image which says only to click on it) > user click on it > page refresh and video is displayed
Use javascript to post the click event to index.php:
<img src="get.php?id=1" id="click_img"/>
<form method="post" id="clickForm">
<input type="hidden" name="click_event" value="1" />
</form>
<script>
$('#click_img').click(function() {
$('#clickForm').submit()
})
</script>
index.php add codes:
<?php
$_SESSION['show_video'] = !empty($_SESSION['show_video']) || isset($_POST['click_event']);
The questions similar to that I found a lot but still can not realize what I need. I have a page.php that loaded in the block din_content with function .load
Page.php
<div id="ess">
<div id="top_ch">
<h1>Ess</h1>
</div>
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='ess/users.php' id="userch"></iframe>
<iframe name="text" width="450" height="405" src='ess/text.php'></iframe>
</div>
In page I have two Iframes. So I have two problems. First in main page where that iframes loaded I have Jquery function
$(document).on('click','.link_pro',function () {
//some actions
});
How to make that that function also worked in iframe?
Second, In the first Iframe I have two links. So what I need is that depend of what link you click on, the variable 'active' changed and depend on the value of that variable changed the second iframe. In example, you click on the first link and variable 'active' =1 than it transfered to the second iframe (may be even transfer to the parent and try to send to the second iframe trough method Get) where depend of the value displayed a requested result. I try to realize it with jquery and php. But still didn't get the result. The most problem to get a result from clicking on links in the first Iframe.
If you own the iframes sources and they belong to the same domain as the top window, then, for attaching events, you could probably do something like:
jQuery("iframe").load(function(){
jQuery(this).contents().find(".link_pro").on("click", function(){
});
});
The code above will attach the click event to your iframe's content (.link_pro).
Then, for the second question, if you have, for example, in your top window:
var myTopVar; //This belongs to top window scope
From your iframe, you can access:
top.myTopVar;
I think that should be it but, again, both your top window and iframe should share the same domain (document.domain). If not, you will face same origin policy problems.
I have used a form to submit an image id to the another page. I have done this rather than r than via url because it makes the url cleaner. However, when the user now reloads, it asks if they want to submit the form again. The won't know they have submitted a form, as far as they are aware they have simply clicked an image and been brought to a page that displays that image bigger.
Is there any way around this, that saves the image id the hidden form field has sent via the form, yet refreshes the page for the user?
HTML
<a class="gallery-img span4 js-img-submit" href="#">
<img src="img.jpg"/>
<form action="/image" method="post">
<input type="hidden" value="<?=$img['id']; ?>" name="image_id"/>
</form>
</a>
JQUERY
$('.js-img-submit').click(function(){
$(this).find('form').submit();
})
PHP
$image_id = isset($_POST['image_id']) ? $_POST['image_id'] : false;
Somehow the parameter needs to be send to the image page.
GET: You dont want that.
POST: You use that, but causes the refresh problem.
SESSION: Will be hidden, but cause troubles, when he opens multiple images, and then refreshing the first page.
So, i would to the following:
Use the hashtag, and load the image via javascript then. finally remove the hashtag:
MainPage:
<a class="gallery-img span4 js-img-submit" href="/image#<?=$img['id']; ?>">
<img src="img.jpg"/>
</a>
ImagePage:
<script language="javascript">
$(document).ready(function(){
var imgid = document.location.hash.slice(1);
document.location.hash = ""; //Remove
loadImage(imgid);
})
</script>
loadImage then needs to be the required javascript function.
The user might notice it for a split second. IF the user is not allowed to see, then your only way would be to use the PHP Session with seperate variables for every opened image-window.
You can do something like this:
$('.js-img-submit').click(function()
{
$.post("image.php", {id: $(this).find('input').val()});
})
I have no idea how to do this. I want to insert php code into an image source through jquery.. but it is not working. Here is my code and help would be greatly appreciated!
JQUERY:
var mainId = $(this).attr('id');
$("#intabdiv img").attr('src', '<?=resize("../php/admin/portfolio/before/'+mainId+'",$settings)?>' );
HTML:
<div id="intabdiv">
<?php $settings = array('w'=>450,'h'=>450,'crop'=>true); ?>
<img src="" border="0" class="pic" />
</div>
</div>
It looks to me like you're trying to have the client browser execute PHP. That's not going to work for you. I'm not sure you have a completely clear idea of the separation between server and client, and what happens where.
Here's a simple model that you can use to think about where things occur:
User puts URL in browser and hits enter
Browser sends request to server
Server receives request and attempts to provide the resource requested
At this stage, if the file is a PHP file, any PHP instructions are executed. The end result of this, after all PHP is finished and done, is an HTML file, perhaps with some javascript.
The server sends this HTML file back to the browser.
The browser loads the HTML file, and executes any javascript, which can manipulate the HTML on the client side.
So, where does that leave us? You're attempting to take an image file that exists on the server, resize it, and display it to the end user. Presumably the "resize" function is one you have defined somewhere in your PHP code. I'll go on the assumption that you just need to do this once and have it show up for the user when the page loads.
In this case, what you need to do is something more like the following (all in the same file):
<?php
$settings = array('w'=>450,'h'=>450,'crop'=>true);
$imgsrc = resize("../php/admin/portfolio/before/imageid.jpg",$settings);
?>
<div id="intabdiv">
<img src="<?= $imgsrc; ?>" border="0" class="pic" />
</div>
... no javascript required. Obviously, imageid.jpg must be the actual filename of the image you're trying to access. If, instead, you're trying to have some user action trigger the access to the image, please provide more context for what you're trying to accomplish and a better answer can be given.
The problem is you set the html as having an ID, but jquery is using the selector as being a class.
So change it from:
$(".intabdiv img")...
To
$("#intabdiv img")...
Why not use something like jcrop? http://deepliquid.com/projects/Jcrop/demos.php
My current index.php page format is as follows:
<?php include ("header.php") ?>
Here is the page content
<?php include ("footer.php") ?>
I have a search form within header.php which actions search.php, search.php is the same format as above. After clicking submit search.php takes a little while to load due to its contents. I would love to use ajax to substitute the index content with the search content, displaying an image (loading.gif) whilst the search contents load; as I've seen other websites.
This is basically so my visitors know the page is in-fact loading and they need not click the submit button again lol.
So seeing as I have no real knowledge of ajax I'd very much appreciate some direction, any help would be much appreciated :)
Well I've been playing around and found this solution.
<script type="text/javascript">
function ajax_request() {
$('#content').html('<img src="images/ajax-loader.gif" />');
$('#content').load("search.php");
}
</script>
The first line in the ajax_request() function sets the html of <div id="content"> to the loading image, the second line then loads the content from search.php into the div.
To trigger the function I added onclick="ajax_request()" to my submit button.
I found the image wasn't showing at first due to the AJAX request being completed before the image loaded, so I used pre-loading for the image so it appears immediately from the cache. I did this using purely css by adding #preload { display: none; } to my main stylesheet and then inserting that div with the image before <div id ="content"> like below.
<div id="preload">
<img src="images/ajax-loader.gif" width="1" height="1"/>
</div>
Hope this helps someone else in the future :)
It can be easily done using some jQuery.
$('#yourForm').submit(function()
{
// Put your loading code here...
}