This might be a popular question but I couldn't find the answer I'm looking for.
Anyway What I want to do is pass an option value in the parent window to a popup window so I can display some thing in the popup according to the selected option.here is my code of the parent window.
<select name="itemSelect" id="itemSelect">
<option>chair</option>
<option>table</option>
</select>
<a class="button" href="#" onclick= "MyWindow=window.open('form3.php','MyWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=500,height=650'); return false;">enter data</a>
Using jQuery, you could do something this.
value = $('#itemSelect option:selected').val();
window.open('form3.php?value='+value+', MyWindow
You could then look for $_GET['value'] on the PHP page and process it!
<a class="button" href="#" onclick= "MyWindow=window.open('form3.php?itemSelect='+document.getElementById('itemSelect').value,'MyWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=500,height=650'); return false;">enter data</a>
Then in form3.php
echo $itemSelect = $_GET['itemSelect'];
You can do this via special onclick handler by adding your value via hash or url param:
<a class="button" href="#" onclick= "openNewWindow()">enter data</a>
JS:
function openNewWindow() {
var your_select = document.getElementById("itemSelect");
var value = your_select.options[your_select.selectedIndex].value;
MyWindow=window.open('form3.php#' + value,
'MyWindow',
'toolbar=no,location=no,...,width=500,height=650');
// ... or
// MyWindow = window.open('form3.php?select_value=' + value, ...
return false;
}
You want to pass the selected option to a pop up window for better interaction?
It would be easier to use alert() in js; using onclick handler you can call a function in js which then displays the pop up by using alert(document.getElementById().value=variable)
Related
I have this jquery
$(".waitingTime .button").click(function () {
alert("Ema");
});
I have a a tag like this:
Can I do the same href action in the jquery function?
Many Thanks
yes this is possible and has nothing to do with Laravel.
There are different possibilities. If your query is embedded within the same laravel view, you put the URL directly in your jQuery code, for example like this:
$(".waitingTime .button").click(function () {
window.location.href = "{{URL::to('restaurants/20')}}"
});
But I think the best option is to add the URL on your button tag as a data attribute and then let jquery go to that URL. That way you can make your buttons more dynamic and have more capsulated code.
One example might be:
<div class="waitingTime">
<button class="button link-button" data-href="{{URL::to('restaurants/20')}}">
Click me
</button>
</div>
$(".link-button").click(function () {
window.location.href = $(this).data('href');
});
That way you can always give a button with the class link-button a data-href attribute with the URL you want to open when the button is clicked and don't have to add additional jquery.
Just output php in your javascript
$(".waitingTime .button").click(function () {
window.location.href = "<?php echo URL::to('restaurants/20'); ?>";
});
if need variable from js can use this
if(data.cookies == 0){
location.replace("{{ route('delivery') }}?id="+id);
}
To clarify:
I have an echo statement as follows:
$striptitle .= ' - <a onclick="getnewurl();" href="'.SGLink::album($aid). '">'. $namek .'</a></h1>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-via="jb_thehot" data-text="Pictures of '. $hashfinal .'" teens>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
echo $striptitle ;
The onclick does this:
<script type="text/javascript">
function getnewurl()
{
var url = document.URL;
alert( url );
}
</script>
What I need is essentially to add the my anchor tag a data-url="INSERT_VAR_URL_HERE"
Is that possible?
Let me know if this isn't clear enough
Thanks!
Edit: to clarify, the alert in the function is only for testing. What I need is to be able to use the variable obtained in the function, in the same $striptitle variable.
My problem is that the url changes with AJAX, and the twitter button's data-url does not get updated. I was hoping to be able to get the new url by getting it everytime it is clicked. If there are other ways to do that, I'm open to suggestions!
Why not pass it as an argument?
$striptitle .= " - <a onclick=\"getnewurl('URL-HERE');\"...>";
Then in your script:
<script>
function getnewurl(url) {
alert(url);
}
</script>
Building on #Kolink's answer one way to not repeat the url in two places you could generate the link as:
<a onclick="getnewurl(this);" href="...">
then your JS could look like:
function getnewurl(link) {
link.setAttribute('data-url', location.href);
}
EDIT apparently jQuery.data doesn't update the dom properly, but setAttribute does
This looks very simple but I have little experience with jQuery and I can't wrap my head around it.
Let's say I have a dynamically generated HTML table, and in each row of this table is a link:
<a id='edit'>Edit User</a>
Now, the link should call a function with each user's ID as a parameter. I could do that inline liek this:
<a id='edit' onClick='editUser(<?php echo $row['id']; ?>)'>Edit User</a>
But how do I do this in jQuery?
I can call the function like this:
$('a#edit').click(function () {
editUser()
return false;
});
But how do I pass the ID to this function? I know I could first stick it into a hidden field and then get it from there by element id, but surely there's a better way?
I realize all the links would have the same id this way, so should I dynamically create the link ids by appending the user id? But then how do I call the jQuery?
ids must be unique throughout the entire HTML. So you could use a class selector and HTML5 data-* attribute:
<a class="edit" data-id="<?php echo $row['id']; ?>">Edit User</a>
and then:
$('a.edit').click(function () {
var id = $(this).data('id');
// do something with the id
return false;
});
Use data-* attributes to pass parameters.
<a class='edit' data-id='<?php echo $row['id']; ?>'>Edit User</a>
$('a.edit').click(function () {
editUser($(this).data("id"));
return false;
});
As Curt mentionned, the data-id is the way to go, if you're using HTML5. If you're using HTML4, I would pass this in the ID of the link :
<a id='edit-321' class='edit'>Edit User</a>
Then you can do this (and use event.preventDefault() rather than return false !) :
$('a.edit').click(function (evt) {
editUser($(this).attr("id").substring(5));
evt.preventDefault();
});
<script type="text/javascript">
$(document).ready(function(){
$('#feedback').hide('');
$('a#1').click(function(){
$('#feedback').toggle('');
});
});
</script>
It doesn't toggle the feedback div, but if you use show instead of toggle the script works.
I would suggest setting it differently (below is demonstration):
<a id="test" href="#" onclick="test(this.rel)" rel="1">Click me</a><br/>
<input type="button" onclick="change()" value="Change"/>
function test(val) {
console.log(val);
}
function change() {
document.getElementById('test').rel = Math.floor(Math.random()*11);
}
http://jsfiddle.net/CD7Uj/
Using the rel attribute, you can update the value that is used by your onclick function handler, so that you could have:
addplaylist('$watch',this.rel);
And use another function to change it.
You can't; it's generated on the server side. What you can do is replace the click handler once the page has been loaded, although it'd be easier if the anchor tag had an id... if it's worth it.
Easier yet, create a function that just delegates to the original function:
function addplaylist(watch, val) {
originalAddplaylist(watch, '2');
}
(Better yet, change it on the server side.)
I Have a select button in php code which Passes the Dynamic generated Row value and How do i do this jquery?
PHP code
<input type ="button" onclick="select(add,'<?php echo $_POST['somevale=ue']?>')"
Javascript
function select (fnname, val){
//Val changes every time
}
How do i acheive the same in Jquery in Putting the click event to the button and passing the Dynamic value and Defining the Function in Jquery?
Use the click handler inside your document ready. Note that add must be a valid function for this to work available in the current scope.
$(function() {
$('input').click(function() {
select(add, 'value you need to pass');
});
function add() {
..
}
});
You can use HTML5 data-attributes here (they don't cause issues in HTML4), like this:
<input type="button" class="add" data-value="<?php echo $_POST['somevalue']?>" />
Then you can fetch it in your function using .attr(), like this:
$(function() {
$(".add").click(function() {
var value = $(this).attr("data-value");
select('add', value); //call original function
//or, put that function's content in here
});
});
Give it a try here