I have a calendar created with php. In this calendar I have load_id's listed by date. I made a popup to show more data for each load. I want it to show as a popup not in a new tab. I have tried doing it as a function but as I don't know javascript I could not figure out how to pass the load_id to the url. If I replace "this.href" with the url in a function it works like a charm. But again I don't know how to pass the load id as a variable so that won't work for me. If someone could point out where I made my mistake passing the variable I would be much obliged!
This is what I have now:
echo "<span class='load_shipped'>
<a href='cal_popup.php?load_id=".$load_id."'
onclick='window.open(this.href, '_blank','left=100,top=100,width=500,height=500,toolbar=1,resizable=0');'>
".$load_id."
</a>
<br>
</span>\n";
I tried this as well to no avail:
echo "<span class='load_shipped'>
<a onclick='popup(".$load_id.");'>".$load_id."</a><br>
</span>\n";
Javascript:
<script>
function popup(id){
window.open('cal_popup.php?load_id=id', '_blank','left=100, top=100,width=500,height=500,toolbar=1,resizable=0');
}
</script>
All this did though was pass 'id' instead of the real load_id.
Seems like you're having trouble because you're using the same quotes to wrap the attribute onclick and to define the parameters of the window.open call. Try using double quotes on the attribute. You'll also need to return false; at the end of the onclick to prevent the link working as normal.
echo "<span class='load_shipped'>
<a href='cal_popup.php?load_id=".$load_id."'
onclick=\"window.open(this.href, '_blank','left=100,top=100,width=500,height=500,toolbar=1,resizable=0');return false;\">
".$load_id."
</a>
<br>
</span>\n";
In your last example where you have the function popup - please note that you need to concatenate the id variable into the string like 'cal_popup.php?load_id=' + id.
Related
I am having a problem about getting id from mysql table to modal.
I got a datatable that contain data from mysql table. i put a "UPDATE" button to edit data. UPDATE button opens modal in same page. The button code is ;
<a data-toggle='modal' class='btn btn-success btn-setting' href='#myModal1'>UPDATE</a>
It works perfectly and opens modal very well. But the problem starts from there.
I need to target and post the id to modal content. To do this I have to do something like **href='something.php?id={id}'**
I have href='#myModal1'> so I couldn't do it.
What I have tried ?
I have tried **href='#myModal1?kid={$list["kid"]}'**
When I mouse over the button I can see that it is getting the id but when I click the button the modal is not opening.
Also I have tried to search google. I think lots of people are fixing this with javascript which I dont know :) Any help will be awesome. Thanks !
Create one class (any class name). For ex, i created 'UpdateButton' in <a> tag.
Create one 'data-OrderID' (or any name). For ex, i created 'data-OrderID' in <a> tag. Pass value of your ID in this attribute. Use in <script> tag below.
<a href='#myModal1' class='btn btn-success btn-setting UpdateButton' data-OrderID="<?echo $YourIdHere;?>" data-toggle='modal'>
UPDATE
</a>
Now, in <script> tag, i used 'UpdateButton' class to call modal. And, 'data-OrderID' to pass value to something.php page
<script>
$('.UpdateButton').click(function(){
var Id=$(this).attr('data-OrderID');
$.ajax({url:"something.php?Id="+Id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
something.php (modal)
<?
echo $Id = $_GET['Id'];
?>
It works for me. Hope for you too.
Check Here for more info.
Add a data attribute in html as bellow I used "data-exid"
<a data-toggle='modal' data-exid='[YOUR ID]' class='btn btn-success btn-setting' href='#myModal1'>UPDATE</a>
and try bellow code for model box start event
jQuery('#myModal1').on('show.bs.modal', function(event) {
var button = jQuery(event.relatedTarget) // Button that triggered the modal
var exId = button.data('exid') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or 0other methods instead.
/*Add this line in local*/
var modal = jQuery(this)
modal.find('#logId').val(-1)
modal.find('#logId').val(exId)});
Here "#logId" is an id of hidden box in a model
I need a confirm window before calling the action specified in Url.Action. My code is:
<a href="#Url.Action("Delete", "OriginalWorks", new {id = w.Id})"
onclick="return confirm('Do you... '+ #w.Title + '?')"><span></span></a>
Where w is the instance of the OriginalWork class. If I look into HTML of the site, there is the right string value in confirm, but the window doesn't show and the action is called immediately. If a do the same with an int attribute, for example Id:
<a href="#Url.Action("Delete", "OriginalWorks", new {id = w.Id})"
onclick="return confirm('Do you... '+ #w.Id + '?')"><span></span></a>
It works as expected, showing a message in an confirm window with an value of Id.
I tried Title.toString(), but it doesn't help. I think it would work with Html.ActionLink, but I want to use this because of span in a a element.
Any ideas? Thanks a lot.
Try to use HttpUtility.HtmlEncode for your w.Title to awoid escape chars that can break javascript
Thanks for help. Solved it now, I didn't realize that the w.Title value was evaluated as a variable (and JavaScript maybe tried to find a variable called like a Title value), not as a string value. It simply works like this:
<a href="#Url.Action("Delete", "OriginalWorks", new {id = w.Id})"
onclick="return confirm('Do you... #w.Title?')"><span></span></a>
So there is an expected string value of Title.
I'm trying to use a href onclick event in kendo grid template. When I click on the link I need the alert to diplay path text but it gives "PDF undefined error". I think it could be an issue with escape quotes.
${PDF} returns a string value.
template: "<a id='${PDF}' class='clsPDF' onclick='setpdf(\${PDF});' href='\\#'>View</a>"
<script>
function setpdf(path)
{
alert(path);
}
</script>
I would suggest slightly different approach. Instead of using inline function you can use a delegate function attached to your Grid element which will take care of all buttons like the one you defined in the template.
e.g.
$("#gridName").on("click", ".clsPDF" , function(){
var model = $("#gridName").data("kendoGrid").dataItem($(this).closest("tr"));
alert('you clicked on item with id' + model.TheIdProperty);
})
I hope this gives you the idea. I think it is cleaner this way.
When the browser looks at the link make sure it sees it like this:
<a id='someId' class='clsPDF' onclick='setpdf("pdf.pdf");' href='#'>View</a>
If it sees it like this:
<a id='someId' class='clsPDF' onclick='setpdf(pdf.pdf);' href='\\#'>View</a>
It will think pdf is a javascript object/variable and try and use it.
So you are right it is most likely a problem with quotes. You could try wrapping your \${PDF} with escaped double quotes:
\"\${PDF}\"
parameters=eval([[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]);
<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>
this works fine when I'm just including this into my html code.
but I want to append this into a specific div using javascript or jquery. like this.
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>";
$('#content').append(myButton);
</script>
My problem is, it does not perform the function whenever I click the button. Maybe because of the variable parameter that I passed and my question is how can I do this correctly? And I'm avoiding using ajax cause it will affect a big portion of my codes.
Try this : use escape characters and add parameter variable using plus operator
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type=\"submit\" value=\"Pie Chart\" onClick=\"showChart('<?php echo $title;?>',"+parameters+",'#container','chart','Pie Chart')\"/>";
$('#content').append(myButton);
</script>
jQuery('#yourbutton').on('click', function() {
}); // your on click event
//to add content to innerhtml of div:
jQuery('#divelementorother').html(jQuery('#divelementorother').html() + YourDataToInside);
First, you see the .on function of jQuery to get an event handler on click to execute function. You can append that as JavaScript to the html of div, so you doesn`t have to use the button itselfs onclick
Second, to extend the innerhtml or html of an elemnt like , you've to use .html(data) . Or, i see above my post: you can use append.
Greetings
I'm attempting to upgrade a table and I've got most of it working, however one function is bothering me a bit. I need to get the function to return an input with an inline Onclick. The actual return works, but I can't seem to get it to recognize the inline JS it's printing back out. This is just a simple function to report a state change for a variable when a form element within the table is clicked. I'm using jQuery DataTables and Javascript.
return "<a href='#' id='changeStatusLink' name='changeStatusLink' onClick='setValue("+full.UserStatus+")' ><img src='<?php echo '/css/images/status_enabled.png' ?>' width='22' height='22' />" + data + "</a>";
Becasue it will render as
...Link' onClick='setValue(YourString)' >...
Do you have a variable YourString?
You most likely need quotes around it so it renders as
...Link' onClick='setValue("YourString")' >...
so you need to escape the double quotes
onClick='setValue(\""+full.UserStatus+"\")'
and hopefully the value does not have any quotes.